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

Когда я пишу webpack.config.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, тогда веб-пакет скажет, что index.jsxне могу найти модуль App, но если я назвал приложение модуля с именем в App.js, он найдет этот модуль и будет работать хорошо.

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

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']
}

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

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

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

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

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

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'] 
  }
};

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

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

Как упоминалось в комментариях к ответу от @max, для webpack 4 я обнаружил, что мне нужно поместить это в одно из правил, перечисленных в модуле, например:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

У меня возникла аналогичная проблема, и я смог решить эту проблему с помощью свойства resolve .

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Как видите, я использовал .jsx там, что разрешило следующую ошибку

ОШИБКА в ./src/app.jsx Модуль не найден: Ошибка: не удается устранить

Для справки: https://webpack.js.org/configuration/resolve/#resolve-extensions

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

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