Related
I created a React project that uses webpack-dev-server and my package.json is:
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint **/*.{js,jsx} --quiet",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.4.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.4.0",
"mini-css-extract-plugin": "^2.4.2",
"prettier": "^2.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
When I run npm run start, I'm getting this error:
[webpack-cli] C:\dev\testproject\node_modules\webpack-dev-server\lib\servers\WebsocketServer.js:10
static heartbeatInterval = 1000;
SyntaxError: Unexpected token =
at new Script (vm.js:79:7)
at NativeCompileCache._moduleCompile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
at Module._compile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:184:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Server.getServerTransport (C:\dev\testproject\node_modules\webpack-dev-server\lib\Server.js:1009:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! testproject#1.0.0 start: `webpack-dev-server --mode development --open`
What could be the cause of this?
It turns out upgrading my node version (in my case, from 10.13.0 to 16.11.1) resolved this.
I tried this based on advice found here and it worked.
Your babel transpiling is not set up properly you need to add appropriates plugins in your babel config.
Basically this error means that below statement is not supported, and thats because babel is not transpiling your code to a supported ES version.
static heartbeatInterval = 1000;
you may have to use this plugin: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
I'm trying to deploy a web-app that I've built using templates from a friend. I'm quite unfamiliar with React/NextJS frameworks so I'm unsure with the differences between yarn and npx.
I've used yarn next-build to get the app running locally and it works fine. However, now I'm trying to deploy it to Google App Engine on NodeJS and I can't get it working.
This is the project structure:
/dist/functions/next
/nginx
/node_modules
/packages
/public
.gcloudignore
.nowignore
.prettierrc
.yarnrc
app.yaml
babel.config.js
firebase.json
landing.now.json
lerna.json
package-lock.json
package.json
yarn.lock
This is app.yaml:
runtime: nodejs10
handlers:
- url: /.*
script: auto
This is package.json:
{
"name": "streamplate-landing",
"description": "Your universal health app",
"version": "1.0.0",
"private": true,
"author": "Streamplate",
"devDependencies": {
"#babel/cli": "^7.10.3",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"firebase-tools": "8.4.3",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"rimraf": "^3.0.2",
"polished": "^3.4.4"
},
"workspaces": [
"packages/common",
"packages/landing",
"packages/landing-gatsby"
],
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"clean": "lerna clean --yes && rimraf node_modules",
"preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
"next-dev": "yarn workspace next-landing run dev",
"next-build": "rimraf dist && yarn workspace next-landing run build",
"next-start": "yarn workspace next-landing run start",
"next-export": "yarn workspace next-landing run export",
"gatsby-dev": "yarn workspace gatsby-landing run dev",
"gatsby-build": "yarn workspace gatsby-landing run build",
"gatsby-serve": "yarn workspace gatsby-landing run serve",
"prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps && yarn run install-deps",
"firebase-serve": "cross-env NODE_ENV=production firebase serve",
"prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps",
"firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
"build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx
\"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\"
\"dist/public\" -C",
"build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"packages/landing/*{package.json,package-lock.json,yarn.lock}\"
\"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && yarn",
"pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-
gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
"pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx
\"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-deploy": "firebase deploy",
"netlify-deploy": "yarn workspace next-landing run netlify-build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,md,css}": [
"prettier --trailing-comma es5 --single-quote --write"
]
}
}
Add the next export into scripts area in your package.json
"scripts": {
...
"build": "next build && next export"
...
after execution yarn build the out directory will be generated and added into your project.
While initializing firebase use out directory as your public.
I updated babel to the latest version and still get the error pointing to the "=" operator
35 | export const AssignmentsContainer = connectedContainer(
36 | class extends Component {
> 37 | buildAssignments = () => {
| ^
debug.log doesn't really offer any obvious hints
The package.json at this point looks like this:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.4.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.15",
"popper.js": "^1.12",
"react": "^16.9.0",
"react-dom": "^16.2.0"
},
"dependencies": {
"core-js": "^3.2.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-html-parser": "^2.0.2",
"react-redux": "^7.1.1",
"redux": "^4.0.4"
}
}
Also tried sifting through this, but keep coming up empty: https://github.com/JeffreyWay/laravel-mix/issues/1402
Class properties are still not supported. So, you need to use #babel/plugin-proposal-class-properties which will help to transform class properties.
You need to install the babel plugin:
npm install --save-dev #babel/plugin-proposal-class-properties
And, in your .babelrc file, you need to make an entry:
"plugins": ["#babel/plugin-proposal-class-properties"]
This will solve your issue.
In the link you shared, it was mentioned to use "babel-plugin-transform-class-properties", but that's for older version of Babel. Since Babel v7 the name has been changed to "#babel/plugin-proposal-class-properties"
For Babel versions previous to 7:
Install the babel-plugin-transform-class-properties plugin:
npm install --save-dev babel-plugin-transform-class-properties
Then, make an entry in .babelrc:
"plugins": ["transform-class-properties"]
Create react app on Express originally built using the CRA-E for Heroku instructions here https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
Locally I can see this error, but my app serves requests correctly anyway. When deploy this on Heroku, I also see this same error, and then for any request I get an H10 "App crashed" in the Heroku logs.
2019-05-26T18:12:00.682298+00:00 app[web.1]: (function (exports, require, module, __filename, __dirname) { import bodyParser from 'body-parser';
2019-05-26T18:12:00.682300+00:00 app[web.1]: ^^^^^^^^^^
2019-05-26T18:12:00.682302+00:00 app[web.1]:
2019-05-26T18:12:00.682304+00:00 app[web.1]: SyntaxError: Unexpected identifier
2019-05-26T18:12:00.682305+00:00 app[web.1]: at new Script (vm.js:84:7)
2019-05-26T18:12:00.682308+00:00 app[web.1]: at createScript (vm.js:264:10)
2019-05-26T18:12:00.682310+00:00 app[web.1]: at Object.runInThisContext (vm.js:312:10)
2019-05-26T18:12:00.682312+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:696:28)
2019-05-26T18:12:00.682313+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
2019-05-26T18:12:00.682318+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:628:32)
2019-05-26T18:12:00.682319+00:00 app[web.1]: at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
2019-05-26T18:12:00.682321+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:560:3)
2019-05-26T18:12:00.682323+00:00 app[web.1]: at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
2019-05-26T18:12:00.682324+00:00 app[web.1]: at executeUserCode (internal/bootstrap/node.js:526:15)
2019-05-26T18:12:00.699031+00:00 app[web.1]: error Command failed with exit code 1.
2019-05-26T18:12:00.699246+00:00 app[web.1]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2019-05-26T18:12:00.728654+00:00 app[web.1]: error Command failed with exit code 1.
2019-05-26T18:12:00.728814+00:00 app[web.1]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2019-05-26T18:12:00.796019+00:00 heroku[web.1]: Process exited with status 1
2019-05-26T18:12:00.814020+00:00 heroku[web.1]: State changed from starting to crashed
the app was created following these CRA-E instructions for Heroku: https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
The root package.json file is
{
"name": "xxxxxxxxxxxxxx-front",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.2.1",
"concurrently": "^4.1.0"
},
"scripts": {
"build": "concurrently \"cd client && yarn build\" \"cd server && yarn build\"",
"clean": "concurrently \"rimraf node_modules\" \"cd client && rimraf node_modules build\" \"cd server && rimraf node_modules build\"",
"heroku-postbuild": "yarn build",
"install": "(cd client && yarn) && (cd server && yarn)",
"start": "concurrently \"cd client && PORT=3000 yarn start\" \"cd server && PORT=3001 yarn start\"",
"start:prod": "cd server && yarn start:prod"
},
"engines": {
"node": "11.8.0"
}
}
the client/ package.json is
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"d3-hierarchy": "^1.1.8",
"d3-selection": "^1.4.0",
"d3-tree": "^1.0.20",
"node-sass": "^4.11.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-bootstrap-typeahead": "^3.4.1",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"reactstrap": "^6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"main": "index.js",
"license": "SEE LICENSE IN LICENSE.md",
"author": "Jason Fleetwood-Boldt"
}
the server/ pacakge.json file is
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.18.3",
"express": "^4.16.4"
},
"devDependencies": {
"babel-register": "^6.26.0",
"nodemon": "^1.18.9"
},
"scripts": {
"start": "nodemon -r babel-register server.js",
"build": "babel . --ignore node_modules,build --out-dir build",
"start:prod": "node build/server.js"
}
}
the server/server.js file is
import bodyParser from 'body-parser'
import express from 'express'
import path from 'path'
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
const router = express.Router()
const staticFiles = express.static(path.join(__dirname, '../../client/build'))
app.use(staticFiles)
app.use(router)
// any routes not picked up by the server api will be handled by the react router
app.use('/*', staticFiles)
app.set('port', (process.env.PORT || 3001))
app.listen(app.get('port'), () => {
console.log(`Listening on ${app.get('port')}`)
})
If you want to use import statements in a nodejs app, your code needs to be transpiled by babel before it's run. You seem to have installed the babel packages, but you haven't set up a .babelrc file. Try creating a .babelrc file in the server directory with the following contents:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
I am having trouble configuring my react project with Webpack 4.
I am printing my file contents here:
package.json (script part):
{
"name": "todo",
"version": "1.0.0",
"description": "a ToDo app built using react and webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js"
},
"author": "themaskedbit",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
babelrc:
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
]
}
webpack.config.js :
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
index.js :
import data from "./data/items";
import React from 'react';
import {render} from 'react-dom';
import ListItem from "./components/listItem";
render(
<ListItem items={data}/>,
document.getElementById("app")
);
With the above configuration, while I am trying to run the webpack using dev script. I am getting the below error:
$ npm run dev
> todo#1.0.0 dev C:\Users\rejir\Documents\HP works\ToDo
> webpack --mode development ./src/index.js --output ./dist/main.js
Hash: 0fac7774f9aa4bb8aeed
Version: webpack 4.26.1
Time: 234ms
Built at: 2018-11-28 19:50:35
Asset Size Chunks Chunk Names
main.js 4.01 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 227 bytes {main} [built] [failed] [1 error]
ERROR in ./src/index.js 9:4
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type.
|
| render(
> <ListItem items={data}/>,
| document.getElementById("app")
| );
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! todo#1.0.0 dev: `webpack --mode development ./src/index.js --output ./dist/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the todo#1.0.0 dev 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! C:\Users\rejir\AppData\Roaming\npm-cache\_logs\2018-11-28T14_20_35_305Z-debug.log
Please help me with the webpack configuration.
My understanding is that I am including the babel-loader in a wrong way. Searching through stackoverflow answers didn't give me a clue to solve my problem. If any fellow developers can help me in solving this issue, it will be good for me.
Thanks in advance.
You need to pass the config file while running webpack command
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js --config webpack.config.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js --config webpack.config.js"
More info here - use-custom-configuration-file