My goal is to test reactjs code written with jsx with mocha as test runner, enzyme and chai. Currently I'm getting an unexpectet token error.
I already try the solution inside mocha-will-not-recognise-jsx but it didn't solves my error.
Package.json
{
"scripts": {
"test": "mocha --recursive application/**/*.spec.js* --compilers js:babel-register",
},
[
...
],
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"enzyme": "^2.9.1",
"html-webpack-plugin": "^2.30.1",
"mocha": "^3.5.0",
"standard": "^10.0.3",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
Webpack modules
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'env']
}
}]
}
Error Message
D:\Development\game-of-life\node_modules\babel-core\lib\transformation\file\index.js:59
0
throw err;
^
SyntaxError: D:/Development/game-of-life/application/src/components/app/App.spec.jsx: U
nexpected token (8:28)
6 | describe('App', () => {
7 | it('renders "<div>Application is running</div>"', () => {
> 8 | const wrapper = shallow(<App />)
| ^
9 | expect(wrapper.contains(<div>Application is running</div>)).to.be.eql(true)
10 | })
11 | })
Did I forgot to install a package or does a newer version of a package works different to an older version of the package because I already realized with equal dependencies a react-enzyme project.
I found two posible ways to solve the problem
.babelrc
Adding a .babelrc with the configureation presets: ['react', 'env'].
webpack
Adding a configuration (babelrc: false) to avoid .babelrc and to use the webpack configuration
Related
I believe I am suffering from the velocity of changes within the Babel/React/Javascript world, as I try to connect the dots as to why this is not working.
I am trying to render a React component, but I can't seem to get the appropriate babel loader to do what it's supposed to do. First, the error:
SyntaxError: /Users/...../assets/js/index.js: Unexpected token (11:6)
9 | render() {
10 | return {
> 11 | <ReactAutocomplete
| ^
12 | items={[
13 | { id: 'foo', value: 'bar' },
14 | ]}
Here's my webpack config
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: __dirname,
entry: './app/assets/js/index',
output: {
path: path.resolve('./app/assets/webpack_bundles/'),
filename: "[name]-[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"]
}
}
}
]
},
plugins: [
new BundleTracker({filename: 'webpack-stats.json'})
]
}
And the relevant libraries I've installed from package.json
"react": "^16.9.0",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.9.0"
"#babel/core": "^7.6.0",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-react": "^7.14.3",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.8.0"
I have no .babelrc file currently, but I did at one point.
Thank you!
In render return you're passing the JSX in the object while it needs to be jsx in parenthesis
render(){
return (
<ReactAutocomplete />
)
}
I think I correctly configured babel-plugin-syntax-dynamic-import but it would still not transpile my dynamic import.
Node: v8.11.3
package.json:
...
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
...
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --open --hot --progress",
...
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-polyfill": "^6.26.0",
...
"react-loadable": "^5.5.0",
"whatwg-fetch": "^2.0.4"
}
webpack.config.js:
...
{
test: [/\.js$/, /\.jsx?$/],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
...
.babelrc
{
"presets": ["env", "react", "stage-3"],
"plugins": ["syntax-dynamic-import"]
}
AsyncComp.jsx:
import React from 'react';
import Loadable from 'react-loadable';
const Loading = () => (<div>Loading...</div>);
const LoadableComponent = Loadable({
loader: () => import('./CompRaw'),
loading: Loading,
})
export default class AsyncComp extends React.Component {
render() {
return <LoadableComponent />;
}
}
executing yarn dev results in:
/home/somepath/src/components/AsycnComp.jsx
7:17 error Parsing error: Unexpected token import
Why is the dynamic import() not transpiled? How can I fix it?
Ah okay! I think you also need react-loadable/babel. See the discussion here: https://github.com/jamiebuilds/react-loadable/pull/35#issuecomment-337156641
The configuration is good and the error originates from using the eslint-loader but not installing babel-eslint plugin which would enable support for dynamic imports.
This solved the issue
yarn add babel-eslint -D
.eslintrc
{
...
"parser": "babel-eslint"
}
Since im building my webapp with React, when i try to set something into an undefined object property, the code processing crashes (reproducible with breakpoint debugging) and no errors are shown in the console log. Also the chrome react extension does not give me any errors.
So to finding a bug is more time consuming that it should be.
let changedJsonResponse = jsonResponse;
changedJsonResponse.data = newTableData; // changedJsonResponse.data is undefined
// throws no error & code proccess crashes
webpack.config.js
const webpack = require('webpack');
const path = require('path');
let config = {
devtool: 'eval-source-map',
entry: {
FooManagement: ['babel-polyfill', './domains/FooManagement/entry.jsx'],
},
output: {
path: path.resolve(__dirname, '../web/react/'),
filename: '[name].js'
},
externals: {
'jquery': 'window.jQuery',
'bootbox': 'window.bootbox',
},
resolve: {
alias: {
alias_shared: path.resolve(__dirname, 'shared'),
},
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loader: 'babel-loader',
options: {presets: ['es2015', 'react']}
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
}
]
}
};
module.exports = config;
package.json
{
"author": "myself",
"version": "0.0.1",
"description": "",
"main": "index.jsx",
"scripts": {
"watch": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"axios": "^0.16.2",
"dateformat": "^3.0.2",
"is-uuid": "^1.0.2",
"lodash": "^4.17.4",
"react": "^16.0.0",
"react-cropper": "^1.0.1",
"react-dom": "^16.0.0",
"react-dropzone": "^4.2.3",
"react-router-dom": "^4.2.2",
"react-switchery-component": "0.0.7",
"uuid": "^3.1.0"
}
}
Chrome version: 62.0.3202.94
I was able to catch those errors in Axios .catch.
After a while i found the cause of the problem.
I'm getting this error when using webpack:
ERROR in ./src/pages/clients/components/ClientProfile.js
Module build failed: SyntaxError: Unexpected token (18:17)
16 | }
17 |
> 18 | handleSubmit = (person) => {
| ^
19 | console.log(person);
20 | };
21 |
I have following .babelrc config
{
"presets" : ["es2015", "stage-3", "react"]
}
And here's my devDependencies from package.json
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"react-scripts": "0.9.5",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "webpack-dev-server --info",
"build": "webpack",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
And webpack.config.js as well
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
//include: /flexboxgrid/
}
]
}
I can't figure out why it's failing on this syntax
handleSubmit = (person) => {
console.log(person);
};
Does somebody have ideas?
Thanks.
I made following changes in your code and it works fine.
{
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015-native-modules": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0", //instead of preset-stage-3
}
and
{
"presets": [
"es2015",
"react",
"stage-0" //instead of "stage-3"
]
}
I'll read documentation and come up with the reason until someone else explains it. :)
The proposal to add class fields to the language is currently at Stage 2 of the standardization process.
The Babel 'stage' presets work like so:
babel-preset-stage-0 only contains what's needed to support Stage 0 features.
babel-preset-stage-1 contains what's needed to support Stage 0 and 1 features.
And so on, up to babel-preset-stage-4.
Therefore, since you only have babel-preset-stage-3, you can't use class fields. To get this to work, you should uninstall that package, install babel-preset-stage-2, and then update your configuration files accordingly.
For more details on what exactly the different stages of the TC39 standardization process entail, take a look at the GitHub, and the process document.
This question already has answers here:
How to use arrow functions (public class fields) as class methods?
(4 answers)
Closed 6 years ago.
Desperately hoping i'll be able to find someone who can tell why i can't get arrow functions to work with my Webpack / Babel setup, been trying a bunch of stuff and nothing has worked so far. Current state of the project:
Package.json:
{
"name": "..",
"version": "1.0.0",
"description": "..",
"main": "app.jsx",
"author": "..",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-plugin-transform-react-jsx": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"css-loader": "^0.26.1",
"node-sass": "^4.5.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"dependencies": {
"lodash": "^4.17.4",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2"
}
}
webpack.config.js:
var path = require('path');
module.exports = {
entry: './src/router.jsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
watch: true,
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
]
}
};
.babelrc
{
"plugins": [
"transform-react-jsx",
"transform-class-properties"
],
"presets": [
"es2015",
"react",
"stage-2"
],
}
Component:
import React from 'react'
import './styles.scss'
class Button extends React.Component {
asdf = () => {
return ['btn', this.props.size].join(' ')
}
render() {
return (
<button className={this.asdf}>
{this.props.children}
</button>
)
}
}
export default Button
Error:
ERROR in ./src/app/ui-kit/button.jsx
Module build failed: SyntaxError: Missing class properties transform.
4 |
5 | class Button extends React.Component {
> 6 | asdf = () => {
| ^
7 | return ['btn', this.props.size].join(' ')
8 | }
9 |
# ./src/app/components/signup.jsx 13:14-45
# ./src/app/app.jsx
# ./src/router.jsx
Checkout my babel packages and .babelrc is working in my current project and compare with yours:
.babelrc:
{
"presets": ["react", "es2015" , "stage-0"],
"plugins": [
["transform-decorators-legacy"]
]
}
packages.json
"babel-core": "^6.4.5",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.3.13",