Как исправить Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла с помощью веб-пакета 4

Question

Я пытаюсь исправить плагин, но, похоже, не могу распаковать его из коробки. Первоначально он использовал webpack v2 и babel 6, поэтому я решил обновить его до wepack 4 и babel 7. Несмотря на то, что он не выглядит как webpack. я получаю ошибку

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

мой файл веб-пакета

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: ['babel-loader'] 
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use:['style-loader','css-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

репо можно найти здесь https://github.com/shorif2000/react-js-banner

Answer 1

Проблема в веб-пакете не понимает Синтаксис React JSX, поэтому он не может правильно обработать этот тип файла. Чтобы это исправить, вам нужно настроить загрузчик веб-пакетов для преобразования JSX в собственный JavaScript. Для этого вам необходимо использовать babel-loader babel и установить соответствующий пресет babel, а именно пресет "@babel/preset-react".

A preset представляет собой набор плагинов, используемых для поддержки определенного языка. функции. Вы используете пресеты, чтобы воспользоваться новейшими функциями JavaScript, которые еще не были реализованы в браузерах.

Пресеты преобразуют ваш исходный код и синтаксис для обеспечения совместимости с собственным JavaScript, который понимают браузеры. Например, @babel/preset-react позволит вам писать код стиля JSX (JavaScript как XML), который обычно используется для определения компонентов React, хотя JSX не понимается браузером .

.

Может быть, вы могли бы попробовать следующее и посмотреть, помогут ли эти шаги решить вашу проблему:

1. Установить предустановку реакции babel:

   npm install --save-dev @babel/preset-react

2. В вашем файле .babelrc (или package.json), в зависимости от того, где у вас есть конфигурация Babel для пресетов и плагинов, добавьте новый пресет для обработки специфичного для JSX синтаксиса реагирования.

Примечание : если у вас нет файла .babelrc, добавьте его в корневой каталог вашего проекта и присвойте ему следующее содержимое:

.babelrc:

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

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

{ test: /\.(js|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: ['babel-loader'] }

Примечание : Я бы также добавил раздел resolve в ваш webpack.config.js, чтобы настроить способ разрешения модулей в вашем проекте. Что-то вроде:

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

Для полноты картины я создал простое веб-приложение, использующее React и работающее с webpack-dev-server. Ниже выложено все мое содержимое webpack.config.js:

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};

Надеюсь, это поможет!