Troubleshooting Module Build Failed in Webpack for React and Babel

Module Build Failed – Webpack, React, Babel

If you are encountering a “Module Build Failed” error while working with React, Flux, Webpack, and Babel, you’re not alone. In this blog post, we will troubleshoot this issue and provide you with a step-by-step solution to resolve it.

The Error

The error message usually appears when trying to rebuild the files and looks something like this:

Module build failed: Error: Couldn't find preset "env" relative to directory

Investigating the Issue

The error message gives us a clue about what might be causing the problem – missing presets. It’s important to ensure that you have all the necessary dependencies installed and configured correctly.

Solution

Follow these steps to resolve the “Module Build Failed” error:

Step 1: Install Presets

The first step is to install the required presets. In your terminal, run the following command:

npm install --save babel-preset-env babel-preset-react

Step 2: Update Webpack Configuration

Next, open your webpack.config.js file and update the loader section. Make sure to include the presets in the query:

// webpack.config.js
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['env', 'react']
      }
    }
  ]
}

Step 3: Rebuild

Now, try rebuilding your files by running the appropriate npm script or command.

Alternative Solution

If the above steps didn’t resolve the issue, it may be because you are using Webpack 4. In that case, you need to update your configuration accordingly.

Refer to the following blog post for guidance on setting up a React app from scratch using Webpack 4: Medium Blog Post.

Make sure to check if the react folder is present in your node_modules directory. If not, you can install it by running the following command:

npm install react react-dom

Conclusion

The “Module Build Failed” error in webpack can be frustrating, but by following the steps outlined in this blog post, you should be able to resolve the issue and continue building your real-time app with React, Flux, Webpack, and Firebase.

reference : 

reactjs