Related
I'm launching a react app, and here's my Webpack configuration:
'use strict'
const ExtractPlugin = require('extract-text-webpack-plugin')
const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'eval',
entry: `${__dirname}/src/main.js`,
output: {
filename: 'bundle-[hash].js',
path: `${__dirname}/build`,
publicPath: '/',
},
mode: 'development',
performance: {
hints: false
},
plugins: [
new HTMLPlugin(),
new ExtractPlugin('bundle-[hash].css'),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_module/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
loader: ExtractPlugin.extract(['css-loader', 'sass-loader']),
},
],
},
}
Then, I have a package.json file, here are the dependencies:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"and": "0.0.3",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.4",
"eslint": "^5.9.0",
"install": "^0.12.2",
"jest": "^23.6.0",
"npm": "^6.4.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.25.1",
"webpack-dev-server": "^3.1.10"
}
I have tried plenty of ways of updating babel packages up to 7th version, changing babelrc config, what ever.
The project though compiles, but in the beginning of compilation I get the following message:
Trace: The node type SpreadProperty has been renamed to SpreadElement
at Object.isSpreadProperty
And about of hundred rows like that. After all that rows being printed out, the compilation process proceeds and is completed successfully.
What's that and how can I get rid of this rows?
here is the final setting that solved problem for me.
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
}
For a better understanding, here is my package.json's devDependencies:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-object-assign": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "8.0.4",
"prop-types": "15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"style-loader": "^0.23.1",
"utils": "^0.3.1",
"webpack": "4.26.1",
"webpack-cli": "3.1.2",
"webpack-dev-server": "^3.1.10"
}
Here is my webpack.config.js module's section:
module: {
rules: [
{
test: /\.(js|jsx)$/ ,
exclude: /node_modules/,
loaders: "babel-loader"
}
]
}
This issue is occurring due to using outdated
`"babel-plugin-transform-object-rest-spread"`
update this in package.json
`"#babel/plugin-proposal-object-rest-spread": "^7.0.0",`
and update your .babelrc.js file
in my case it looks like this
const isTest = String(process.env.NODE_ENV) === 'test'
module.exports = {
presets: [["#babel/env", { modules: isTest ? 'commonjs' : false }, "#babel/react"]],
plugins: [
'syntax-dynamic-import',
'transform-class-properties',
'#babel/plugin-proposal-object-rest-spread',
],
}
this solves my problem
Before in my .babelrc
i was using the plugin: ["transform-object-rest-spread", { "useBuiltIns": true }],
then i switch it to "#babel/plugin-proposal-object-rest-spread" and all those warnings went away, which has been very nice.
`
In my case, I was not implementing the Webpack configuration and still error was there. After so many solutions implementation, the error was same or once an error was removed another appeared. Finally, I deleted .bablerc, .babelrc and package-lock.json files and ran rm -rf node_modules && npm install and then ran react-native run-android and it worked for me. :-)
If nothing up here worked, Just remove plugins from old babel. In my case removing following spread plugin had disappeared the thing.
plugins: ["transform-object-rest-spread"]
I have my own react app and I tried adding proxy to the package.json, but it is not working.
On the other hand The simple create-react-app (as in the react basic example) works just fine but it does not have any webpack configured.
Here is my webpack:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('./dist'),
filename: 'index_bundle.js'
},
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?modules"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
resolve: {
extensions: ['.js', '.jsx' ,'.json'],
modules: [path.join(__dirname, 'src'), 'node_modules']
},
plugins: [HtmlWebpackPluginConfig]
}
My package.json:
{
"name": "A2ZPressMaterial",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --history-api-fallback",
"webpack-watch": "webpack -w",
"express-server": "node ./server",
"dev": "concurrently --kill-others \"npm run webpack-watch\" \"npm run express-server\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"proxy": "http://localhost:3001",
"dependencies": {
"classnames": "^2.2.5",
"css-loader": "^0.28.7",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"material-ui": "^0.19.2",
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-lazyload": "^2.2.7",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.8.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"concurrently": "^3.5.0"
}
}
I get 404 on my ajax/fetch calls.
My express sever is running on 3001.
The simple create-react-app is able to hit this server.
I run the react app as yarn start and express server as npm start
Looks like the issue here is that you're trying to use the proxy setting using your own webpack setup.
The proxy setting is a feature of create-react-app so if you're making your own setup you'll need to implement that manually.
Note that the documentation for the proxy setting is found in the create-react-app documentation, not the React documentation:
https://create-react-app.dev/docs/proxying-api-requests-in-development/
Late answer in case anyone finds this question in the future.
I use React+Webpack. I got the error, You may need an appropriate loader to handle this file type. After it, SyntaxError: Unexpected token at ../../acorn.js.
Why is it related to acorn.js? Also, I don't how to solve it. I think I already installed loaders that I needed. webpack.config.dev.js is working well, but when trying building webpack.config.prod.js I got this error.
Let me show my codes...
webpack.config.prod.js
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.gif$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.json?$/,
loader: 'json'
}
]
},
resolve: {
root: [
path.resolve('./src'),
path.resolve('./style')
],
extensions: ['', '.js', '.jsx', '.css']
},
plugins: [
new HtmlWebpackPlugin({
tempalte: './public/index.html'
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
],
package.json
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.2.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"lodash": "^4.17.4",
"path": "^0.12.7",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-bootstrap-table": "^3.1.7",
"react-dnd": "^2.2.3",
"react-dnd-html5-backend": "^2.2.3",
"react-dom": "^15.4.2",
"react-js-pagination": "^2.0.2",
"react-modal": "^1.7.3",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-slick": "0.14.5",
"react-toastr": "^2.8.2",
"redux": "^3.6.0",
"redux-form": "^6.5.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.6.0"
}
Your module loader only transpile the .jsx files, change the test expression to transpile the .js files as well
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const src = require('../images/av.png');
require('../css/styles.css');
class APP extends React.Component{
render(){
//Render main component
return (
<div >
Hello!
<img src={src} />
</div>
);
}
}
ReactDOM.render(
//React routing
(<APP />),
document.getElementById('app'));
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: {
javascript: './static/jsx/main.jsx'
},
output: {
path: path.resolve('./static/js/app/'),
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'source-map'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader?limit=25000',
}
]
},
};
package.json
{
"name": "",
"version": "0.0.1",
"description": "",
"license": "",
"repository": {
"type": "git"
},
"scripts": {
"gulp": "gulp",
"webpack": "webpack",
"start-webpack-server": "webpack-dev-server --hot --inline --colors --progress"
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.16.0",
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-3": "^6.11.0",
"babelify": "^7.3.0",
"css-loader": "^0.23.1",
"es6-promise": "^4.0.5",
"eslint": "^3.10.0",
"eslint-plugin-react": "^6.6.0",
"file-loader": "^0.8.5",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-html-replace": "^1.6.1",
"gulp-react": "^3.1.0",
"gulp-uglify": "^2.0.0",
"lodash": "^4.16.4",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.16.2",
"webpack-stream": "^3.2.0",
"source-map-loader": "^0.1.5"
}
}
As you can see I'm trying to load image and css files into my jsx . I had problems with images but now they get loaded fine. Anyway css files are interpreted as jsx by webpack although I set the css-loader for it. When I run transpiling for the project I get this error:
ERROR in ./static/css/styles.css
Module parse failed: D:\work\simpleLeafLet\static\css\styles.css Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:0)
The reason is a simple typo
...
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
...
It should be
...
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
...
I missed \ in "test: /\.jsx?$/"
I get the following error when running webpack:
Error in ./src/index.jsx
Module parse failed: .../src/index.jsx Unexpected token (10:18)
You may need an appropriate loader to handle this file type.
I believe I have all the correct loaders set up, please tell me if I missed something.
package.json:
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"koa": "^1.2.4",
"koa-ejs": "^3.0.0",
"koa-route": "^2.4.2",
"koa-router": "^5.4.0",
"koa-static": "^2.0.0",
"koa-webpack-dev-middleware": "^1.2.2",
"node-sass": "^3.10.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.6",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.25.0",
"eslint": "^3.7.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.4.1",
"koa-webpack-hot-middleware": "^1.0.3",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.3.1",
"webpack-dev-server": "^1.16.2"
}
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const ROOT_PATH = path.resolve(__dirname);
module.exports = {
devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
entry: [
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
path.resolve(ROOT_PATH, 'src/index.jsx')
],
module: {
preLoaders: [{
test: /\.jsx?$/,
loaders: process.env.NODE_ENV === 'production' ? [] : ['eslint'],
include: path.resolve(ROOT_PATH, 'src/index.jsx')
}],
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react'],
cacheDirectory: true,
env: {
development: {
presets: ['react-hmre']
}
}
},
include: './src'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: process.env.NODE_ENV === 'production'
? path.resolve(ROOT_PATH, 'dist')
: path.resolve(ROOT_PATH, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(ROOT_PATH, 'build'),
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
src/index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const main = () => {
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);
};
main();
I have also tried without any presets using a .babelrc file:
{
"presets": ["es2015", "stage-0", "react"]
}
Running babel src/index.jsx does work as expected, so I think this is an issue with the webpack configuration.
My include path for the js(x) loader was wrong. Fixed using
include: path.resolve(ROOT_PATH, './src')
instead of
include: './src'