Проблема конфигурации Webpack и babel: «Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов». - PullRequest
Новая
       5

Проблема конфигурации Webpack и babel: «Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов».

0 голосов
/ 08 января 2019

Я пытаюсь включить другой проект в наш новый проект, импортировав его как модуль узла. Я получаю следующее сообщение об ошибке: 

   WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/index.js 8:16
Module parse failed: Unexpected token (8:16)
You may need an appropriate loader to handle this file type.
| import * as serviceWorker from './serviceWorker';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
| 
| module.hot.accept();
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]
ℹ ｢wdm｣: Failed to compile.

Насколько я знаю, это как-то связано с неправильными настройками в webpack.config.js , .babelrc или package.json, Я видел, что эта проблема возникла еще у многих людей, и я пытался следовать конструкциям, которые я видел в ответе, но ни один из них не помог мне. Теперь я получил следующие файлы, которые все еще приводят к этой ошибке. Неважно, что я делаю, ошибка просто не исчезнет:

package.json: 

{
  "name": "mysecondapp-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "myfirstapp-react": "^2.1.2",
    "jquery": "^3.3.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router": "^4.4.0-beta.1"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --open --mode development",
    "build": "webpack --mode build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "react-hot-loader": "^4.6.3",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

.babelrc: 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.js: (это может выглядеть немного грязно, так как я много редактировал, чтобы локализовать ошибку) 

const path = require("path");
const webpack = require('webpack');
module.exports = {
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js(x)$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      },
      {
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.svg$/,
        loaders: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            query: {
              jsx: true
            }
          },
        ]
      }
    ]
  },
};

1 Ответ

0 голосов
/ 08 января 2019

Я исправил проблему, изменив: 

test: /\.js(x)$/

до 

test: /\.jsx$/
...