>

CODEMASTERYLAB

IDE PLATFORM
CoursesCommunity BlogsKnowledge GraphQuizzesInterview Prep

Sign in to track progress & earn XP

Sign In Create Account
>
Code Mastery Lab

Code Mastery Lab

Sign In

Build Tooling — Webpack and the Modern React Workflow

Question 1 / 1

0:00
Core
Medium

A developer clones a React project and runs npm run build. Webpack exits with:

Module parse failed: Unexpected token (7:4)
You may need an appropriate loader to handle this file type.
| const ColorList = ({ colors }) => (
|   <ul className="colors">
>     <li key={colors[0].id}>{colors[0].title}</li>

The webpack.config.js contains:

module.exports = {
  entry: "./src/index.js",
  output: { path: __dirname + '/dist', filename: 'bundle.js' },
  module: {
    rules: [{
      test: /\.jsx$/,
      exclude: /(node_modules)/,
      use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } }
    }]
  }
}

What is the root cause and the minimal fix?