There are a seemingly endless number of questions here and on github asking this question and none of the solutions work for me. I'm simply trying to update an old project and I'm consistently getting this error:
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/user/Documents/project/src/index.js: Unexpected token (5:16)
The unexpected token is "<" ReactDOM.render("<"App />, ...);
package.json:
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/preset-env": "^7.10.3",
"#babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
...
}
webpack config: (webpack 4.43.0)
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
...
],
}
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
For context, the old babel packages work just fine.
Are there any other solutions to this issue?
Looks pretty standard. Had an issue after upgrading from v6 t v7 of babel , had to switch from .babelrc to config file which cleared the cached files. For quick trial you can add this in webpack and try
loader: 'babel-loader',
options: {
presets:["#babel/preset-env","#babel/preset-react" ]
},
Related
I'm pretty new to using React with webpack; is this a reasonable config file? What would you add or subtract?
const path = require('path');
const webpackConfig = {
entry: path.resolve(__dirname, 'ENTRY'),
output: {
path: path.resolve(__dirname, 'STATIC'),
filename: 'bundle.js',
},
module: {
loaders: [],
},
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'inline-source-map',
};
webpackConfig.module.loaders.push({
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { presets: ['es2015', 'react']},
});
webpackConfig.module.loaders.push({
test: /\.(scss|css)$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
});
module.exports = webpackConfig;
Also, I'm not entirely sure what dependencies are needed to make this work. There are a few different babel dependencies that have been preloaded into my project folder, but I only see a couple being referenced here (namely, the babel-loader and es2015/react presets).
In my package.json I have
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.6.0"
},
What you use in your webpack and package.json files is dependent on the needs of your app. For example, if your app handles a lot of images you might want to consider adding a loader that could handle images, such as url-loader. If you want it to handle more dynamic css classes, you might want to add the classNames npm module. So what you have right now works... but it's hard to say what to add without knowing what you're building.
In my personal opinion, I suggest you use create-react-app since you are still new. This way you don't have to deal with configuring your webpack and can focus on the fundamentals of react.
This question already has answers here:
Babel file is copied without being transformed
(10 answers)
Closed 6 years ago.
I'm a beginner in React + Webpack.
I found a weird error in my hello world web app.
I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax.
Here are my dependencies:
"devDependencies": {
"babel-core": "^6.0.14",
"babel-loader": "^6.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"react": "^0.14.1"
}
Here is my webpack.config.js
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
};
Here is my app/main.js
var React = require("react");
React.render(<h1>hello world</h1>,document.getElementById("app"));
And this is the error message
ERROR in ./app/main.js
Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
1 | var React = require("react");
> 2 | React.render(<h1>hello world</h1>,document.getElementById("app"));
| ^
at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)
Thanks for you guys.
Add "babel-preset-react"
npm install babel-preset-react
and add "presets" option to babel-loader in your webpack.config.js
(or you can add it to your .babelrc or package.js: http://babeljs.io/docs/usage/babelrc/)
Here is an example webpack.config.js:
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel",
query:
{
presets:['react']
}
}
Recently Babel 6 was released and there was a major change:
https://babeljs.io/blog/2015/10/29/6.0.0
If you are using react 0.14, you should use ReactDOM.render() (from require('react-dom')) instead of React.render(): https://facebook.github.io/react/blog/#changelog
UPDATE 2018
Rule.query has already been deprecated in favour of Rule.options. Usage in webpack 4 is as follows:
npm install babel-loader babel-preset-react
Then in your webpack configuration (as an entry in the module.rules array in the module.exports object)
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react']
}
}
],
}
I ran into a similar issue when migrating from babel 5 to babel 6.
I was just running babel to compile the src to lib folder babel src --out-dir lib
I will share my setup for babel 6:
Ensure you have the following babel 6 devDependencies installed
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
Add your .babelrc file to the project:
{
"presets": ["es2015", "stage-0", "react"]
}
Since the answer above still leaves some people in the dark, here's what a complete webpack.config.js might look like:
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
query:
{
presets:['es2015', 'react']
}
}]
},
};
module.exports = config;
For me the solution was to create the file .babelrc with this content:
{
"presets": ["react", "es2015", "stage-1"]
}
The following way has helped me (includes react-hot, babel loaders and es2015, react presets):
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']
}
]
For those who still might be facing issue adding jsx to test fixed it for me
test: /\.jsx?$/,
This works perfect for me
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015','react']
}
},
You can find a really good boilerplate made by Henrik Joreteg (ampersandjs) here: https://github.com/HenrikJoreteg/hjs-webpack
Then in your webpack.config.js
var getConfig = require('hjs-webpack')
module.exports = getConfig({
in: 'src/index.js',
out: 'public',
clearBeforeBuild: true,
https: process.argv.indexOf('--https') !== -1
})
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
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'],
}
}
],
I tried all options listed here and other sites but none seem to work.
I was able to install webpack reactjsand other components correctly for my 1st test application (MyApp).
For my next application project, I wanted to leverage all npm-modules from 1st app so that I don't have to download all modules again and keep them centrally.
However, I keep getting above error about missing "es2015". webpack under my 1st app project does not report this problem. The strange thing is even if I change preset from es2015 to say XXes2015, I still get the same message.
My webpack.config.js:
var path = require('path');
var isDev=true;
const cssModulesNames = `${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]`;
var config = {
entry: path.resolve(__dirname, 'js\\main.js'),
output: {
path: path.resolve(__dirname, '.'),
filename: '.\\bundle.js'
},
resolveLoader: {
modulesDirectories: [ '../../../../Documents/API/react/examples/MyApp/node_modules' ]
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
query:
{
presets: [ 'es2015', 'react',"stage-0"]
}
}]
}
};
module.exports = config;
My package.jason:
{
"name": "App1",
"version": "1.13.1",
"description": "",
"main": ".",
"dependencies": {
"babel-core": "latest",
"babel-loader": "latest",
"babel-preset-es2015": "latest",
"babel-preset-react": "latest",
"babel-preset-stage-0": "latest"
},
"devDependencies": {},
"scripts": {
"test": "jest --verbose"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/fbjs"
]
},
"author": "XX",
"license": "ISC"
}
My .bablrc :
{ "presets": ["es2015", "stage-0", "react"] }
If I change entry es2015 to say esXX2015 in webpack.config.js or .babelrc, it gives same error. I expected it to look for different preset.
Hope someone can throw more light on this and help me out !
Thanks.
make sure your filename is: .babelrc instead of .bablrc
you can try to add babel-loaderon your webpack.config
change loader: 'babel' to loader: 'babel-loader'
Looks like you expect the resolveLoader.modulesDirectories config parameter to tell babel where to find presets. This parameter is used by webpack to find loaders (such as babel-loader), but not by babel.
There is a typo in your question. It should be .babelrc not .bablrc
The content of `.babelrc' should like below. The order is important.
stage-0 → ES2015 → JSX → ES5
{
"presets": [
"stage-0",
"es2015",
"react"
]
}
I suggest you to have presets either in .babelrc file or in webpack.config file to maintain single source of truth. So remove the query entry in your webpack.config and add a exclude entry to ignore js/jsx files from inside the node-modeuls folder (update it as below...)
loaders: [{
test: /\.jsx?$/,
exclude: /node-modules/,
loader: 'babel'
}]
I finally managed to solve the issue by creating node-modules symbolic link to previous projects node_module directory. While this achieved what I wanted, I am bit not happy that various settings in webpack.config.js that I tried could not achieve this. Hope someone comes with right settings, so that webpack behavior is much more clearer ( to me at least). Hope this helps someone else trying to solve similar problem...