I am new in Node and React and I am getting this error when trying to build in Babel in order to upload the serverjs and react client to Heroku.
Everything is working fine in Postman but could not upload it to Heroku. After searching online, I found I have to compile it with Babel first.
The error message is:
SyntaxError: client/node_modules/#babel/helper-plugin-utils/src/index.js: Unexpected token (38:4)
36 |
37 | return {
> 38 | ...proto,
| ^
39 | ...api,
40 | };
41 | }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Baraa\AppData\Roaming\npm-cache\_logs\2019-03-21T16_14_47_767Z-debug.log
My webpack.config.js file contains:
module.exports = {
entry: "./client/src/index.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["react"]
}
}
]
},
devServer: {
proxy: {
"/name": "http://localhost:3011"
}
}
};
package.json
{
"name": "app04",
"version": "1.0.0",
"engines": {
"node": "11.8.0"
},
"description": "app 04",
"main": "server.js",
"scripts": {
"build-babel": "babel -d ./build ./ -s",
"build": "npm run build-babel",
"start": "npm run build && node ./build/server.js"
},
"author": "Baraa Rashad",
"dependencies": {
"accuweather": "^1.0.1",
"axios": "^0.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"body-parser": "^1.18.3",
"bootstrap": "^3.4.1",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"crypto-js": "^3.1.9-1",
"ejs": "^2.5.2",
"express": "^4.14.0",
"http": "0.0.0",
"nvm": "0.0.4",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-json-pretty": "^2.0.0",
"react-router-config": "^4.4.0-beta.6",
"react-router-dom": "^4.3.1",
"reactstrap": "^7.1.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
"babel-register": "^6.26.0",
"nodemon": "^1.18.10"
}
}
.babelrc
{
"presets": ["env", "es2015", "react"],
"plugins": ["babel-plugin-transform-class-properties"]
}
I found the solution by adjusting the package.josn like following.
"scripts": {
"devstart": "babel-node ./src/bin/www",
"start": "npm run build && node ./build/bin/www",
"build": "npm run babel-build",
"babel-build": "babel -d ./build ./src -s",
"heroku-postbuild": "cd client && npm install && npm run build"
},
Related
I configured Webpack with following settings:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
mode: 'development'
};
And babel.config.json:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
The transpilation works fine, but after starting the page in browser i get the following error:
Uncaught ReferenceError: require is not defined
package.json
{
"name": "test",
"version": "0.0.1",
"description": "test",
"main": "main.js",
"scripts": {
"css-build": "node-sass _sass/main.scss dist/main.css",
"css-deploy": "npm run css-build && npm run css-postcss",
"css-postcss": "postcss --use autoprefixer --output dist/main.css dist/main.css",
"css-watch": "npm run css-build -- --watch",
"deploy": "npm run css-deploy && npm run js-build",
"js-build": "babel _javascript --out-dir dist",
"js-watch": "npm run js-build -- --watch",
"start": "npm-run-all --parallel css-watch js-watch",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.13.10",
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
"autoprefixer": "^9.7.6",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015-ie": "^6.7.0",
"node-sass": "^4.13.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.0",
"webpack": "^5.24.4",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
I tried a lot of things, but nothing helps with my problem.
module.exports = {
entry: './app/index.js', // add this in webpack config
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"]
}
]
},
mode: 'development'
};
I have been programming a database that is linked to React, but after a while I installed a library that is babel-core and other libraries, but always when compiling I get an error that is the following:
ERROR in ./src/app/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
{
"name": "Mern-Stack-Example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon node src/app.js",
"webpack": "webpack --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
//These
"#babel/cli": "^7.12.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"babel-loader": "^7.1.5",
"nodemon": "^2.0.7",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"mongoose": "^5.11.13",
"morgan": "^1.10.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
But I have changed it and the error keeps appearing, I don't know how to solve it, if someone knows please help me
Webpack.Confg:
module.exports = {
entry: './src/app/index.js',
output: {
path: __dirname + '/src/public/js',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}
]
}
};
And .Babel
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
Remove your node_modules and follow these steps:
npm install --save-dev #babel/core #babel/cli #babel/preset-env #babel/node
Then, check the existence of these files:
node_modules/.bin/babel-node
node_modules/.bin/babel-node.cmd - windows only
node_modules/#babel/node/bin/babel-node.js
Generally, these issues might come in due to the version conflicts. Try to install nvm and use lesser node version. Also, you should use previous versions of babel packages
#babel/preset-env
#babel/preset-react
I have code like:
import 'app/css/normalize.css'
import 'app/css/app.css'
import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return (
<div>
<h1>Finances</h1>
Test
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
ESLint complains that the / in </h1> is invalid. Why is that?
My ESLint config
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
ESLint output
> finances-web#1.0.0 lint /home/jiewmeng/Dropbox/finances2019/web
> eslint scripts/**/*.js
/home/jiewmeng/Dropbox/finances2019/web/scripts/app.js
10:20 error Parsing error: Unexpected token /
✖ 1 problem (1 error, 0 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! finances-web#1.0.0 lint: `eslint scripts/**/*.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the finances-web#1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jiewmeng/.npm/_logs/2018-12-23T04_08_42_410Z-debug.log
Could it be something to do with my react version?
{
"name": "finances-web",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"lint": "eslint scripts/**/*.js",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --hot --color --history-api-fallback --config webpack.config.js"
},
"author": "Jiew Meng <jiewmeng#gmail.com>",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.0.1",
"eslint": "^5.10.0",
"eslint-plugin-react": "^7.11.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.5.0",
"react-hot-loader": "^4.6.1",
"style-loader": "^0.23.1",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"lodash": "^4.17.11",
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
Ok ... realized my mistake. In eslintrc I need to add
"parser": "babel-eslint",
I am building an app which uses client-server comunications and server-google cloud platform comunications by using socket.io. For the front-end part I'm using React where I have two components App and Touch. In the future I'll change project structures but rigth now it looks like this
My project structure is the following one:
nodemodulesFolder
publicFolder
jsFolder
client.js
socket.io.js
socket.io.js
socket.io.js.map
touch.js
viewFolder
App.js
index.css
Touch.js
index.js
routes.js
.dockerignore
.env
.gitignore
deployment.yaml
Dockerfile
index.js
ingress.yaml
Jenkinsfike
package.json
package-lock.json
server.js
webpack.config.js
This is my webpack.config.js
'use strict'
module.exports = {
entry: __dirname + '/cp-test-app/public/index.js',
output: {
path: __dirname + '/cp-test-app/public/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
And these are the scripts I'm using to run the app:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode development",
"build": "webpack --mode production"
}
But somehow I get the following errors:
# start /Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app
webpack --mode development
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: 14907618cdf8c7e77e94
Version: webpack 4.20.2
Time: 66ms
Built at: 2018-09-28 10:41:38
ERROR in Entry module not found: Error: Can't resolve '/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app/cp-test-app/public/index.js' in '/Users/raulvilloravalencia/OneDrive - Universidad Politécnica de Madrid/Documents/cp-test-app-2/cp-test-app'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # start: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/raulvilloravalencia/.npm/_logs/2018-09-28T08_41_39_055Z-debug.log
My package.json looks like this :
{
"description": "Google Cloud Speech Playground with node.js and socket.io.",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"babel": {
"presets": [
"env",
"react"
],
"plugins": [
"transform-object-rest-spread"
]
},
"dependencies": {
"#google-cloud/speech": "1.5.0",
"#grpc/proto-loader": "^0.3.0",
"#webpack-cli/init": "^0.1.1",
"ajv": "^6.5.4",
"ajv-keywords": "^3.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.3.13",
"cors": "^2.8.4",
"dotenv": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.3",
"isomorphic-fetch": "^2.2.1",
"json-loader": "^0.5.4",
"nodemon": "^1.18.4",
"path": "^0.12.7",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-engine": "^4.5.1",
"react-router": "^3.2.1",
"react-router-dom": "^4.2.2",
"serialize-javascript": "^1.4.0",
"serve-favicon": "^2.3.0",
"socket.io": "^2.0.4"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"nodemon": "^1.9.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-node-externals": "^1.6.0"
}
}
Webpack is looking for /cp-test-app-2/cp-test-app/cp-test-app/public/index.js, while it should be looking for /cp-test-app-2/cp-test-app/public/index.js.
Specify the correct relative paths in your webpack.config.js by removing the extra /cp-test-app:
'use strict'
module.exports = {
entry: __dirname + '/public/index.js',
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
Probably irrelevant to this particular error, but you need to use the following syntax to specify the mode:
webpack --mode=development
// ^
// Notice the equals sign.
I´m building my first monorepo using Lerna.
My lerna.json:
{
"lerna": "2.9.0",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}
The lerna package.json is like:
{
"name": "monorepo",
"version": "1.0.0",
"workspaces": [
"packages/*"
],
"private": true,
"scripts": {
"start": "lerna exec -- start",
"server": "lerna exec -scope #monorepo/server -- server"
},
"devDependencies": {
"lerna": "^2.9.0"
}
}
And my project has the following package.json:
{
"name": "#monorepo/server",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"",
"server": "nodemon --exec \"babel-node start-server.js\"",
"lint": "eslint ."
},
"dependencies": {
"#babel/cli": "^6.24.1",
"#babel/core": "^6.25.0",
"#babel/plugin-transform-runtime": "^6.23.0",
"#babel/preset-env": "^1.6.1",
"#babel/preset-es2017": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"connect-mongo": "^2.0.0",
"crypto": "^1.0.1",
"express": "^4.15.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.1",
"graphql-relay": "^0.5.4",
"jwt-simple": "^0.5.1",
"mongoose": "^5.0.10",
"morgan": "^1.8.2",
"nodemailer": "^4.6.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"path": "^0.12.7",
"validator": "^9.1.1"
},
"devDependencies": {
"concurrently": "3.5.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"fs-extra": "^5.0.0",
"node-fetch": "^2.1.1",
"nodemon": "^1.11.0"
},
"babel": {
"presets": [
"#babel/es2017",
"#babel/preset-env"
],
"plugins": [
"transform-runtime"
]
}
}
My problem is running the server application, issuing one of the following commands:
$ yarn start
yarn run v1.5.1
$ concurrently "babel-node start-server" "babel-node start-auth-client" "babel-node start-editor-client"
[0] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[1] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] babel-node start-editor-client exited with code 1
[1] babel-node start-auth-client exited with code 1
[0] babel-node start-server exited with code 1
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"
Directory: c:\\dev\\monorepo\\packages\\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "c:\\dev\\monorepo\\packages\\server\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I think this is due to the fact that all packages now reside at package root/node_modules.
Any ideas how to fix that?