Daniel D Daniel D - 2 months ago 31
React JSX Question

Webpack, React & Mocha test: Missing class properties transform

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

Thanks again guys for any help =)

Answer

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