title: Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError. Something went wrong with react and babel
body: <p>I have some problems with React using Django.
  Everything was fine, until i wrote some text using cyrillic letters right into my react component code.
  Then i get this error in chrome console:</p>
  <pre><code>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 &quot;;&quot; (43:20)
  
  [0m [90m 41 | [39m        }[0m
  [0m [90m 42 | [39m[0m
  [0m[31m[1m&gt;[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.js?:1:7)
      at Object../src/components/createroompage.js (http://127.0.0.1:8000/static/frontend/main.js:2:4127)
      at __webpack_require__ (http://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 (http://127.0.0.1:8000/static/frontend/main.js:2:7470)
      at __webpack_require__ (http://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 (http://127.0.0.1:8000/static/frontend/main.js:2:2509)
      at __webpack_require__ (http://127.0.0.1:8000/static/frontend/main.js:2:251468)
      at eval (webpack://frontend/./src/index.js?:2:76)
  </code></pre>
  <p>Obviously its due to cyrillic letters, so i deleted it. Then i tryed to refresh the page and i got the same error. Finally i even deleted all the code in src\components\createroompage.js file, then saved it and even turned off my pc, and anyway i`m getting the same error above.</p>
  <p><strong>So the questions is:</strong> how is it possible (there is no code in the file at all not saying about cyrillic letters)? how to fix it?
  Seems like babel works incorrect: (from ./node_modules/babel-loader/lib/index.js).</p>
  <p><strong>My settings:</strong></p>
  <p><em>babel.config.json</em></p>
  <pre><code>{
    &quot;presets&quot;: [
      [
        &quot;@babel/preset-env&quot;,
        {
          &quot;targets&quot;: {
            &quot;node&quot;: &quot;10&quot;
          }
        }
      ],
      &quot;@babel/preset-react&quot;
    ],
    &quot;plugins&quot;: [&quot;@babel/plugin-proposal-class-properties&quot;]
  }
  </code></pre>
  <p><em>webpack.config.js</em></p>
  <pre><code>const path = require(&quot;path&quot;);
  const webpack = require(&quot;webpack&quot;);
  
  module.exports = {
    entry: &quot;./src/index.js&quot;,
    output: {
      path: path.resolve(__dirname, &quot;./static/frontend&quot;),
      filename: &quot;[name].js&quot;,
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;,
          },
        },
      ],
    },
    optimization: {
      minimize: true,
    },
    plugins: [
      new webpack.DefinePlugin({
        &quot;process.env&quot;: {
          // This has effect on the react lib size
          NODE_ENV: JSON.stringify(&quot;production&quot;),
        },
      }),
    ],
  };
  </code></pre>
  <p>package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;webpack --mode development --watch&quot;,
      &quot;build&quot;: &quot;webpack --mode production&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/preset-flow&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.10&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;webpack&quot;: &quot;^5.10.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.2.0&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.12.1&quot;,
      &quot;@material-ui/core&quot;: &quot;^4.11.2&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
      &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,
      &quot;json-loader&quot;: &quot;^0.5.7&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;
    },
    &quot;description&quot;: &quot;&quot;
  }
  </code></pre>