Module not found. "#babel/runtime/helpers/builtin/classCallCheck" can't be resolved - javascript

I have cloned a repo and did npm i. But as I ran it I was getting the above mentioned error on my console. So I tried a solution from this question and the error disappeared. But now the problem is that my app isn't loading I'm getting a blank page without any errors. I then removed the #babel/runtime dependecy. Here is my package.json:
{
//... some app info
"main": "dist/app.js",
"scripts": {
"clean": "rimraf dist",
"build": "yarn run clean && webpack-dashboard -- webpack --config configs/webpack.config.js --env.build --env.sourceMap",
"dev": "webpack-dashboard -m -- webpack-dev-server --config configs/webpack.config.js --open",
"dev2": "webpack-dashboard -m -- webpack-dev-server --config configs/webpack.config.js --open --env.awesome",
"lint": "tslint --project tsconfig.json",
"tsc": "tsc -p . --noEmit",
"tsc:watch": "tsc -p . --noEmit -w",
"test": "jest --config jest.json",
"test:update": "jest --config jest.json -u",
"reinstall": "rm -rf node_modules && yarn",
"reinstall:win": "rd /s /q node_modules && yarn",
"precommit": "yarn run lint",
"prepush": "yarn run lint & yarn run tsc & yarn run test",
"deploy": "echo 'deploy not set!'"
},
"dependencies": {
"classnames": "^2.2.5",
"csstips": "^0.2.0",
"firebase": "^4.8.0",
"ismobilejs": "^0.4.1",
"material-ui": "^0.19.4",
"numeral": "^2.0.6",
"radium": "^0.19.6",
"react": "16.1.1",
"react-dom": "16.1.1",
"react-firebase-storage-connector": "^1.1.0",
"react-redux": "5.0.6",
"react-stripe-elements": "^1.2.1",
"react-tooltip": "^3.4.0",
"redux": "3.7.2",
"redux-actions": "2.2.1",
"redux-form": "^7.2.0",
"redux-thunk": "^2.2.0",
"tslib": "1.6.1",
"typestyle": "^1.3.2"
},
"devDependencies": {
"#types/radium": "^0.18.23",
"#types/classnames": "^2.2.3",
"#types/firebase": "^2.4.32",
"#types/material-ui": "0.18.3",
"#types/node": "7.0.14",
"#types/react": "16.0.25",
"#types/react-dom": "16.0.3",
"#types/react-hot-loader": "^3.0.0-beta.7",
"#types/react-redux": "5.0.13",
"#types/redux-actions": "2.2.2",
"#types/redux-form": "^7.0.10",
"#types/webpack": "^2.2.15",
"#types/webpack-dev-server": "^1.12.6",
"#types/webpack-env": "^1.13.3",
"awesome-typescript-loader": "^3.4.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.28.0",
"husky": "^0.13.3",
"jest": "^19.0.2",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.8",
"react-hot-loader": "^3.0.0-beta.6",
"redux-devtools-extension": "^2.13.2",
"rimraf": "^2.6.1",
"style-loader": "^0.19.1",
"ts-jest": "^19.0.14",
"ts-loader": "^2.0.3",
"tslint": "^5.1.0",
"tslint-react": "^3.0.0",
"typescript": "2.6.1",
"url-loader": "^0.6.2",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.9.7"
}
}

Quick fix: npm add #babel/runtime

Related

SyntaxError: missing ) after argument list when trying to run migration fresh seed

I'm working on a nextJS project which uses mikro-orm , and I'm facing this error for days now:
C:\Users\BossTrails\Documents\core.nest-main_2\node_modules\.bin\mikro-orm:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47
I get the error above when I try to run the comman - npm run migration:fresh:seed
Here is my package.json
{
"name": "backend",
"version": "0.0.1",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start:server": "nest start --config nest-cli.server.json",
"migration:fresh": "node node_modules/.bin/mikro-orm migration:fresh",
"migration:fresh:seed": "node node_modules/.bin/mikro-orm migration:fresh --seed",
"migration:init": "node node_modules/.bin/mikro-orm migration:create --initial",
"migration:create": "node node_modules/.bin/mikro-orm migration:create",
"migration:up": "node node_modules/.bin/mikro-orm migration:up",
"migration:down": "node node_modules/.bin/mikro-orm migration:down",
"migration:down:zero": "node node_modules/.bin/mikro-orm migration:down --to 0",
"migration:rollout": "node node_modules/.bin/ts-node ./src/scripts/rollout-migrations",
"start:server:dev": "nest start --config nest-cli.server.json --watch",
"start:server:debug": "nest start --config nest-cli.server.json --debug --watch",
"start:server:dist": "node dist/server",
"start:worker": "nest start --config nest-cli.worker.json",
"start:worker:dev": "nest start --config nest-cli.worker.json --watch",
"start:worker:debug": "nest start --config nest-cli.worker.json --debug --watch",
"start:worker:dist": "node dist/worker",
"lint": "./node_modules/.bin/eslint \"{src,test}/**/*.ts\"",
"lint:fix": "./node_modules/.bin/eslint \"{src,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#faker-js/faker": "^6.1.1",
"#mikro-orm/cli": "^5.1.1",
"#mikro-orm/core": "^5.1.1",
"#mikro-orm/knex": "^5.0.0-dev.434",
"#mikro-orm/migrations": "^5.1.1",
"#mikro-orm/nestjs": "^5.0.1",
"#mikro-orm/postgresql": "^5.1.1",
"#mikro-orm/reflection": "^5.1.1",
"#mikro-orm/seeder": "^5.1.1",
"#nestjs/axios": "^0.0.3",
"#nestjs/common": "^8.0.0",
"#nestjs/config": "^1.0.2",
"#nestjs/core": "^8.0.0",
"#nestjs/event-emitter": "^1.1.1",
"#nestjs/graphql": "^9.1.2",
"#nestjs/jwt": "^8.0.0",
"#nestjs/passport": "^8.0.1",
"#nestjs/platform-express": "^8.0.0",
"#nestjs/platform-socket.io": "^8.4.4",
"#nestjs/platform-ws": "^8.4.4",
"#nestjs/schedule": "^1.0.2",
"#nestjs/swagger": "^5.1.4",
"#nestjs/websockets": "^8.4.4",
"#svtslv/nestjs-ioredis": "^1.0.2",
"#types/cookie": "^0.5.1",
"#types/socket.io": "^3.0.2",
"amqp-ts": "^1.8.0",
"apollo-server-core": "^3.6.7",
"apollo-server-express": "^3.5.0",
"aws-sdk": "^2.1034.0",
"axios": "^0.24.0",
"bcrypt": "^5.0.1",
"class-transformer": "^0.4.0",
"class-validator": "^0.13.1",
"cookie": "^0.5.0",
"file-type": "^16.5.3",
"firebase-admin": "^10.0.0",
"graphql": "^15.8.0",
"graphql-subscriptions": "^2.0.0",
"graphql-ws": "^5.5.5",
"ioredis": "^4.28.0",
"nestjs-redis": "^1.3.3",
"otp-generator": "^3.0.0",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0",
"swagger-ui-express": "^4.1.6",
"txtgen": "^2.2.8",
"typedi": "^0.10.0"
},
"devDependencies": {
"#nestjs/cli": "^8.0.0",
"#nestjs/schematics": "^8.0.0",
"#nestjs/testing": "^8.0.0",
"#types/bcrypt": "^5.0.0",
"#types/cron": "^1.7.3",
"#types/express": "^4.17.13",
"#types/faker": "^5.5.9",
"#types/imagemin": "^8.0.0",
"#types/imagemin-jpegtran": "^5.0.1",
"#types/ioredis": "^4.27.8",
"#types/jest": "^27.0.1",
"#types/lodash": "^4.14.176",
"#types/multer": "^1.4.7",
"#types/node": "^16.0.0",
"#types/passport-jwt": "^3.0.6",
"#types/passport-local": "^1.0.34",
"#types/supertest": "^2.0.11",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^5.16.0",
"#typescript-eslint/parser": "^5.16.0",
"eslint": "^8.11.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^26.1.3",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.0.6",
"prettier": "^2.6.0",
"prettier-eslint": "^13.0.0",
"supertest": "^6.1.3",
"ts-jest": "^27.0.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "^3.10.1",
"typescript": "^4.6.2"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
},
"mikro-orm": {
"useTsNode": true,
"configPaths": [
"./src/mikro-orm.config.ts",
"./dist/mikro-orm.config.js"
]
},
"files": [
"src"
]
}
I've cleaned node packages
I've reinstalled npm and yarn
The same error I am getting with npm and yarn
I'm using:
windows 10
node version: 16.15.0
npm: 8.5.5
I fixed it!
The problem was a windows issue. Windows had issues reading a bash file or something. But the whole set up works well on Linux or Mac.
So you can either switch to mac or linux.
OR
Use WSL ( the windows Linux distro). Install node and npm on the WSL , connect VS code to the WSL so that you can run and edit the code on VS code.
Run you scripts with the linux bash terminal which will now be set up in vs code

ERROR in ./node_modules/#esri/calcite-components/dist/custom-elements/index.mjs 1:0-147

I already add this to my package.json dist/custom-elements/index.mjs": "dist/custom-elements/index.js why i am having this error (below). did i miss something?
{
"name": "#map/react-app",
"private": true,
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --port 9003 --env standalone",
"build": "concurrently yarn:build:*",
"build:webpack": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js",
"format": "prettier --write .",
"check-format": "prettier --check .",
"test": "cross-env BABEL_ENV=test jest",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"prepare": "husky install",
"coverage": "cross-env BABEL_ENV=test jest --coverage"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#babel/runtime": "^7.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"babel-jest": "^27.0.6",
"concurrently": "^6.2.1",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.0.6",
"jest-cli": "^27.0.6",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa-react": "^4.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"#arcgis/core": "^4.21.2",
"#material-ui/styles": "^4.11.4",
"#mui/styles": "^5.2.2",
"#reach/router": "^1.3.4",
"#stencil/core": "^2.11.0",
"browserify": "^17.0.0",
"dotenv": "^10.0.0",
"dotenv-webpack": "^7.0.3",
"path-browserify": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"single-spa-react": "^4.3.1",
"web-vitals": "^2.1.2"
},
"lint-staged": {
"*.{js,jsx}": "pretty-quick --staged && eslint --fix"
},
"browser": {
"dist/custom-elements/index.mjs": "dist/custom-elements/index.js" // I'll already add this to may package.json, why i am having this error?
}
}
error
ERROR in
./node_modules/#esri/calcite-components/dist/custom-elements/index.mjs
1:0-147
Module not found: Error: Can't resolve '#stencil/core/internal/client'
in
'C:\Users\Ronald\Desktop\Map\app-react\node_modules#esri\calcite-components\dist\custom-elements'
Did you mean 'index.js'? BREAKING CHANGE: The request
'#stencil/core/internal/client' failed to resolve only because it was
resolved as fully specified (probably because the origin is strict
EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs'
file, or a '.js' file where the package.json contains '"type":
"module"'). The extension in the request is mandatory for it to be
fully specified. Add the extension to the request.
The best solutions on this is in your webpack.config.js add this code
module:{
rules:[
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
and removed the browser in your package.json

webpack say UnhandledPromiseRejectionWarning to me

I'm using electron and webpack.
When building dev-mode my project.
Node Error appear "UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 2" "DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.".
And Dose not open electron.
I'm checked firewall.
How I setting currently my project?
This is my package.json.
enter image description here
{
"name": "abce",
"productName": "abce Launcher",
"version": "0.10.0",
"main": "main.js",
"scripts": {
"test": "cross-env NODE_ENV=test node --trace-warnings ./test/runTests.js",
"test-all": "npm run test && npm run build && npm run test-e2e",
"test-watch": "npm test -- --watch",
"test-e2e": "cross-env NODE_ENV=test node --trace-warnings ./test/runTests.js e2e",
"hot-server": "cross-env NODE_ENV=development node --max_old_space_size=4096 server.js",
"build-main": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack --config webpack.config.electron.js --progress --profile --colors",
"build-renderer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack --config webpack.config.production.js --progress --profile --colors",
"build-web": "cross-env NODE_ENV=production node --max_old_space_size=4096 --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.web.production.js --progress --profile --colors",
"build": "npm run deploy-content-api && npm run build-main && npm run build-renderer",
"start": "cross-env NODE_ENV=production electron ./app/",
"start-hot": "cross-env HOT=1 NODE_ENV=development electron -r babel-register -r babel-polyfill ./app/main.development",
"postinstall": "npm run build",
"dev": "npm run deploy-content-api && npm run hot-server -- --start-hot",
"dev-web": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.web.development.js --progress --profile --colors",
"dev-web-hot": "cross-env START_HOT=1 NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.web.development.js",
"package": "npm run build && build --publish never",
"package-win": "npm run build && build --win --x64",
"package-linux": "npm run build && build --linux",
"package-all": "npm run build && build -mwl",
"cleanup": "mop -v",
"deploy-content-api": "cross-env uglifyjs ./content-api/tree-launcher-content.js -c -m -o ./app/public/tree-launcher-content.js",
"prettier": "prettier --write \"**/*.*(js|jsx|ts|tsx)\""
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"moduleDirectories": [
"node_modules",
"app/node_modules"
],
"transform": {
"^.+\\.(ts|tsx)$": "<rootDir>/test/preprocessor.js"
},
"testMatch": [
"**/?(*.)(spec|test).ts?(x)"
]
},
"build": {
"productName": "Elif Launcher",
"appId": "com.visang.fel-launcher",
"asar": false,
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"files": [
"dist/",
"!dist/**/*.*.map",
"node_modules/",
"app.html",
"main.js",
"fel.sql",
"fel.yaml",
"fel_server.exe",
"OSKSpawner.exe",
"static/",
"public/",
"package.json",
"settings.json"
],
"directories": {
"buildResources": "resources",
"output": "release"
},
"win": {
"target": "dir"
},
"linux": {
"target": [
"deb",
"AppImage"
]
}
},
"bin": {
"electron": "./node_modules/.bin/electron"
},
"devDependencies": {
"#types/enzyme": "^2.5.39",
"#types/history": "^4.5.2",
"#types/jest": "^20.0.2",
"#types/node": "~8.0.2",
"#types/react": "^15.0.37",
"#types/react-dom": "^15.5.1",
"#types/react-hot-loader": "^3.0.1",
"#types/react-redux": "^5.0.4",
"#types/react-router": "^4.0.11",
"#types/react-router-dom": "^4.0.7",
"#types/react-router-redux": "^5.0.2",
"#types/redux-logger": "^3.0.0",
"#types/sinon": "^2.3.1",
"asar": "^0.13.0",
"babel-eslint": "^7.2.3",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-register": "^6.26.0",
"boiler-room-custodian": "^0.6.2",
"concurrently": "^3.1.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"css-modules-require-hook": "^4.0.6",
"devtron": "^1.4.0",
"electron": "1.6.7",
"electron-builder": "^19.8.0",
"electron-builder-http": "^19.15.0",
"electron-devtools-installer": "^2.0.1",
"electron-rebuild": "^1.6.0",
"enzyme": "^2.7.0",
"eslint": "^4.6.1",
"eslint-config-airbnb": "^15.1.0",
"eslint-formatter-pretty": "^1.3.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-compat": "^1.0.4",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "1.1.5",
"html-webpack-plugin": "^2.24.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"json-loader": "^0.5.4",
"node-sass": "^4.1.1",
"prettier": "^1.18.2",
"react-addons-test-utils": "^15.4.1",
"react-hot-loader": "^3.0.0-beta.6",
"redux-logger": "^3.0.6",
"sass-loader": "^6.0.6",
"sinon": "^3.2.1",
"spectron": "^3.4.1",
"style-loader": "^0.18.2",
"ts-loader": "^2.2.0",
"ts-node": "^3.1.0",
"tslint": "5.15.0",
"tslint-config-prettier": "^1.18.0",
"tslint-loader": "^3.5.3",
"tslint-react": "^3.2.0",
"typescript": "3.4.3",
"uglify-js": "^3.4.4",
"url-loader": "^0.5.7",
"webpack": "^3.3.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-hot-middleware": "^2.13.2",
"webpack-merge": "^2.0.0"
},
"dependencies": {
"#types/classnames": "^2.2.9",
"babili-webpack-plugin": "^0.1.2",
"classnames": "^2.2.6",
"electron-debug": "^1.2.0",
"font-awesome": "^4.7.0",
"google-protobuf": "^3.3.0",
"grpc": "^1.3.2",
"history": "^4.6.3",
"md5-file": "^4.0.0",
"moment": "^2.19.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-draggable": "^3.0.5",
"react-id-swiper": "1.5.7",
"react-progressbar.js": "^0.2.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.7.1",
"redux-saga": "^0.15.3",
"rxjs": "^5.4.0",
"source-map-support": "~0.4.15",
"uuid": "^3.1.0",
"winston": "2.4.0",
"winston-daily-rotate-file": "^1.4.6"
},
"devEngines": {
"node": ">=6.x",
"npm": ">=3.x"
}
}

Cannot find type definition file for 'source-map'

I am trying to run an angular 5 app which I upgraded from angular 4 but am encountering this error when I run npm run server:dev:
[at-loader] Checking finished with 1 errors
[at-loader] TS2688: Cannot find type definition file for 'source-map'.
Here is my package.json
{
"name": "Hidden",
"version": "v1.0.0",
"description": "",
"keywords": [
"Hidden"
],
"author": "Hidden",
"license": "MIT",
"scripts": {
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"build": "npm run build:dev",
"ci": "npm run lint && npm test && npm run e2e",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean:start": "npm start",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
"docker": "docker",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"e2e:live": "npm run e2e -- --elementExplorer",
"e2e": "npm run protractor",
"github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --github-dev",
"github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --github-prod",
"github-deploy": "npm run github-deploy:dev",
"lint": "npm run tslint \"src/**/*.ts\"",
"lite": "lite-server",
"postversion": "git push && git push --tags",
"prebuild:dev": "npm run clean:dist",
"prebuild:prod": "npm run clean:dist",
"preclean:install": "npm run clean",
"preclean:start": "npm run clean",
"pree2e": "npm run webdriver:update -- --standalone",
"preversion": "npm test",
"protractor": "protractor",
"rimraf": "rimraf",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
"server:prod": "http-server dist --cors",
"server": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"start": "npm run server:dev",
"test": "karma start",
"tslint": "tslint",
"typedoc": "typedoc",
"version": "npm run build",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:dev": "npm run build:dev -- --watch",
"watch:prod": "npm run build:prod -- --watch",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch": "npm run watch:dev",
"webdriver-manager": "webdriver-manager",
"webdriver:start": "npm run webdriver-manager start",
"webdriver:update": "npm run webdriver-manager update",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"dependencies": {
"#angular/animations": "^5.2.3",
"#angular/common": "^5.2.3",
"#angular/compiler": "^5.2.3",
"#angular/core": "^5.2.3",
"#angular/forms": "^5.2.3",
"#angular/http": "^5.2.3",
"#angular/material": "^2.0.0-beta.12",
"#angular/platform-browser": "^5.2.3",
"#angular/platform-browser-dynamic": "^5.2.3",
"#angular/platform-server": "^5.2.3",
"#angular/router": "^5.2.3",
"#angularclass/conventions-loader": "^1.0.2",
"#angularclass/hmr": "~2.1.3",
"#angularclass/hmr-loader": "~3.0.4",
"#ngtools/webpack": "^1.9.7",
"#types/jquery": "^3.2.18",
"angular-tag-cloud-module": "^2.4.0",
"assets-webpack-plugin": "^3.4.0",
"b64-to-blob": "^1.2.19",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jquery": "^3.2.1",
"ng2-bs3-modal": "^0.13.0",
"ng2-img-cropper": "^0.9.0",
"ngc-webpack": "^4.1.2",
"occurences": "^2.2.2",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.5.6",
"zone.js": "~0.8.14"
},
"devDependencies": {
"#angular/compiler-cli": "^5.2.3",
"#types/hammerjs": "^2.0.34",
"#types/jasmine": "2.5.45",
"#types/node": "^7.0.39",
"#types/selenium-webdriver": "2.53.38",
"#types/source-map": "^0.5.0",
"#types/uglify-js": "^2.6.28",
"#types/webpack": "^2.2.16",
"angular2-template-loader": "^0.6.2",
"assets-webpack-plugin": "^3.5.1",
"awesome-typescript-loader": "~3.1.2",
"codelyzer": "~2.1.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"exports-loader": "^0.6.4",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "~3.0.0",
"file-loader": "^0.11.1",
"gh-pages": "^1.0.0",
"html-webpack-plugin": "^2.28.0",
"imports-loader": "^0.7.1",
"istanbul-instrumenter-loader": "2.0.0",
"jasmine-core": "^2.5.2",
"json-loader": "^0.5.4",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.0",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.8.1",
"ng-router-loader": "^2.1.0",
"node-sass": "^4.5.2",
"npm-run-all": "^4.0.2",
"parse5": "^3.0.2",
"protractor": "^4.0.10",
"raw-loader": "0.5.1",
"rimraf": "~2.6.1",
"sass-loader": "^6.0.3",
"script-ext-html-webpack-plugin": "^1.8.5",
"source-map-loader": "^0.2.1",
"string-replace-loader": "~1.3.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.18.1",
"to-string-loader": "^1.1.5",
"ts-helpers": "1.1.2",
"ts-node": "^3.3.0",
"tslint": "~4.5.1",
"typedoc": "^0.7.1",
"typescript": "2.4.2",
"url-loader": "^0.5.8",
"v8-lazy-parse-webpack-plugin": "^0.3.0",
"webpack": "3.5.5",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "~2.7.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "~4.1.0"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
Finally, I fixed the issue.
I followed these steps:
npm install source-map#latest --save
In package.json I added #types/source-map": "0.5.0. Note that I specifically specified version 0.5.0
npm install
Stop the application using ctrl +c in your terminal
Precheck:
Check if your project folder contains .angular-cli.json file. If not you have to create it.
Also make sure there is no other file starting with . angular cli. If so delete it.
If you still face errors then create new project using ng new app-name. Once created then copy the package.json and .angular-cli.json file and paste it in to your folder
Try this package.json please. Looks like the migration you have done from Angular 2 to Angular 4 still using old method of serving the application
{
"name": "Hidden",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"start-mock-test-app": "ng serve -env=mock-test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/core": "0.0.29",
"#angular-devkit/schematics": "0.0.52",
"#angular/animations": "^4.4.6",
"#angular/common": "^4.4.6",
"#angular/compiler": "^4.4.6",
"#angular/core": "^4.4.6",
"#angular/forms": "^4.4.6",
"#angular/http": "^4.4.6",
"#angular/platform-browser": "^4.4.6",
"#angular/platform-browser-dynamic": "^4.4.6",
"#angular/router": "^4.4.6",
"#ngrx/effects": "^4.0.5",
"#ngrx/router-store": "^4.0.4",
"#ngrx/store": "^4.0.3",
"#ngrx/store-devtools": "^4.0.0",
"#types/source-map": "0.5.0",
"body-parser": "^1.18.2",
"bootstrap": "4.0.0-beta.2",
"chai": "^3.5.0",
"core-js": "^2.4.1",
"cucumber": "^2.3.0",
"express": "^4.16.1",
"font-awesome": "^4.7.0",
"forever-monitor": "^1.7.1",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"primeng": "^4.3.0",
"protractor": "^5.3.0",
"protractor-cucumber-framework": "^4.1.1",
"rxjs": "^5.4.2",
"source-map": "^0.7.1", //
"typescript": "^2.3.4",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.4",
"#angular/compiler-cli": "^4.4.6",
"#angular/language-service": "^4.4.6",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"#types/cucumber": "0.0.38",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"ngrx-store-freeze": "^0.2.0",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.5.3",
"chai-as-promised": "^6.0.0",
"cucumber-html-reporter": "^0.5.2"
}
}
Note: added "#types/source-map": "0.5.0",and "source-map": "^0.7.1", in package.json
Once you added then please run npm install then try serving using ng serve
Hope it should work

Preact.js - How to start a auto re run server like React.js does

I would like to use a development server just like React does with npm start. But, with Preact when I use the same command it opens a static server and I have to restart it manually each time when I want to see some change in my project.
My package.json:
{
"name": "yagoazedias-site",
"version": "0.0.0",
"description": "Ready-to-go Preact starter project powered by webpack.",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
"start": "serve build -s -c 1",
"prestart": "npm run build",
"build": "cross-env NODE_ENV=production webpack --progress",
"prebuild": "mkdirp build && ncp src/assets build/assets",
"test": "npm run -s lint && jest --coverage",
"test:watch": "npm run -s test -- --watch",
"lint": "eslint src test"
},
"keywords": [
"preact",
"boilerplate",
"webpack"
],
"license": "MIT",
"author": "Jason Miller <jason#developit.ca>",
"jest": {
"setupFiles": [
"./test/setup.js"
],
"testURL": "http://localhost:8080",
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
"^react$": "preact-compat",
"^react-dom$": "preact-compat"
},
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
]
},
"devDependencies": {
"autoprefixer": "^7.0.1",
"babel": "^6.5.2",
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.2",
"babel-jest": "^20.0.0",
"babel-loader": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.24.0",
"babel-runtime": "^6.11.6",
"chai": "^4.0.2",
"copy-webpack-plugin": "^4.0.1",
"core-js": "^2.4.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.1.0",
"eslint-plugin-jest": "^20.0.0",
"eslint-plugin-react": "^7.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^4.0.3",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"offline-plugin": "^4.7.0",
"postcss-loader": "^2.0.3",
"preact-jsx-chai": "^2.2.1",
"raw-loader": "^0.5.1",
"regenerator-runtime": "^0.10.3",
"replace-bundle-webpack-plugin": "^1.0.0",
"script-ext-html-webpack-plugin": "^1.3.4",
"sinon": "^2.1.0",
"sinon-chai": "^2.9.0",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.1",
"url-loader": "^0.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
"preact": "^8.1.0",
"preact-compat": "^3.15.0",
"preact-render-to-string": "^3.6.0",
"preact-router": "^2.5.1",
"promise-polyfill": "^6.0.2",
"proptypes": "^1.0.0",
"serve": "^6.0.0"
},
"main": "webpack.config.babel.js",
"directories": {
"test": "test"
}
}
Relevant links:
https://preactjs.com/
https://github.com/developit/preact
Use the dev script instead?
$ npm run dev
Your start script is doing serve build -s -c 1. React CRA's start script will boot up a webpack dev server which is what your dev script is doing.
npm start is short for npm run start. npm run <command> is just a small proxy that looks up the different commands you have listed in package.json.
Read more about npm scripts here.

Categories

Resources