CODEWITHSUNDEEP
javascriptwebpack
Pavel Perevezencev
Pavel Perevezencev

Reputation: 2978

Error with webpack 4 and babel 7

I have a project with React and Webpack as build system. My devDependencies

devDependencies

"webpack": "^4.5.0",

webpack.config.js

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
...

And I get this error:

ERROR in ./node_modules/project/components/InfiniteScroller.jsx Module parse failed: Unexpected token (9:8) You may need an appropriate loader to handle this file type.

What I am doing wrong?

Upvotes: 1

Views: 325

Answers (2)

nanobar
nanobar

Reputation: 66355

It looks like you're including uncompiled code from node_modules, your loader specifically excludes compiling node_modules code (exclude: /node_modules/) for efficiency reasons. Usually modules expose a compiled version of the library (usually in /dist, usually pointed to by "main" property in the package.json of the module).

If you want to parse code in node_modules, I recommend you just do it for node_modules/project, rather than all modules for efficiency. Modify your exclude statement accordingly, something like: exclude: /node_modules(?!\/project)/

You'll also need to make sure you use the necessary presets to handle the files (e.g. babel-preset-env, babel-preset-react) and any plugins the file might need (e.g. transform-object-rest-spread etc).

Upvotes: 2

skpdm
skpdm

Reputation: 1438

Since I don't have enough points to comment, I'll post as an answer -

I see you're importing a .jsx module - You should try adding

query: {
  presets: ['es2015','react']
}

to your rule after use

Upvotes: 0

Related Questions