babel: Compilation error "Support for the experimental syntax 'classProperties' isn't currently enabled" despite having the plugin installed when using linked packages

Bug Report

Current Behavior

I have the following tree (simplified)

-/test
--.babelrc
--some-test-file.js
-.babelrc
-some-file.js

If I run babel through cli in /, it compiles flawlessly.

Here’s the catch: / is a linked package, which /test, another project (test suite for said package), is using (uncompiled version of it, so I wouldn’t have to worry about hot module reloading).

Now, both / and /test have @babel/plugin-proposal-class-properties in their .babelrc configs.

When I run Webpack in test suite, I get the following error on a file from / package:

ERROR in ../src/Page.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\wojte\Projekty\react-pdf\src\Page.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (38:9):

Input Code

REPL or Repo link if applicable:
- Clone: https://github.com/wojtekmaj/react-pdf/tree/babel-7
- yarn
- cd test
- yarn
- yarn start

Please note that master branch runs on Babel 6. I did not have this issue before. It’s stopping me from doing the upgrade.

Expected behavior/code A clear and concise description of what you expected to happen (or code).

Babel should have read .babelrc from / package and use it for parsing the file from /.

Babel Configuration (.babelrc, package.json, cli command)

// `.babelrc in `/`

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/transform-runtime",
    "@babel/proposal-class-properties"
  ]
}

// `.babelrc in `/test`
{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false
      }
    ],
    "@babel/react"
  ],
  "plugins": [
    "@babel/transform-runtime",
    "@babel/proposal-class-properties"
  ]
}

Environment

Babel version(s): 7.0.0
Node/npm version: 10.4.0/6.4.1
OS: Windows 10
Monorepo: ?
How you are using Babel: loader

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 17 (11 by maintainers)

Most upvoted comments

That didn’t work. I think that your initial suggestion that babel-loader simply does not run is not true, as the error comes from babel-loader and the file that should be loaded by it.

babel, or babel-loader simply does not recognize which .babelrc to use and uses none. Why do I think so? We’re getting this error:

SyntaxError: C:\Users\wojte\Projekty\react-pdf\src\Outline.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (22:9):

  20 |
  21 | export class OutlineInternal extends PureComponent {
> 22 |   state = {
     |         ^
  23 |     outline: null,
  24 |   }
  25 |

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

and it just happens that both /.babelrc and /test/.babelrc contain "@babel/proposal-class-properties" in "plugins" section!

At the end of the error I quoted above, there’s this stack:

 @ ../src/entry.webpack.js 4:0-26 17:0-42
 @ ./Test.jsx
 @ ./index.jsx
 @ multi ./index

so it looks like Babel properly resolved the symlink path. This gave me an idea that maybe babelRcRoots should have also been resolved:

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { babelrcRoots: ['.', '../'] }, // <-- this line fixed it!
      },

and tada! It worked.

But I still think I shouldn’t have needed to manually point babelrc roots for it.

wojtekmaj on Sep 15, 2018