Testing with React - reactjs

I can't seem to test my files anymore.
I "npm i react react-dom react-addon-test-utils"
but even after all those installs,
it tells me i'm missing something
i even tried to install both devdep. and dep.
module.js:339
throw err;
^
Error: Cannot find module 'react-dom/lib/ReactTestUtils'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/react-addons-test-utils/index.js:1:80)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at /Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/react-compat.js:92:17
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/react-compat.js:146:5)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/Utils.js:29:20)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/MountedTraversal.js:32:14)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/ReactWrapper.js:23:25)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/enzyme/build/index.js:15:21)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (AddNewSong.spec.js:5:28)
at Module._compile (module.js:425:26)
at loader (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:128:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/babel-register/lib/node.js:138:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at /Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/lib/mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/lib/mocha.js:216:14)
at Mocha.run (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/lib/mocha.js:468:10)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/kanakamusicR_A/node_modules/mocha/bin/_mocha:403:18)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:136:18)
at node.js:972:3
npm ERR! Test failed. See above for more details.
this is the package.json
{
"name": "KMR",
"version": "1.0.0",
"main": "app.js",
"scripts": {
"start": "node app.js",
"build": "webpack",
"watch": "webpack --watch",
"test": "mocha --require test/helpers/setup.js",
"lint": "eslint --ignore-path .gitignore --cache ./",
"cover": "nyc --reporter=lcov --reporter=text --reporter=html --require babel-register --extension .jsx npm test"
},
"license": "MIT",
"dependencies": {
"axios": "0.9.1",
"bluebird": "^3.4.6",
"errorhandler": "^1.4.3",
"express": "4.13.4",
"express-favicon": "^2.0.0",
"express-jwt": "^5.1.0",
"lodash": "4.6.1",
"method-override": "^2.3.6",
"mysql": "^2.11.1",
"node-ensure": "0.0.0",
"pg": "^6.1.0",
"pg-hstore": "^2.3.2",
"pg-promise": "^5.3.4",
"react": "0.14.7",
"react-dom": "0.14.7",
"react-modal": "^1.5.2",
"react-redux": "4.4.0",
"react-responsive": "^1.2.5",
"react-router": "2.0.0",
"redux": "3.3.1",
"sequelize": "^2.1.3",
"sequelize-cli": "^2.4.0",
"sqlite3": "^3.1.6",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.0"
},
"devDependencies": {
"babel-core": "6.5.2",
"babel-loader": "6.2.2",
"babel-polyfill": "6.7.4",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-register": "6.5.2",
"chai": "3.5.0",
"enzyme": "2.0.0",
"eslint": "2.2.0",
"eslint-config-standard": "5.1.0",
"eslint-config-standard-jsx": "1.1.1",
"eslint-config-standard-react": "2.3.0",
"eslint-loader": "1.3.0",
"eslint-plugin-promise": "1.0.8",
"eslint-plugin-react": "4.1.0",
"eslint-plugin-standard": "1.3.2",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-sass": "^2.3.2",
"jsdom": "8.0.4",
"json-loader": "0.5.4",
"livereload": "^0.6.0",
"mocha": "2.4.5",
"nyc": "6.0.0",
"react": "^0.14.7",
"react-addons-test-utils": "^15.4.1",
"react-dom": "^0.14.7",
"sinon": "^1.17.3",
"supertest": "^2.0.1",
"webpack": "1.13.2"
},
"directories": {
"test": "test"
},
"keywords": [
"react",
"workshop",
"intro",
"redux"
]
}

I found a work around for this from here
make sure that your app contains follow dependencies all in the same
version in package.json
react-addons-test-utils
react
react-dom
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7",
or upgrade to latest versions of above dependencies

For anyone who has run into this problem lately, note that react-addons-test-utils have been deprecated and all the test methods have been moved into react-dom.
So the fix looks like:
- Remove react-addons-test-utils from package.json and run npm update.
- Change the import statements to reflect the updates. For example:
import { renderIntoDocument } from 'react-dom/test-utils';
instead of the old
import { renderIntoDocument } from 'react-addons-test-utils';

Related

How to use snap SVG in react with next and TS?

Issue
Hello,
I am trying to use SnapSVG in my react project, but I cannot get it to run in the first place. Could someone help me with the proper settings? I am not very familiar with webpack so detailed instructions would be very much appreciated.
error
index.js?46cb:602 Uncaught ReferenceError: window is not defined
at Object.<anonymous> (FILEPATH/node_modules/snapsvg/dist/snap.svg.js:485:3)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.snapsvg (FILEPATH/.next/server/pages/index.js:1291:18)
at
**webpack_require**
(FILEPATH/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/components/domain/top-first-view/index.tsx:9:65)
import in React components
import * as Snap from 'snapsvg';
package.json
"dependencies": {
"next": "^13.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sanitize.css": "^13.0.0",
"sass": "^1.56.1"
},
"devDependencies": {
"typescript": "^4.8.4",
"imports-loader": "^4.0.1",
"snapsvg": "^0.5.1",
"#types/snapsvg": "^0.5.2",
"cjs-loader": "^0.1.0",
...
},
"volta": {
"node": "18.6.0",
"yarn": "1.22.19"
}
what I've tried so far
I have tried using imports-loader as is discussed in this Github thread, but this resulted in a new error.
new error after webpack settings
Uncaught Error: ENOENT: no such file or directory, open 'FILEPATH/.next/server/pages/index.js'
at Object.openSync (node:fs:594:3)
at Object.readFileSync (node:fs:462:35)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1143:18)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.requirePage (FILEPATH/node_modules/next/dist/server/require.js:88:12)
at <unknown> (FILEPATH/Documents/GitHub/toda-web-art/node_modules/next/dist/server/load-components.js:37:73)
at async Object.loadComponents (FILEPATH/node_modules/next/dist/server/load-components.js:37:26)
webpack config in next.config.js
webpack(config) {
config.module.rules.push(
{
test: require.resolve('snapsvg'),
use: 'imports-loader?this=>window,fix=>module.exports=0',
},
...
Thank you!

Can't build next.js application on production server with varying error messages with webpack

I am facing a problem with my next.js application.
In fact, I'm trying to switch my application to my production server. Before that, I tested it on my local computer, where I could build it.
Then I moved it to my pre-production server, where again I was able to build it.
However, when I run the "yarn build" command on the production server, an error is generated.
Which is :
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
> Build error occurred
{ Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/var/www/vhosts/paplar-auto.fr/web/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
So I tried a "yarn add webpack" and then made a new build, and I then got this error :
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
> Build error occurred
{ Error: Cannot find module 'next-compose'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/var/www/vhosts/paplar-auto.fr/web/next.config.js:5:17)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Whereas, I already have next-compose in my devDepencies (here is my package.json) :
{
"name": "web-gp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"build-static": "next build && next export",
"start": "next start -p 8000",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"lint": "eslint .",
"build:svg": "svgr -d components/icons svg/"
},
"dependencies": {
"#artsy/fresnel": "^1.1.0",
"#bootstrap-styled/v4": "^3.4.0",
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#react-hook/window-size": "^3.0.6",
"#svgr/cli": "^5.3.1",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"axios": "^0.19.2",
"babel-plugin-module-resolver": "^4.0.0",
"bootstrap": "^4.4.1",
"bootstrap-styled": "^2.7.2",
"core-js": "2.6.10",
"dotenv": "^8.2.0",
"dotenv-webpack": "^1.8.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"leaflet": "^1.6.0",
"moment": "^2.26.0",
"next": "9.3.5",
"next-fonts": "^1.0.3",
"next-images": "^1.4.0",
"nextjs-fonts": "^0.22.0",
"node-sass": "^4.14.0",
"query-string": "^6.13.1",
"react": "16.13.1",
"react-bootstrap": "^1.0.0",
"react-bootstrap-date-picker": "^5.1.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.13.1",
"react-html-parser": "^2.0.2",
"react-leaflet": "^2.7.0",
"react-leaflet-div-icon": "^1.1.0",
"react-leaflet-universal": "^2.2.1",
"react-loader-spinner": "^3.1.14",
"react-moment": "^0.9.7",
"react-papaparse": "^3.1.1",
"react-responsive": "^8.0.3",
"react-router-dom": "^5.1.2",
"react-select": "^3.1.0",
"react-slick": "^0.26.1",
"slick-carousel": "^1.8.1",
"standard-http-error": "^2.0.1",
"styled-components": "^5.1.0",
"swiper": "^6.0.2",
"webpack": "^5.50.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#storybook/addon-actions": "^5.3.18",
"#storybook/addon-links": "^5.3.18",
"#storybook/addons": "^5.3.18",
"#storybook/preset-typescript": "^3.0.0",
"#storybook/react": "^5.3.18",
"#storybook/theming": "^5.3.18",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7",
"eslint": "6.6.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"fork-ts-checker-webpack-plugin": "^4.1.3",
"next-compose": "^0.0.2",
"ts-loader": "^7.0.1",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "^3.8.3"
},
"eslintConfig": {
"extends": "react-app"
}
}
I have already tried to move the packages mentioned in the errors from devDependencies to dependencies, but it does not change anything.
The errors of the missing packages vary, are not the same. Usually when I pass next-compose from devDependencies to dependencies, it tells me that typescript is missing, and when I then pass typescript from devDependencies to dependencies, it tells me again that next-compose is missing.
Anyway, I don't understand anything, does anyone have any idea what's going on?
Thanks in advance :)

Issue during storybook setup "Cannot find module 'css-loader/lib/getLocalIdent'" in NextJs

I am facing an issue while building my project after storybook setup. I am getting an error in css-loaders that getLocalIdent is missing. This is the exact error
Error
{ Error: Cannot find module 'css-loader/lib/getLocalIdent'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (next.config.js:9:30)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
This is the next config file
Next.config.js
const withSass = require("#zeit/next-sass");
const withCss = require("#zeit/next-css");
const gNextJsAppProperties = require("./next.properties");
const env = process.env.ENV || "local";
const defaultGetLocalIdent = require("css-loader/lib/getLocalIdent");
const localIdentName =
env === "local" || env === "dev"
? "[name]__[local]--[hash:base64:5]"
: "[hash:base64]";
const cssLoaderOptions = {
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
if (loaderContext.resourcePath.includes("node_modules")) {
return localName;
} else {
return defaultGetLocalIdent(
loaderContext,
localIdentName,
localName,
options
);
}
},
localIdentName
};
module.exports = withSass(
withCss({
cssLoaderOptions,
distDir: "dist",
cssModules: true
})
);
This is my package.json file with the dependencies.
Package.json
{
"name": "test",
"dependencies": {
"#zeit/next-sass": "^1.0.1",
"next": "^9.4.4",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass": "^1.29.0"
},
"devDependencies": {
"#storybook/preset-typescript": "^3.0.0",
"#storybook/react": "^6.1.2",
"#types/jest": "^25.2.3",
"#types/node": "^12.12.50",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"babel-loader": "^8.2.1",
"babel-preset-react-app": "^10.0.0",
"body-scroll-lock": "^2.7.1",
"copy-webpack-plugin": "^6.1.0",
"css-loader": "^4.2.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
},
"scripts": {
"storybook": "start-storybook -p 6006 -c .storybook"
}
}
As much as I have checked online most of the places its written that this getLocalIdent has been moved in css-loader but all the solutions suggested are not working for me.
It would be great if someone can suggest a fix for this as I am clueless on how to fix this.

Yarn encore prod failing

Im trying to deploy a symfony application on my Ubuntu server.
Mind the following details.
It is a simple application but some yarn packages seem to be failing.
What can I do?
Im working with Symfony 5.
My package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.30.2",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"node-sass": "^4.14.1",
"popper.js": "^1.16.1",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"add": "^2.0.6",
"copy-webpack-plugin": "^6.0.3",
"sass-loader": "^8.0.0",
"yarn": "^1.22.4"
},
"name": "fluid-cms",
"version": "1.0.0",
"main": "index.js",
"repository": "---",
"author": "---",
"license": "MIT"
}
The following output comes out.
I have tried many things.
Ubuntu 18.04.
alpha#ovhBrains:/var/www/fluid-cms$ sudo yarn encore prod
yarn run v1.22.4
$ /var/www/fluid-cms/node_modules/.bin/encore prod
Running webpack ...
/var/www/fluid-cms/node_modules/copy-webpack-plugin/node_modules/p-limit/index.js:30
} catch {}
^
SyntaxError: Unexpected token {
at NativeCompileCache._moduleCompile (/var/www/fluid-cms/node_modules/v8-compile-cache/v8-compile-cache.js:242:18)
at Module._compile (/var/www/fluid-cms/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/var/www/fluid-cms/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (/var/www/fluid-cms/node_modules/copy-webpack-plugin/dist/index.js:10:38)
at Module._compile (/var/www/fluid-cms/node_modules/v8-compile-cache/v8-compile-
d.
---
Another error:
#symfony/webpack-encore#0.30.2: The engine "node" is incompatible with this module. Expected version ">= 10.13.0". Got "8.10.0"
Once I found out the second error log it was easy to fix.
My nodejs -v was not matching with the requirements.

SyntaxError: Unexpected token :

I am following Angular 2 quickstart here
I am getting following error on npm start:
angular-quickstart/bs-config.js:2
"server": {
^
SyntaxError: Unexpected token :
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
Here is my bs-config.json
{
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
}
}
}
And here is my package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "MIT",
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"#angular/upgrade": "~2.4.0",
"angular-in-memory-web-api": "~0.2.4",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2"
}
}
I've latest node:
node -v
v7.5.0
And I've latest nam:
npm -v
4.1.2
Here is my directory structure:
ls
bs-config.js node_modules npm-debug.log package.json src
bs-config.js should be an JSON bs-config.json object.

Resources