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

Question

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:

I havent hardcoded any paths
I have cleaned the node modules and rebuilt the project from groundup including cleaning npm cache.
The same project works in my original folder without any errors.

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?

Looking at the error, it seems Babel is not working.

Agney
– Agney

2017-09-12 04:25:01 +00:00
Commented Sep 12, 2017 at 4:25 — Agney
– Agney, Commented Sep 12, 2017 at 4:25

Nitish Phanse · Accepted Answer · 2017-09-12 05:49:17Z

1

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/
    },

answered Sep 12, 2017 at 5:49

Nitish Phanse

5621 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related