webpack nie może znaleźć modułu, jeśli plik o nazwie jsx

Jak piszę webpack.config.js w ten sposób

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

I index.jsximportuję reactmodułApp

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

import App from './containers/App';

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

Stwierdzam, że jeśli nazwałabym aplikację module w App.jsx, to webpack powie, że index.jsxnie można znaleźć modułu App, ale jeśli nazwałem aplikację module w App.js, znajdzie ten moduł i będzie działał dobrze.

Więc jestem zdezorientowany. W moim webpack.config.js, napisałem, test: /\.jsx?$/aby sprawdzić plik, ale dlaczego *.jsxnie można znaleźć nazwy ?

Webpack nie wie, jak rozwiązywać .jsxpliki w sposób niejawny. Możesz określić rozszerzenie pliku w swojej aplikacji ( import App from './containers/App.jsx';). Twój bieżący test modułu ładującego mówi, że należy użyć programu ładującego babel, gdy jawnie importujesz plik z rozszerzeniem jsx.

lub możesz dołączyć .jsxdo rozszerzeń, które pakiet webpack powinien rozwiązać bez wyraźnej deklaracji:

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

W przypadku Webpack 2 pozostaw puste rozszerzenie.

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

Dodając do powyższej odpowiedzi,

Właściwość Resolution to miejsce, w którym musisz dodać wszystkie typy plików, których używasz w aplikacji.

Załóżmy, że chcesz użyć plików .jsx lub .es6 ; możesz szczęśliwie dołączyć je tutaj, a webpack je rozwiąże:

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

Jeśli dodasz rozszerzenia we właściwości resell , możesz je usunąć z instrukcji import:

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

Inne scenariusze, na przykład jeśli chcesz, aby skrypt kawy był wykrywany, powinieneś również skonfigurować swoją właściwość testową, na przykład:

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

Ze względu na czytelność i kodowanie typu „kopiuj-wklej”. Oto odpowiedź na Webpack 4 od komentarza pana rogersa w tym wątku.

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

Jak wspomniano w komentarzach do odpowiedzi z @max, dla webpacka 4 stwierdziłem, że muszę to umieścić w jednej z reguł, które były wymienione w module, na przykład:

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

Miałem do czynienia z podobnym problemem i byłem w stanie rozwiązać za pomocą właściwości rozwiązania .

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

Jak widać, użyłem tam .jsx, który rozwiązał następujący błąd

BŁĄD w ./src/app.jsx Nie znaleziono modułu: Błąd: nie można rozwiązać

W celach informacyjnych: https://webpack.js.org/configuration/resolve/#resolve-extensions

Sprawdź, czy plik bundle.js jest generowany bez błędów (sprawdź dziennik modułu uruchamiania zadań).

Otrzymałem komunikat „nie można znaleźć modułu, jeśli plik o nazwie jsx” z powodu błędu składni w html w funkcji renderowania komponentu.