Блог

Я выполнял миссию по обновлению зависимостей и обнаружил, что при обновлении Webpack до 4.24.0 или выше я получаю этот сбой:

 ERROR in ./src/js/components/App.jsx 35:9
Module parse failed: Unexpected token (35:9)
You may need an appropriate loader to handle this file type.
| import ReactModal from 'react-modal';
| var RoomListings = React.lazy(function () {
>   return import('./RoomListings.jsx');
| });
| var RoomDetails = React.lazy(function () {
 @ ./src/js/index.js 3:0-39 6:74-77
 @ multi ./src/js/index.js
  

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

webpack.config.js

 module.exports = {
  entry: ["./src/js/index.js"],
  output: {
    path: PATHS.build,
    filename: "js/[name].js"
  },
  devServer: {
    contentBase: path.join(__dirname, 'src'),
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"},
      { test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /.html$/, loader: "html-loader" },
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /.(png|jp(e*)g|svg)$/,  use: [{
        loader: 'url-loader',
        options: { 
            limit: 8000, // Convert images < 8kb to base64 strings
            name: 'images/[hash]-[name].[ext]'
        } 
      }]}
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};
  

.babelrc

 {
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["add-react-displayname", "@babel/plugin-syntax-dynamic-import", "emotion"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}
  

Я предполагаю, что что-то либо отсутствует, либо неправильно настроено, но после нескольких часов поиска в SO и Google ни один из существующих ответов, похоже, не помогает.