I am learning react and created a mock up project but when I run the project I get the following error,my webpack.config.js file code is as follows,
module.exports = {
entry: './client.js',
output: {
filename: 'bundle.js',
path: 'public'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}
};
my package.json file,
{
"name": "universal-react",
"version": "0.0.0",
"description": "Universal React web application.",
"scripts": {
"start": "webpack && node server.js",
"dev": "npm-run-all --parallel watch:*",
"watch:webpack": "webpack -w",
"watch:server": "nodemon --ext js,jsx --ignore public/ server.js"
},
"main": "server.js",
"keywords": [
"universal",
"react"
],
"dependencies": {
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"babel-register": "^6.9.0",
"express": "^4.13.4",
"marked": "^0.3.6",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-redux": "^4.4.6",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"nodemon": "^1.11.0",
"npm-run-all": "^3.1.2"
}
}
error message is as follows,
/home/user/Documents/test/src/routes/index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at loader (/home/user/Documents/src/node_modules/babel-register/lib/node.js:144:5)
Could anyone suggest me where i am wrong?
You have not installed babel-preset-es2015 as per your package.json.
"babel-preset-es2015": "^6.9.0",
try installing it via
npm install --save babel-preset-es2015
Also add
"babel": "^6.5.2",
"babel-cli": "^6.9.0"
and a .babelrc file in project root parallel to your package.json
with following content.
$ cat .babelrc
{
"presets": [
"es2015",
"react"
]
}
and then run npm install then webpack again.
Related
I am following instructions from a React course when setting up Babel with Webpack and now I get this error:
ERROR in ./src/app.js
Module build failed: SyntaxError: C:/Users/38164/Desktop/react-course-projects/indecision-app/src/app.js: Unexpected token (4:17)
image of the error
Here are the files from the setup:
app.js
import React from 'react';
import ReactDOM from 'react-dom';
const template = <p>testing</p>;
ReactDOM.render(template, document.getElementById('app'));
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, "public"),
filename: "bundle.js",
},
module: {
rules: [{
loader: "babel-loader",
test: /\.js$/,
exclude: /node_modules/
}
]
}
};
package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"serve": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-cli": "6.24.1",
"babel-loader": "7.1.1",
"live-server": "^1.2.2",
"react": "16.0.0",
"react-dom": "16.0.0",
"validator": "8.0.0",
"webpack": "3.1.0"
}
}
.babelrs
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
Does anyone have any suggestions?
There is probably something minor, but I can't figure it out, as this is new for me.
Community, just started with React and I've created the simplest stuff ever. Does it work? Of course... not.
I've been googling and tried to make those adjustments described. But still, my killer application won't run and I seem to end up with two different error messages depending on the actions i take:
"Babel Plugin/Preset files are not allowed to export objects, only functions"
"Uncaught ReferenceError: process is not defined"
I honestly don't know how to proceed, I've tried to upgrade to the latest "#babel/...", tried to downgrade to earlier babel versions, but React is playing hide and seek with me.
// app.js
import React from 'react';
import ReactDOM from 'react-dom';
const text = <p>Hello world</p>
ReactDOM.render(text, document.getElementById('app'));
// babel.rc
{
"presets": [
"env",
"react"
]
}
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
mode: 'none',
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
}
};
// package.json
{
"name": "killer-app",
"version": "1.0.0",
"main": "index.js",
"author": "",
"license": "",
"scripts": {
"serve": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"live-server": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"validator": "^13.7.0",
"webpack": "^5.73.0"
},
"devDependencies": {
"webpack-cli": "^4.10.0"
}
}
As a side-note, the script "yarn run build-babel" doesn't work either. This script worked before I installed Webpack.
Any advice is appreciated! :)
I got some errors when run yarn start in ReactJS app, anyone can help please?
ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015'
Belows are the information of config files:
The package.json:
{
"name": "helloworld",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack serve --mode development --open --hot",
"build": "webpack --mode production"
},
"dependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.25.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"devDependencies": {
"#webpack-cli/serve": "^1.3.0"
}
}
And the .babelrc:
{
"presets": [
"#babel/env",
"#babel/react"
]
}
After some research I got my answer: Edit the presets in webpack.config.js file the same as .babelrc file
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { // <-- Sometimes you should change it from query to options to avoid error
presets: ['#babel/env', '#babel/react'] // <-- Edit here
}
}
]
},
I'm trying to follow along the examples in the Learning Redux book. Unfortunately the latest versions of webpack and babel have all changed and I updated to the latest versions which deviate from the configurations in the book.
I've read the latest documentation from both babel and webpack and I believe I have the correct .babelrc and config.webpack.js that is appropriate.
But I'm struggling to get jsx to compile with the webpack-dev-server. I get this error when running npm start:
ERROR in ./src/index.js
Module parse failed: Unexpected token (10:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <h1>hello world!</h1>,
| document.getElementById('root')
| )
# multi (webpack)-dev-server/client?http://localhost:8080 ./src
Here is my full setup: https://github.com/homanchou/learning_redux
package.json
{
"name": "learningredux",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"npm": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"redux": "^4.0.0"
}
}
babelrc.
{
"presets": ["env", "react"],
"plugins": [ "transform-object-rest-spread" ]
}
config.webpack.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'main.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
}
}
Any help is appreciated.
You just mixed the order in the config.webpack.js filename.
It needs to be webpack.config.js
Or you need to run webpack with --config and pass the filename.
Everything else should work.
I am trying to create my very first node package, it was successfully publish and live on npmjs.com website but whenever i include it on a sample react project using create-react-app i get this following error
Here's how i import it
import IconTooltip from 'react-icons-tooltip';
Here's the error
Module not found: Can't resolve './react-icons-tooltip' in '/home/ubuntu/workspace/lasting/src/Components'
This is the Package package.json file
{
"name": "react-icons-tooltip",
"version": "1.0.4",
"description": "",
"main": "./lib/IconTooltip.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --colors --p",
"transpile": "node_modules/.bin/babel ./src/index.js --presets babel-preset-es2015 --out-file lib/IconTooltip.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
webpack.config.js
const webpack = require("webpack");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/build',
filename: 'IconToolTip.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
};
If i import the local the package seems to work fine
import IconTooltip from './lib/IconTooltip';
TIA!
I had that same problem before and that fixed it. I checked other modules and they all enter in index.js, is all I can say :)