Я пытаюсь настроить проект 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"
}
Когда вы используете синтаксис jsx, расширение файла для этого файла должно быть
.jsx
, которое вы используете здесь .js. Поэтому, пожалуйста, переименуйте этот файл вindex.jsx
и адаптируйте это изменение в конфигурации вашего веб-пакета:
├── .babelrc ├── .git ├── .gitignore ├── index.html ├── LICENSE.MD ├── node_modules ├── package.json ├── package-lock.json ├── README.md ├── src ├── style ├── test └── webpack.config.js
package.json