webpack не может найти модуль, если файл с именем jsx

как я пишу webpack.конфиг.js как это 

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

и index.jsx Я импортировать react модуль App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

я нахожу, если я назвал приложение модуля в App.jsx, тогда webpack скажет в index.jsx не удается найти модуль App, а если я назвал приложение модуля в App.js, он найдет этот модуль и будет работать хорошо.

Итак,я в замешательстве. В моем webpack.config.js Я написал test: /.jsx?$/ чтобы проверить файл, но почему им *.jsx не может быть нашли?

enter image description here

60
reactjs webpack webpack-dev-server

4 ответов

Webpack не знает, чтобы решить .jsx неявно файлов. Вы можете указать расширение файла в приложении (import App from './containers/App.jsx';). Ваш текущий тест загрузчика говорит использовать загрузчик babel при явном импорте файла с расширением jsx.

или, вы можете включить .jsx в расширениях, которые webpack должен разрешить без явного объявления:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

для Webpack 2 оставьте пустое расширение.

resolve: {
  extensions: ['.js', '.jsx']
}
130

добавление к приведенному выше ответу,

на разрешить Свойства, где вы должны добавить все типы файлов, которые вы используете в вашем приложении.

Предположим, вы хотите использовать .jsx или .es6 файлы вы можете с радостью включить их здесь, и webpack разрешит их:

resolve: {
  extensions: ["", ".js", ".jsx" ".es6"]
          }

Если вы добавите расширения в разрешить свойство вы можете удалить их из импорта заявление:

import Hello from './hello';// Extensions removed
import World from './world';

другие сценарии, например, если вы хотите, чтобы сценарий кофе был обнаружен, вы должны настроить свой тест собственность, а также как:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};
13

убедитесь, что пакет.js генерируется без ошибок (проверьте журнал выполнения задач).

Я получал "не могу найти модуль, если файл с именем jsx" из-за синтаксической ошибки в html в функции рендеринга компонентов.

0

в интересах удобочитаемости и копипаст кода. Вот ответ webpack 4 от мистер Роджерс комментарий в этой теме.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}
0