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
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
Related
I'm trying to implement SSR using React (create-react-app) and Firebase. To do so, I'm currently working on my webpack configuration following this tutorial and github dir:
module.exports = [{
entry: './src/index.js',
module: {
rules: [
{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.(png|jpe?g|gif|svg|otf)$/i, loader: 'file-loader', exclude: /node_modules/},
]
},
output: {
filename: 'public/bundle.js',
path: __dirname
}
}];
Somehow for react states, webpack returns the following error:
SyntaxError: /Users/timfuhrmann/Documents/Entwicklung/React/auriga/src/shared/ImageHolder.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:11):
5 | class LazyImage extends Component {
6 |
> 7 | state = {
| ^
8 | src: null,
9 | transition: false
10 | };
Browsing the web I found that I need to install plugin-proposal-class-properties - but how do I configure this inside of webpack?
Babel:
"devDependencies": {
"#babel/cli": "^7.7.7",
"#babel/core": "^7.7.7",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/preset-env": "^7.7.7",
"#babel/preset-react": "^7.7.4",
"css-loader": "^3.4.0",
"express": "^4.17.1",
"file-loader": "^5.0.2",
"firebase-admin": "^8.9.0",
"firebase-functions": "^3.3.0",
"firebase-tools": "^7.11.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
.babelrc:
{
"presets":[
"#babel/preset-env", "#babel/preset-react"
]
}
You just need to put it in your Babel plugins:
.babelrc:
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
Source: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
I keep getting this error, I tried several solutions using the search on this website and github but I cannot figure out what is wrong with it.
Here is what I have in my package.json
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
Here is my webpack config
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
I created a .babelrc with this
{
"presets": ["env", "react", "es2015"]
}
Then I run
webpack-dev-server --mode development --hot
But if fails on this
ReactDOM.render(<App />, document.getElementById('app'));
This is the error I get in the console
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from './components/App';
|
> ReactDOM.render(<App />, document.getElementById('app'));
# multi (webpack)-dev-server/client?http://localhost:8080
(webpack)/hot/dev-server.js ./src main[2]
I spent 3 hours on google, stackoverflow and github but I cannot figure out what is wrong with this. Any help is highly appreciated.
Thanks!
Just throwing it there but you have
module.export
while it should be
module.exports
The issue is your config handles only files with .jsx but you also have .js file so, Change regex in webpack config and recompile your app
const path = require("path");
module.export = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
publicPath: "/
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
resolve: {
modules : [
path.resolve("./src"),
path.resolve("./node_modules")
],
extensions: ['*', '.js', '.jsx']
}
}
replace your exiting modules with these dependencies
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
I've started some project in React, using this template:
CoreUI React
It doesn't ship with the properties transform plugin, so i installed it. My babelrc file looks like this:
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
My dev dependencies:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1"
}
I didn't change anything in the webpack config file(should i?)
Part of my webpack config file:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {alias: {'../img': '../public/img'}}
},
{
loader: 'sass-loader'
}
]
}))
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]'
}
}]
},
Once i try to compile, using the dev server, i get the nasty error, referring to a property defined in one of my class-based components.
I know this issue was raised here before, but non of the posts seemed to be revolving around a similar setup to mine, so i didn't find the solution there.
Idea, anybody?
You have to remove the options.presets key from the babel-loader config, because otherwise, Babel picks up these presets and ignores your .babelrc file.
Alternatively, you could provide the entire configuration in webpack.config:
options: {
cacheDirectory: true,
presets: ["react", "env"],
plugins: [
"transform-class-properties",
"transform-object-rest-spread"
]
}
I am trying to compile js file with react using webpack with babel, but I am getting the following error message:
ERROR in ./js/IntroAndWorkSpace.js
Module parse failed: C:\FULLTIME\STUDY METERIAL\ReactJS\NewReactPoject\js\IntroAndWorkSpace.js Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:8)
here is my js file
import* React from 'react'
import* ReactDOM from 'react-dom',
ReactDOM.render(<h1>headingthe of page</h1>,
document.getElementById('head')
);
here is pakeje.json
{
"name": "newreactproject",
"version": "1.0.0",
"description": "myreactproject for learning react",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "priya",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"webpack": "^1.13.2"
}
}
here is config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/scripts.js",
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
],
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
It looks like you have everything set up correctly. I believe the problem is that your webpack configuration file is configured to load files with the extension .jsx with the babel loader using the react and ES2015 presets, but the file you're attempting to load (IntroAndWorkSpace.js) doesn't end with the .jsx extension.
Since it's probably a good idea to be consistent with your file extensions, you have two options for fixing this:
1) Change the extension of the file you're trying to load to .js instead of .jsx.
2) Change the loader test to load files with the extension .js instead of .jsx:
loaders: [
{
test: /\.js?$/,
...
}
]
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
],
It's my first time with Webpack and I don't undersand why my sass file (.scss) is not loaded. I spend all the afternoon trying and searching, but I don't understand what is wrong in my code.
webpack.config.js
module.exports = {
entry: "./main.js",
output: {path: __dirname, filename: "bundle.js"},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "react"]
}
},
{
test: /\.css$/,
loader: "css-loader!autoprefixer-loader"
},
{
test: /\.scss$/,
loader: "css-loader!sass-loader"
}
]
}
};
package.json dependencies:
//...
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"node-sass": "^3.4.2",
"redux-devtools": "^3.1.1",
"sass-loader": "^3.1.2",
"webpack": "^1.12.14"
}
//...
And in my app.js I added this line:
import "./app/sass/app.scss";
There aren't errors in the terminal and neither in the Chrome console. But the SASS file is not loading.
What is wrong in my code?
Thanks!
You have to install style-loader, css-loader and sass-loader as well.
To do so, run:
npm i css-loader style-loader sass-loader --save-dev
Then, add loaders to your webpack configuration.
// ...
{
test: /\.scss$/,
loader: 'style!css!sass'
}]
// ...
You were on good path, though