Plugin 0 specified in 'foreign' provided an invalid property of '_c' - reactjs

Getting above error with below configuration, how should I make it working?
.babelrc:
{
"passPerPreset": true,
"presets": [
{"plugins": ["./build/babelRelayPlugin"]},
"react",
"es2015",
"stage-0"
]
}
package.json:
{
"name": "1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-relay-plugin": "^0.9.2",
"express": "^4.14.0",
"express-graphql": "^0.5.3",
"graphql": "^0.6.2",
"graphql-relay": "^0.4.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-relay": "^0.9.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
},
"devDependencies": {
"babel-cli": "^6.14.0"
}
}
server.js:
//
//
//
const compiler = webpack({
entry: path.resolve(__dirname, 'js', 'app.js'),
module: {
loaders: [
{
test: /\.js$/,
include: [ path.resolve(__dirname, "js") ],
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
},
}
],
},
output: {filename: '/app.js', path: '/', publicPath: '/js/'}
});
const appServer = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': 'http://localhost:8000'},
publicPath: '/js/',
stats: {colors: true}
});
//
//
//
Terminal Error: babel-node server.js
ERROR in ./js/app.js
Module build failed: Error: Plugin 0 specified in 'foreign' provided an invalid property of '_c'
Browser Error: localhost: 3000
in the console window:
Uncaught Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as Relay.QL.

I have had success using the following setup. I am using the plugin with the babel loader in my webpack module rather than in .babelrc
In webpack:
query: {
presets: [
"es2015", "react", "stage-0", {
"plugins": [
"./schema-build/babelRelayPlugin"
]
}
]
}
In .babelrc:
{
"passPerPreset": true,
"presets": [
"react",
"es2015",
"stage-0"
]
}

Related

Babel configuration file issue

I have an issue with babel and Webpack. I shared configurations. I am getting below error while i am running webpack build command. However i already added #babel/preset-react in .babelrc (also tried babel.config.json) files. I need some suggestion for solve this error.
{
"name": "#mahiraltinkaya/react-image-upload",
"version": "1.2.1",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+ssh://git#github.com/mahiraltinkaya/react-file-upload.git"
},
"keywords": [
"react",
"next",
"react-image",
"image-drag-n-drop"
],
"author": "Mahir Altinkaya",
"license": "ISC",
"bugs": {
"url": "https://github.com/mahiraltinkaya/react-file-upload/issues"
},
"homepage": "https://github.com/mahiraltinkaya/react-file-upload#readme",
"devDependencies": {
"#babel/cli": "^7.20.7",
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"prop-types": "^15.8.1",
"react": "^16.14.0"
}
}
babel.config.json
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
webpack.config.json
var path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve("dist"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.css$/,
loader: "css-loader",
},
],
},
externals: {
react: "react",
},
};
For some reason, your file babel.config.json is not parsed. webpack is not reading it. convert it to
.babelrc
or convert it to babel.config.js and have this
module.exports={"presets": ["#babel/preset-env", "#babel/preset-react"]}

Errors when updated babel and webpack version in react project

I am working on a project who was using babel version 5, webpack version 1, and ava version 0.14.0.
After I did some updates when i run npm run build-example i get:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Multiple configuration files found. Please remove one:
package.json
pathto\react-stars.babelrc
Here's my old package.json
After updates, now I'm using babel version 7.10, webpack version 4.43, and ava version 3.10.1. Here's the updated package.json
{
"name": "react-rating-stars-component",
"version": "2.2.0",
"description": "Simple star rating component for your React projects.",
"main": "dist/react-stars.js",
"repository": "https://github.com/ertanhasani/react-stars",
"babel": {
"presets": [
"react",
"es2015"
]
},
"ava": {
"babel": {
"presets": [
"es2015",
"react"
]
},
"require": [
"babel-register"
]
},
"scripts": {
"build": "babel src --out-dir dist",
"dev": "babel src --out-dir dist --watch",
"build-example": "webpack -p --config webpack.production.config.js",
"dev-example": "webpack-dev-server . --hot --inline"
},
"keywords": [
"star",
"rating",
"react",
"stars",
"rating",
"component",
"raty",
"rate",
"reactjs",
"ratings"
],
"author": "Ertan Hasani",
"license": "ISC",
"devDependencies": {
"ava": "^3.10.1",
"#babel/cli": "^7.10.4",
"babel-loader": "^8.1.0",
"#babel/core": "^7.10.4",
"#babel/plugin-transform-object-assign": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.13.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {}
}
Here's my old webpack.production.config.js
Here's the updated webpack.production.config.js:
'use strict';
var webpack = require('webpack')
module.exports = {
entry: ['./example/index.js'],
output: {
filename: './example/bundle.js',
pathinfo: true
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['#babel/react', '#babel/preset-env']
}
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
optimization: {
minimize: false
}
};
Here's my old webpack.config.js
my updated webpack.config.js:
'use strict';
module.exports = {
entry: ['./example/index.js'],
debug: true,
devtool: 'inline-source-map',
output: {
filename: './example/bundle.js',
pathinfo: true
},
module: {
loaders: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['#babel/react', '#babel/preset-env']
}
}]
}
};
I also updated `.babelrc. file:
Here's my old .babelrc file!
my updated .babelrc file:
{
"presets": ["#babel/preset-env", "#babel/react"],
"plugins": [
"#babel/plugin-transform-object-assign"
]
}
It seems like you have multiple configurations as mentioned in the error message, I'd suggest removing the following configuration lines from your package.json file and operate your babel configurations exclusively from the .babelrc file in your project root
"babel": {
"presets": [
"react",
"es2015"
]
}

ERROR from UglifyJs Unexpected token keyword, expected punc

I'm getting the following error when trying to run npm install on my project: ERROR in bundle.js from UglifyJs
Unexpected token keyword «function», expected punc «,»
I'm aware it's because I'm trying to use an ES6 feature, but I think something is wrong with my setup which is why it isn't getting compiled to ES5 by Babel.
I've looked at a number of problems on SO regarding the issue, and I've incorporated some of those answers, but none has solved the problem.
Here is my package.json:
{
"name": "my-project",
"version": "0.0.1",
"engines": {
"node": "8.9.1"
},
"private": true,
"scripts": {
"dev": "webpack --progress --colors --watch",
"postinstall": "NODE_ENV=prod webpack -p"
},
"dependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.1.18",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"body-parser": "^1.18.2",
"express": "^4.16.2",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-player": "^1.1.2",
"react-render": "^1.2.1",
"webpack": "^3.11.0",
"yargs": "^11.0.0"
},
"babel": {
"plugins": [
"transform-react-jsx"
],
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"uglifyjs-webpack-plugin": "^1.2.0"
}
}
and my webpack.config.babel.js
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
context: __dirname + "/static",
entry: {
client: ['./App.js']
},
output: {
filename: 'bundle.js',
path: __dirname + "/static/build"
},
resolve: {
extensions: ['*', '.js']
},
plugins: [
new UglifyJSPlugin({
include: /\.min\.js$/
})
],
module: {
loaders: [
{
test: /(\.js$)/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'react',
['es2015', {'modules': false}]
]
}
}
]
}
};

Webpack error when running "webpack" command

I am getting the following error:
[HMR] Waiting for update signal from WDS...
when I run "webpack" in the terminal
my webpack config js file is as follow:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
and my package.json as follow:
{
"name": "hwr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^3.0.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-router": "^2.6.1"
}
}
Where does that error comes from?
It's not an error, you enabled the Hot Module Replacement (hence the [HMR]) feature in your Webpack build. That's just one of the log messages that come from the HMR feature. Sounds like you don't want to turn HMR on? In that case, you should remove 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server' entries from your entry points, the react-hot loader and in your loaders entry, the new webpack.HotModuleReplacementPlugin() from plugins and hot: true from your dev server settings.

REact.js, react-toolbox syntax error?

Why am I getting this syntax error??? Driving me nuts, I know its some simple...I basically copied the example code from here:
http://react-toolbox.com/#/components/input
And I am simply trying to import it into here:
Any suggestions are hugely appreciated...
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: __dirname,
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./app/index.jsx'
],
output: {
path: path.join(__dirname, 'build'),
filename: 'react-toolbox.js',
publicPath: '/'
},
resolve: {
extensions: ['', '.jsx', '.scss', '.js', '.json'],
modulesDirectories: [
'node_modules',
path.resolve(__dirname, './node_modules')
]
},
module: {
loaders: [
{
test: /(\.js|\.jsx)$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets:['es2015','react']
}
}, {
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
}
]
},
toolbox: {
theme: path.join(__dirname, 'app/toolbox-theme.scss')
},
postcss: [autoprefixer],
plugins: [
new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
package.json:
{
"name": "react-toolbox-example",
"version": "0.11.4",
"description": "A set of complementary tools to ReactJS.",
"author": "React Toolbox Team (http://github.com/react-toolbox)",
"contributors": [
{
"name": "Javi Jimenez Villar",
"url": "http://soyjavi.com/",
"email": "javi.jimenez.villar#gmail.com"
},
{
"name": "Javi Velasco Arjona",
"url": "http://javivelasco.com/",
"email": "javier.velasco86#gmail.com"
}
],
"bugs": {
"url": "https://github.com/react-toolbox/react-toolbox/issues",
"email": "issues#react-toolbox.com"
},
"keywords": [
"react",
"react-component",
"material design",
"toolbox",
"components"
],
"license": "MIT",
"devDependencies": {
"autoprefixer": "6.3.6",
"babel-core": "6.7.7",
"babel-eslint": "6.0.3",
"babel-loader": "^6.0.1",
"babel-plugin-react-transform": "2.0.2",
"babel-preset-es2015": "^6.1.4",
"babel-preset-react": "^6.1.4",
"classnames": "^2.2.1",
"cross-env": "^1.0.1",
"css-loader": "0.23.1",
"express": "^4.13.3",
"extract-text-webpack-plugin": "1.0.1",
"node-sass": "3.4.2",
"normalize.css": "^4.0.0",
"postcss-loader": "0.8.2",
"react": "^15.0.0",
"react-addons-css-transition-group": "^15.0.0",
"react-dom": "^15.0.0",
"react-toolbox": "^0.16.2",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "1.2.3",
"sass-loader": "3.2.0",
"style-loader": "0.13.1",
"toolbox-loader": "0.0.3",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"scripts": {
"start": "node ./server",
"build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config",
"deploy": "gh-pages -d build"
},
"repository": "github:react-toolbox/react-toolbox-example"
}
.babelrc
{
"presets": ["es2015", "stage-0", "react"]
}
https://github.com/malexanders/react-toolbox-example
Your code is crashing on the class property syntax which is currently a stage 1 Ecmascript proposal. In order for babel to transpile this correctly you need the stage-1 preset. I would say it's pretty common to have the stage-0 preset which includes everything above it as well.
You can even see from your repo's .babelrc file already wanting to include stage-0 preset:
{
"plugins": ["es2015", "stage-0"]
}
However it looks like you're overriding this file in your webpack config using the query key here:
query: {
presets:['es2015', 'react']
}
So what you need to do to fix this is
1) Install stage-0 preset
npm install --save-dev babel-preset-stage-0
2) Add the preset to your webpack.config.js query: presets array
query: {
presets: ['es2015', 'react', 'stage-0']
}
The equals should be a colon. Additionally, there needs to be a comma after the last curly brace.

Resources