Здравствуйте, перерыл весь инет, так и не нашел рабочего для себя решения проблемы.
Ковыряю react на django, все было хорошо, пока не угораздило меня оставить себе комментарий кирилицей прям в коде компонента реакта. Ну чтоб когда пришел и сразу понятно было на чем остановился.
Когда пришел продолжить запустил фронт, бек, все вроде нормально.
Захожу на локалхост а компоненты не рендерятся. Смотрю в консоль хрома и вижу:
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\src\components\createroompage.js: Unexpected token, expected ";" (43:20)
[0m [90m 41 | [39m }[0m
[0m [90m 42 | [39m[0m
[0m[31m[1m>[22m[39m[90m 43 | [39m [33mОСТАНОВИЛСЯ[39m [33mНА[39m [33mТОМ[39m [33mЧТО[39m [33mПОЛУЧАЮ[39m [33mBAD[39m [33mREQUEST[39m [33mНА[39m [33mМОИ[39m [33mКЛЮЧ[39m [33m-[39m [33mЗНАЧНИЕ[39m[0m
[0m [90m | [39m [31m[1m^[22m[39m[0m
[0m [90m 44 | [39m[0m
[0m [90m 45 | [39m fetch([32m'api/crapiview'[39m[33m,[39m requestOptions)[33m;[39m[0m
[0m [90m 46 | [39m }[0m
at Object._raise (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:748:17)
at Object.raiseWithData (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:741:17)
at Object.raise (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:735:17)
at Object.unexpected (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:9097:16)
at Object.semicolon (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:9079:40)
at Object.parseExpressionStatement (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:12190:10)
at Object.parseStatementContent (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:11786:19)
at Object.parseStatement (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:11650:17)
at Object.parseBlockOrModuleBlockBody (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:12232:25)
at Object.parseBlockBody (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\node_modules\@babel\parser\lib\index.js:12218:10)
at eval (
webpack://frontend/./src/components/createroompage...)
at Object../src/components/createroompage.js (
127.0.0.1:8000/static/frontend/main.js:2:4127)
at __webpack_require__ (
127.0.0.1:8000/static/frontend/main.js:2:251468)
at eval (
webpack://frontend/./src/components/homepage.js?:6:73)
at Object../src/components/homepage.js (
127.0.0.1:8000/static/frontend/main.js:2:7470)
at __webpack_require__ (
127.0.0.1:8000/static/frontend/main.js:2:251468)
at eval (
webpack://frontend/./src/components/app.js?:6:67)
at Object../src/components/app.js (
127.0.0.1:8000/static/frontend/main.js:2:2509)
at __webpack_require__ (
127.0.0.1:8000/static/frontend/main.js:2:251468)
at eval (
webpack://frontend/./src/index.js?:2:76)
Среди кракозябр видна кирилица, ясно что дело в ней и ошибка из-за нее. Иду в файл и удаляю свои комментарии, сейвлю изменения, рефрешу, а там все по старому. Спустился вплоть до ребута компа, и все также ничего не поменялось.
Судя по пути ошибки Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): грешу на babel-loader.
Как я не менял файл (C:\Users\Lenovo B590\Documents\DEV\React-DDJ.TWT\music_controller\frontend\src\components\createroompage.js), и даже оставлял файл в котором он видит ошибку пустым, он все равно пишет ту же самую ошибку где у меня кирилица в коде.
Вопрос: как пофиксить ситуацию? Как заставить babel увидеть изменения в файле на который он ругается? Если дело конечно в babel.
Имею следующий конфиг:
Package.json файл:
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"@babel/preset-flow": "^7.12.1",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.10.1",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"json-loader": "^0.5.7",
"react-router-dom": "^5.2.0"
},
"description": ""
}
babel-config.json файл:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "10"
}
}
],
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
webpack.config.js файл:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("production"),
},
}),
],
};
Простой
