I'm trying to deploy my app to Google Cloud, but I still receive error:
ERROR: (gcloud.app.deploy) Error Response: [9]
Application startup error:
> biurovue#1.0.0 start /app
> node build/dev-server.js
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'chalk' .....
My app is built with nodejs, back end is in Express and Sequalizer and front end is in vuejs.
I'm calling
gcloud int
gcloud app deploy
and then, after few minutes error above occures.
I've tried several times:
npm install chalk
also, I've removed node_modules folder and call npm install from the scratch. Didn't help.
My package.json is following:
{
"name": "biurovue",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Shark <arek.shark#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js -- single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"#okta/jwt-verifier": "0.0.11",
"axios": "^0.18.0",
"cors": "^2.8.4",
"each-async": "^1.1.1",
"easy-async": "^1.0.0",
"finale-rest": "^1.0.6",
"indent-string": "^4.0.0",
"sequelize": "^4.37.6",
"sqlite3": "^4.1.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuedraggable": "^2.23.0"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"chalk": "^2.4.2",
"chromedriver": "^2.33.1",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"cross-env": "^5.0.5",
"cross-spawn": "^5.1.0",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"inject-loader": "^3.0.1",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"nightwatch": "^0.9.16",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"phantomjs-prebuilt": "^2.1.15",
"rimraf": "^2.6.2",
"selenium-server": "^3.6.0",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"sw-precache-webpack-plugin": "^0.11.4",
"uglify-es": "^3.1.3",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
What can be a problem? How to solve? diagnose errors like this?
Thanks.
Move them into dependencies. devDependencies should really only be used, as its name suggests, for development. Suppose you have a package which in turn has multiple dependencies. Suppose you are using mochaJS, chaiJS and sinonJS to achieve full test coverage. The end-user installing your package most likely wouldn't want to install the testing and/or documentation frameworks you used as well. Thus, those frameworks would be placed on devDependencies. In this case, because chalk and shellJS are required at runtime they would have to be placed in dependencies.
Summary: Use dependencies for packages required at runtime and devDependencies for packages required only to develop ( testing frameworks, linting, etc. )
Related
I am working on a KeystoneJS project, currently running in development mode on NodeJS 12.14.0. About a week or ten days ago I noticed that even though I changed some environment variables in .env the changes were not reflected at run-time. I've had to actually introduce new variables for the changes to take effect.
I've done searches (using WebStorm and VSC) in my code for the old information, but it only appears in my debug logs. That is to say, if the old value of my env var ANIMAL was 'rooster' and I've changed it to 'lizard', 'rooster' does not appear anywhere in my code. And yet ANIMAL keeps having the value rooster at runtime. So that I have to introduce a new variable, NEW_ANIMAL=lizard to make any changes work.
This does not happen with all env variables -- for instance, I just added a new one, TEST=1, ran the app, stopped, changed it to TEST=2, and the change worked fine. I do not see a pattern in what variables are affected.
I'm launching the project through Keystone's launch script, and I'm using TypeScript. My launch script is
"dev": "tsc && cross-env NODE_ENV=development DISABLE_LOGGING=true keystone --entry=tsout/index.js dev --port=4545"
dotenvis being loaded at the top of the entry point to the project, /index.ts,
require('dotenv').config();
which is run each time the project is restarted (for the record, I'm using Babel to be able to use import instead of require throughout the project, but I can't imagine that matters).
I just spent half an hour with another dev here going over this and neither of us could figure it out (actually we were trying to track down a weird bug and it turned out it was because even though the .env variable had been changed, the app was still reading the old value).
If anyone has ever encountered anything like this before -- or has any clues on how to figure it out -- I'd be very grateful.
I include my package.json below. I'm running MacOS 10.14.x and NodeJS 12.14.0, for what it's worth.
{
"name": "#keystonejs/example-projects-blank",
"description": "A blank KeystoneJS starter project.",
"private": true,
"version": "5.0.0",
"author": "The KeystoneJS Development Team",
"repository": "https://github.com/keystonejs/keystone.git",
"homepage": "https://github.com/keystonejs/keystone",
"license": "MIT",
"engines": {
"node": ">=10.0.0"
},
"scripts": {
"dev": "tsc && cross-env NODE_ENV=development DISABLE_LOGGING=true keystone --entry=tsout/index.js dev --port=4545",
"build": "cross-env NODE_ENV=production keystone build",
"start": "cross-env NODE_ENV=production keystone start",
"keystone": "keystone upgrade-relationships --index=tsout/index.js"
},
"dependencies": {
"#apollo/react-hooks": "^3.1.5",
"#arch-ui/fields": "^3.0.1",
"#arch-ui/layout": "^0.2.13",
"#arch-ui/typography": "^0.0.17",
"#emotion/core": "^10.0.28",
"#emotion/styled": "^10.0.27",
"#keystonejs/adapter-mongoose": "^8.1.0",
"#keystonejs/app-admin-ui": "^6.0.0",
"#keystonejs/app-graphql": "^5.1.7",
"#keystonejs/app-next": "^5.1.2",
"#keystonejs/app-static": "^5.1.2",
"#keystonejs/auth-password": "^5.1.7",
"#keystonejs/field-content": "^6.0.0",
"#keystonejs/fields": "^10.0.0",
"#keystonejs/fields-markdown": "^5.1.10",
"#keystonejs/fields-wysiwyg-tinymce": "^5.2.7",
"#keystonejs/file-adapters": "^6.0.2",
"#keystonejs/keystone": "^9.0.0",
"#keystonejs/list-plugins": "^5.1.4",
"#keystonejs/oembed-adapters": "^5.1.4",
"#tinymce/tinymce-react": "^3.6.0",
"#zeit/next-sass": "^1.0.1",
"apollo-boost": "^0.4.8",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.9",
"apollo-fetch": "^0.7.0",
"apollo-link-http": "^1.5.17",
"apollo-upload-client": "^13.0.0",
"app-root-path": "^3.0.0",
"axios": "^0.19.2",
"connect-mongo": "^3.2.0",
"cron": "^1.8.2",
"cross-env": "^7.0.0",
"date-fns": "^1.30.1",
"disqus-react": "^1.0.7",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-fileupload": "^1.1.6",
"express-session": "^1.17.1",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.3",
"isomorphic-unfetch": "^3.0.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"loglevel": "^1.6.7",
"moment": "^2.24.0",
"multer": "^1.4.2",
"next": "^9.3.6",
"next-with-apollo": "^5.0.1",
"node-cron": "^2.0.3",
"node-fetch": "^2.6.0",
"node-sass": "^4.14.1",
"normalize-scss": "^7.0.1",
"ramda": "^0.27.0",
"react": "^16.13.1",
"react-apollo": "^3.1.5",
"react-dom": "^16.13.1",
"reading-time": "^1.2.0",
"require-directory": "^2.1.1",
"sanitize-html": "^1.23.0",
"string-strip-html": "^4.4.3",
"ts-node": "^8.10.1",
"typescript": "^3.8.3",
"uuid": "^7.0.2",
"validator": "^13.0.0",
"winston": "^3.2.1"
},
"devDependencies": {
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#types/express-fileupload": "^1.1.3",
"#types/node": "^13.13.5",
"#types/react": "^16.9.35",
"#types/winston": "^2.4.4",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"cz-conventional-changelog": "3.2.0",
"eslint-plugin-react-hooks": "^4.0.0",
"pino": "^6.2.1",
"pino-pretty": "^4.0.0"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
I am using Laravue Dashboard based on Laravel and Vue.js, running on an online server, not localhost, it is a fresh install, no edits has been conducted.
My Problem is :
After running npm run watch/dev or even npm run production, vendor.js is about 26MB which I find unreasonably big.
I have tried to run npm run report but nothing shows, no errors or data.
Webpack bundle analyzer plugin is configured but stats.json is empty.
Here are dependencies from package.json:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"resources/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-eslint": "^10.0.2",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"compression-webpack-plugin": "^2.0.0",
"cross-env": "^3.2.3",
"eslint": "^5.16.0",
"eslint-loader": "^2.2.1",
"eslint-plugin-vue": "^5.2.3",
"husky": "^3.0.2",
"laravel-mix": "^4.1.2",
"laravel-mix-eslint": "^0.1.3",
"lint-staged": "^9.2.1",
"resolve-url-loader": "^2.3.1",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"svg-sprite-loader": "^4.1.3",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.1",
"webpack-bundle-analyzer": "^3.4.1"
},
"dependencies": {
"axios": "^0.18.1",
"camelcase": "^5.3.1",
"clipboard": "^2.0.4",
"core-js": "^3.1.4",
"driver.js": "^0.9.7",
"dropzone": "^5.5.1",
"echarts": "^4.1.0",
"element-ui": "^2.11.1",
"file-saver": "^2.0.1",
"fuse.js": "^3.4.5",
"js-cookie": "^2.2.0",
"jsonlint": "^1.6.3",
"jszip": "^3.2.2",
"node-sass": "^4.12.0",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^3.0.0",
"screenfull": "^4.2.1",
"sortablejs": "^1.8.4",
"tui-editor": "^1.4.5",
"vue": "2.6.10",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.12.0",
"vue-router": "^3.0.7",
"vue-splitpane": "^1.0.4",
"vuedraggable": "^2.23.0",
"vuex": "3.1.0",
"xlsx": "^0.14.4"
}
In the official laravue demo https://laravue.dev/, vendor.js is ~4MB.
I cannot find any reason for this issue, would somebody offer any advise please?
Solved
After hours of inspecting, I found out that " npm run production " wasn't finishing because of memory shortage, this is why no errors were returned, the process was killed at some point with no messages.
simply restarted server and re-ran command.. Worked like magic.
May be if you remove some package that is not needed, will reduce vendor file size more.
After I reinstalled my Windows and cloning project from GitHub, I am getting npm Error: EPERM: operation not permitted D:\System Volume Information
In terminal I run:
webpack-dev-server --open --config webpack.dev.js
And it compiles all good but when I open my browser on http://localhost:8000/ it says:
Internal Server Error
When I check terminal I can see:
i 「wdm」: Compiled successfully.
Error: EPERM: operation not permitted, stat 'D:\System Volume Information'
So my webpack compiles all good, the problem is when I try to open it at localhost:8000
Already tried
removing node_modules
npm cache clean --force
npm install npm#6.4.0 & npm#6.3.0
reinstalling node.js
using port 9000
running terminal as administrator
reinstalling webpack-dev-server
disabling kaspersky antivirus
deleting files from C:\Users\.config\configstore\
{
"name": "site",
"version": "1.0.0",
"main": "webpack.base.js",
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js "
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-syntax-optional-catch-binding": "^7.0.0",
"#babel/plugin-transform-async-to-generator": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/template": "^7.1.2",
"#babel/types": "^7.1.3",
"adjust-sourcemap-loader": "^1.2.0",
"autoprefixer": "^9.3.1",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.1.3",
"debug": "^4.1.0",
"detect-libc": "^1.0.3",
"glob": "^7.1.3",
"gsap": "^2.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin-pngquant": "^5.1.0",
"jquery": "^3.3.1",
"locate-path": "^3.0.0",
"lodash": "^4.17.11",
"lodash._baseassign": "^3.2.0",
"lodash._basecopy": "^3.0.1",
"lodash.isarguments": "^3.1.0",
"lodash.keys": "^4.2.0",
"ms": "^2.1.1",
"npm": "^6.5.0",
"only": "0.0.2",
"owl.carousel": "^2.3.4",
"pngquant-bin": "^3.1.1",
"popper.js": "^1.14.4",
"pretty-error": "^2.1.1",
"raw-loader": "^0.5.1",
"svg-url-loader": "^2.3.2",
"toposort": "^2.0.2",
"uglifyjs-webpack-plugin": "^2.0.1",
"update": "^0.7.4",
"util-promisify": "^2.1.0",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.5",
"#babel/parser": "^7.1.3",
"#babel/preset-env": "^7.1.6",
"#webpack-cli/init": "^0.1.2",
"babel-loader": "^8.0.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"critters-webpack-plugin": "^2.0.1",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-critical-webpack-plugin": "^2.1.0",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.9.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.26.0",
"webpack-manifest-plugin": "^2.0.4",
"webpack-merge": "^4.1.4"
},
"description": ""
}
Versions
npm -v 6.5.0
node -v 11.4.0
Windows 10.0.17134
I solve this issue by opening Visual Studio Code in Admin Mode.
Actually problem was because webpack-dev-server watched wrong files.
Fix
Change your public path of webpack-dev-server and it should work
I have deployed django app on heroku, and everything is fine, no errors, etc. I'm using react on frontend, and I want to do npm install, gulp build so I can configurate my app properly.
I can not run heroku run npm install, all I have is bash: npm: command not found, and I suppose that is ok because I need to trigger it somehow when he is building the app on the server, so I've modify my package.json like this:
{
"name": "Test app",
"version": "1.0.0",
"description": "Testing",
"main": "bundle.js",
"scripts": {
"postinstall": "npm install"
},
"dependencies": {
"bootstrap": "^3.3.7",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"engines": {
"node": "8.0.0",
"npm": "5.0.4"
},
"author": "",
"license": ""
}
But that still does not trigger npm install process on deployment, so can any one help me understand how can I configurate this properly?
This is my Procfile:
web: python manage.py runserver 0.0.0.0:$PORT --noreload
worker: python worker.py
Heroku supports different server-side languages via buildpacks:
Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno. Buildpacks are composed of a set of scripts, and depending on the programming language, the scripts will retrieve dependencies, output generated assets or compiled code, and more.
Since the Python part of your application seems to be installing correctly Heroku must be detecting it as a Python application (because it includes a requirements.txt file) or you have configured it as one manually. In many cases a single buildpack is sufficient.
However, since you are also using Node.js you should enable a second buildpack:
There are many scenarios in which a single buildpack is not sufficient when building an application. This includes cases when you need to:
Run a buildpack for each language your app uses. For example, run a JavaScript buildpack for assets and a Ruby buildpack for your application.
The basic flow looks like this (using the Heroku CLI on your development machine):
heroku buildpacks:set heroku/python
heroku buildpacks:add --index 2 heroku/nodejs
The links I provided above contain many more details. I recommend reading both of them in their entirety.
Just did a refresh of my computer but now Im having trouble running my code....
When running "npm start" I get the following error:
> ERROR in ./~/react-dom/lib/CSSPropertyOperations.js Module not found:
> Error: Can't resolve 'fbjs/lib/memoi zeStringOnly' in
> 'C:\Code\Project.Web\node_modules\react-dom\lib'
> # ./~/react-dom/lib/CSSPropertyOperations.js 20:24-61
> # ./~/react-dom/lib/ReactDOMComponent.js #
> ./~/react-dom/lib/ReactDefaultInjection.js #
> ./~/react-dom/lib/ReactDOM.js # ./~/react-dom/index.js #
> ./source/components/index.js # multi
> (webpack)-dev-server/client?http://0.0.0.0:30 00
> webpack/hot/dev-server ./index.js
I tried to update all packages but got same error...
Here is my package.json file:
{
"name": "homecore.web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dashboard -t 'HomeCore' -- webpack-dev-server --colors --no-info",
"build": "rm -rf ./build && NODE_ENV=\"production\" webpack",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - React-Redux Boilerplate' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0",
"css-loader": "0.28.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"postcss-loader": "^1.3.3",
"prepush": "^3.1.11",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"alt": "0.18.6",
"alt-utils": "^1.0.0",
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.1.0",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"semantic-ui-react": "^0.68.2",
"whatwg-fetch": "^2.0.3"
},
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
Ok so after a lot of googleing, I found a work around. Im still not sure why i get this error.
But according to this post there is a way to add alias in webpack.
So i added this to my webpack.config.js
var alias = {};
alias['fbjs/lib/memoizeStringOnly'] = '../node_modules/fbjs/lib/memoizeStringOnly';
module.exports = {
.
.
alias : alias,
.
.
}
and now it works!
But, and now Im guessing, some package must be broken trying to access this component from the wrong location
Within the last week or so, I've run into the same issue but with react-dom#15.4.2 instead of react-dom#15.5.4. What I think I've found to be the issue is that Webpack isn't able to resolve the fbjs dependency within the react-dom/node_modules directory.
For me, I was able to solve the issue by including the fbjs package as an explicit dependency in the package.json. Now instead of the project-level dependency linking to the peer of react-dom, the module in react-dom links to the project-level module.
Now, I don't think this is necessarily the right solution, especially if you allow minor version bumps with '~' and '^' in your package.json, but because we are only updating our dependencies when we need to by hand, our team is comfortable specifying the version of fbjs.
Snippet of our package.json:
"dependencies": {
"assets-webpack-plugin": "3.5.1",
"babel-core": "6.24.0",
"babel-loader": "6.4.1",
"babel-preset-es2015": "6.24.0",
"babel-preset-react": "6.23.0",
"css-loader": "0.26.4",
"del": "2.2.2",
"es6-promise": "4.1.0",
"fbjs": "0.8.12",
"file-loader": "0.10.1",
"flux": "2.1.1",
"highcharts": "5.0.10",
"imports-loader": "0.7.1",
"jquery": "2.1.3",
"keymirror": "0.1.1",
"lodash": "3.10.1",
"lodash.clonedeep": "4.5.0",
"material-design-icons": "2.2.3",
"material-ui": "0.17.1",
"moment": "2.18.1",
"object-assign": "4.1.1",
"postcss-loader": "1.3.3",
"rc-progress": "2.1.0",
"react": "15.4.2",
"react-addons-perf": "15.4.2",
"react-data-grid": "1.0.85",
"react-dom": "15.4.2",
"react-highcharts": "11.5.0",
"react-router": "3.0.3",
"react-tap-event-plugin": "2.0.1",
"sass-loader": "6.0.3",
"style-loader": "0.13.2",
"superagent": "3.5.2",
"underscore": "1.8.3",
"url-loader": "0.5.8",
"webpack": "2.4.1"
},
I ran into this error as well after uninstalling a package. It seems fbjs was somehow removed as well, even though other packages still depended on it.
I fixed it by manually installing fbjs with npm install fbjs --save