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, тоді webpack скаже, що index.jsxмодуль не може знайти App, але якщо я назвав додаток з ім'ям модуля в App.js, він знайде цей модуль і буде добре працювати.

Отже, я плутаю це. В моєму випадку webpack.config.jsя написав test: /\.jsx?$/перевірку файлу, але чому названого *.jsxне можна знайти?

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

або, ви можете включити .jsxдо розширень, які веб-пакунок повинен вирішити без явного декларування:

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 файли; ви можете радісно включити їх сюди, і веб-пакет вирішить їх:

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

В інтересах читабельності та кодування копію-вставки. Ось відповідь webpack 4 від коментаря mr rogers у цій темі.

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: ...
      }
    ]
  }
}

Я зіткнувся з подібною проблемою, і мені вдалося вирішити, використовуючи властивість дозволити .

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 у функції надання компонентів.