Задать вопрос
@chege

REACT. Babel компилирует старый вариант файла?

Здравствуйте, перерыл весь инет, так и не нашел рабочего для себя решения проблемы.
Ковыряю 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"),
},
}),
],
};
  • Вопрос задан
  • 354 просмотра
Подписаться 1 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
@chege Автор вопроса
Очевидно проблема оказалась в конфиге/бабел/вебпак.
Никакая чистка кеша не помогала, пробовал rimaf тоже, тоже 0.
Помог только полный снос nodes_modules и всех json/js файлов отвечающих за конфиг лежащих в корневой папке апки.
После полный реинстал всех пакетов через npm.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽