Webpack не понимает теги responsejs

Andrés спросил: 28 марта 2018 в 04:36 в: reactjs

Я пытаюсь настроить проект reactjs с помощью webpack, но при компиляции с npm start возникает ошибка. Похоже, webpack не понимает тег <Provider .../>. Этот проект отлично работал для предыдущих версий библиотек, но я обновляю зависимости от последних и прекращаю работу. Любая помощь приветствуется. Далее, некоторые фрагменты основного файла.

    ERROR in ./src/index.js
Module parse failed: /home/andres/Desarrollo/anube-app-flotas/src/index.js Unexpected token (16:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (16:2)
    at Parser.pp$4.raise (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExprList (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:2165:22)
    at Parser.pp$3.parseSubscripts (/home/andres/Desarrollo/anube-app-flotas/node_modules/webpack/node_modules/acorn/dist/acorn.js:1741:35)
 @ multi main

Мой файл webpack.config.js выглядит следующим образом:

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    }
};

и .babelrc:

{
  "presets": ["react", "env"]
}

index.js, где он не работает в строке 16:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';
// ...
    ReactDOM.render(
      <Provider store={createStoreWithMiddleware(reducers)}>  // line 16
            <BrowserRouter>
                <div>
                    <Switch>

любая идея о том, что здесь происходит?

UPDATE: зависимости в package.json

  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.3",
    "style-loader": "^0.21.0",
    "css-loader": "^0.28.11"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^16.32.1",
    "react-dom": "^16.3.2",
    "react-redux": "5.0.7",
    "react-router": "^4.2.0",
    "redux": "^4.0.0"
  }

1 ответ

Daniel ответил: 29 марта 2018 в 07:34

Когда вы используете синтаксис jsx, расширение файла для этого файла должно быть .jsx, которое вы используете здесь .js. Поэтому, пожалуйста, переименуйте этот файл в index.jsx

и адаптируйте это изменение в конфигурации вашего веб-пакета:

module.exports = {
    entry: [
        './src/index.jsx'
    ],
    module: {
        rules: [{
           test: /\.jsx?$/, // also transpile jsx files
           exclude: /node_modules/,
           loader: 'babel-loader'
       }]
   },
}
Andrés ответил: 30 марта 2018 в 08:50
Спасибо @Daniel. Я внес эти изменения, но они все равно терпят неудачу.
Daniel ответил: 30 марта 2018 в 09:01
Файл babelrc находится в корневом каталоге проекта?
Andrés ответил: 30 марта 2018 в 09:04
Да, . ├── .babelrc ├── .git ├── .gitignore ├── index.html ├── LICENSE.MD ├── node_modules ├── package.json ├── package-lock.json ├── README.md ├── src ├── style ├── test └── webpack.config.js
Andrés ответил: 30 марта 2018 в 09:07
На всякий случай это помогло, я обновил исходные сообщения содержимым раздела зависимостей в package.json