Webpack, React & Mocha test: Missing class properties transform

Question

I have been having this issue for over a week now. The code runs just fine in a browser and I get no errors, but when I run mocha test, I get the error of Missing class properties transform. I installed it via npm and even deleted my packages and re-installed them but still nothing. I have read numerous posts on here (i.e. Error: Missing class properties transform) and I still come up with that error. What am I missing here? Thanks for your help.

webpack.config.js:

    ...
    module: {
        loaders: [
          {
            test: /\.(js|jsx)$/,
            include: [
              path.resolve(__dirname, "public/app")
            ],
            exclude: /node_modules/,
            loaders: [
              'react-hot',
              'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
            ],
            loader: 'babel',
            query: {
              "plugins": ['transform-decorators-legacy']
            }
          }, 
          {
            test: /\.json?$/,
            loader: 'json'
          }, 
          {
            test: /\.css$/,
            loaders: ['style', 'css']
          },
          {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
          }
        ]
      }
      ...

.babelrc:

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "transform-class-properties"
  ]
}

package.json:

...
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-survivejs-kanban": "^0.3.3",
"babel-relay-plugin-loader": "^0.9.0",
...
"css-loader": "^0.23.1",
...
"style-loader": "^0.13.1",
...

I can give any additional details if they are needed. If seeing the codebase a whole would help, you can see that here: https://github.com/DanDeller/sputnik

are you just running mocha tests with `npm test` like in your current package,json? — azium, Sep 12 '16 at 19:07
Hi @azium. I'm currently running my tests with `mocha test`. I get the same error with `npm test` also. — justDan, Sep 12 '16 at 19:10

score 1 · Accepted Answer · answered Sep 12 '16 at 19:35

1

Mocha's not looking at your webpack.config, it's a separate system. To tell mocha to load your tests through babel you need flag it.

mocha test --require babel-core/register

answered Sep 12 '16 at 19:35

azium

20,056
7
57
79

Thanks for the that! Would this replace what I currently have for `test` in my package.json file? I tried to run `mocha test --require babel-core/register` in terminal and it threw that same error. – justDan Sep 12 '16 at 19:47
try replacing your `scripts: test` with that line in your package.json and run `npm test` see if you get the same thing. The way you're doing it , mocha might be looking for globally installed babel packages – azium Sep 12 '16 at 19:51
Ok swapped out that part and I still get that error. I'll look into the globally installed things you mentioned also. – justDan Sep 12 '16 at 19:53
1

You might be getting a conflict with your `test.babel.js`. Maybe you should just remove that? You're not including the presets you need in that file like you have in your .babelrc – azium Sep 12 '16 at 20:13
1

Ah the `test.babel.js` was it! Instead of `require('babel-core/register')({ presets: ['es2015'], });` I changed it to `require('babel-core/register')({ presets: ["react", "es2015", "stage-0"] });` and it worked great. Thanks for the tips! – justDan Sep 12 '16 at 20:18

Webpack, React & Mocha test: Missing class properties transform

1 Answers1