CODEWITHSUNDEEP
javascriptreactjswebwebpack
SeaWarrior404
SeaWarrior404

Reputation: 4168

Why does Webpack build of React web app fail when project is built in a different folder?

I have a React project which was built using Webpack. The weird issue is when I run the React app in my original folder it builds and runs without any error. However when I copy all the files in the folder, paste it in a new folder and then try to build the same project it fails. I have tried changing the folder name, changing the config files to reflect the new folder name, however it always fails in app.js and points to an error in render method. Few points to note:

The error I get is as follows:

       Version: webpack 2.2.1
       Time: 1520ms
       Asset       Size  Chunks             Chunk Names
       app.js     219 kB       0  [emitted]  main
       index.html  636 bytes          [emitted]  
       chunk    {0} app.js (main) 208 kB [entry] [rendered]
       [1] (webpack)/buildin/global.js 509 bytes {0} [built]
       [32] ./src/app.js 783 bytes {0} [built] [failed] [1 error]
       [33] (webpack)-dev-server/client?http://0.0.0.0:8080 4.16 kB {0} 
       [built]
       [34] ./~/ansi-regex/index.js 135 bytes {0} [built]
       [35] ./~/punycode/punycode.js 14.7 kB {0} [built]
       [36] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
       [38] ./~/querystring-es3/index.js 127 bytes {0} [built]
       [40] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
       [47] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
       [49] ./~/sockjs-client/lib/transport-list.js 613 bytes {0} 
       [built]
       [66] ./~/strip-ansi/index.js 161 bytes {0} [built]
       [68] ./~/url/url.js 23.3 kB {0} [built]
       [69] ./~/url/util.js 314 bytes {0} [built]
       [70] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
       [72] multi (webpack)-dev-server/client?http://0.0.0.0:8080 
       ./src/app.js 
       40 bytes {0} [built]
       + 58 hidden modules

       ERROR in ./src/app.js
       Module build failed: SyntaxError: Unexpected token (39:2)

       37 | // }); 
       38 | ReactDOM.render(
       > 39 |   <div>Hello</div>,
       |   ^
       40 |   document.getElementById('content'),
       41 | );
       42 | 

       @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 
       ./src/app.js
       Child html-webpack-plugin for "index.html":
       chunk    {0} index.html 542 kB [entry] [rendered]
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] (webpack)/buildin/global.js 509 bytes {0} [built]
       [2] (webpack)/buildin/module.js 517 bytes {0} [built]
       [3] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.32 
       kB 
       {0} [built]
       webpack: Failed to compile.

The above error doesn't happen when running in my original folder. What is the issue here?

Upvotes: 0

Views: 139

Answers (1)

Nitish Phanse
Nitish Phanse

Reputation: 562

Your .babelrc file is in the root of your project directory, and thats where webpack looks for it to use your loaders and presets. You can workaround by using the following config

    {
      use: [
        {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [require.resolve('babel-preset-react-app')], // <- Whatever preset you wish
            cacheDirectory: true,
          }
        }
      ],
      test: /\.js$/,
      exclude: /node_modules/
    },

Upvotes: 1

Related Questions