У меня возникли проблемы с настройкой моего шаблона MERN. Я все еще учусь, поэтому ответ может быть очевидным, но я не могу найти ответ для текущей версии webpack, react, babel. Я получаю эту ошибку, когда я npm run dev
:
Module parse failed: Unexpected token (8:2)
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
|
| ReactDOM.render(
> <React.StrictMode>
| <App />
| </React.StrictMode>,
webpack 5.4.0 compiled with 1 error in 231 ms
Как я понял, это означает, что загрузчик не настроен; однако у меня есть это:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';
import App from '../components/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
home: './client/index.js',
// add pages here with link to the js file for each
},
output: {
path: path.resolve(__dirname, 'client'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}]
},
{
test: /\\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
}
}
package.json
{
"name": "mern-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.1",
"@testing-library/user-event": "^12.2.0",
"express": "^4.17.1",
"mongoose": "^5.10.13",
"nodemon": "^2.0.6",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"webpack": "webpack",
"dev": "npm run webpack && nodemon --exec babel-node --bin/www",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"axios": "^0.21.0",
"babel-loader": "^8.1.0",
"body-parser": "^1.19.0",
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
}
}
Итак, насколько я могу судить, у меня установлен соответствующий @babel/preset-react, а также правильные зависимости и загрузчики веб-пакета, но веб-пакет зависает с ошибкой в ‹React.StrictMode›
Я борюсь здесь и буду признателен за любую помощь, которую вы, ребята, можете мне дать.
Заранее спасибо.
Крис