Webpack не может определить мой синтаксис JSX внутри моего файла js - PullRequest
Новая
       6

Webpack не может определить мой синтаксис JSX внутри моего файла js

0 голосов
/ 31 августа 2018

Когда я пытаюсь связать мои модули с веб-пакетом, он не может определить синтаксис JSX в моем файле index.js и выдает следующую ошибку: 

ERROR in ./src/index.js 29:3
Module parse failed: Unexpected token (29:3)
You may need an appropriate loader to handle this file type.
|               const searchTerm = _.debounce(term =>     {this.searchTerm(term)}, 300);
|               return (
>                       <div>
|                               <SearchBar onInputChange= {searchTerm}/>
|                               <div className="row">
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js     main[1]

Это мой конфиг веб-пакета: 

const Path = require('path');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },


 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: Path.resolve(__dirname, '../src'),
        use: {
          loader: 'babel-loader',
           options: {
            presets: ["@babel/preset-react",  "@babel/preset-env"]
          } 
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,  
        use: [ 'css-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

Я добавил предустановки babel для реакции, а именно @ babel / preset-реагировать. Я также добавил загрузчик babel, но он по-прежнему не может определить синтаксис JSX.

1 Ответ

0 голосов
/ 31 августа 2018

Я клонировал ваш репозиторий и обнаружил множество конфликтов в настройке вашего кода.

  1. Некоторые из ваших пакетов не соответствуют последним версиям вашего @babel/core пакета. Если вы собираетесь использовать последнюю версию babel, то можете использовать и самые последние пресеты.

`

devDependencies: {
  @babel/cli: ^7.0.0,
  @babel/core: ^7.0.0,
  @babel/preset-env: ^7.0.0,
  @babel/preset-react: ^7.0.0,
  babel-loader: ^8.0.0"
}

`

и я удалил babel-preset-env и babel-preset-react (старые версии) на вашем dependencies.

  1. Выберите одну babel конфигурацию. Это либо на вашем package.json, либо на .babelrc. Я предлагаю вам придерживаться файла .babelrc. И изменил значения свойства presets. 

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

  2. На вашем webpack.config.js вам не нужно делать include: include: Path.resolve(__dirname, './src'). Вы также можете удалить эту строку: 

    `presets: ["react", "env"]`

и кстати, на вашем package.json,

"scripts": { - "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", + "start": "webpack-dev-server --mode development", ...

при запуске npm start ваш проект будет искать локально установленный webpack-dev-server и использовать глобальный, если не найдет локальный пакет.

Надеюсь, это поможет. :)

...