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"
}
}
}
Related
I'm trying to use Node and React together and I'm having a terrible time getting them to play nicely. Any guidance in pointing out what I'm doing wrong would be hugely helpful.
As a precursor, I've already reviewed this question and tried everything I can based on the answers there, but no luck.
Setup
I'm currently running Node version 16.15.1
I've installed React via the instructions found here
Attempt 1
Straight out of the gate, I get this error: Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
index.js is a standard React file. Line 1 starts like this: import React from 'react';
Attempt 2
One of the answers was to add "type": "module" to the package.json file, but that produced this error: ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\path\to\app\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
The lift for me here makes this impractical. I'm using a Node template that has a ton of stuff baked in already...dozens of files, and probably hundreds of 'require' statements. And many the files that were 'required' would need modification to export everything in the right format. It's just...a lot.
Attempt 3
So then I tried to add the module type to the script tag itself, i.e. <script type="module" src="blah">. This produced the following error: Uncaught SyntaxError: Unexpected token '<' (at index.js:9:3).
Attempt 4
Finally, I tried changing the React file from index.js to index.mjs which produced this error: Uncaught SyntaxError: Cannot use import statement outside a module (at index.mjs:1:1).
I've also tried combining the .mjs file extension with adding the type="module" to the script tag with no luck. Any help would be very much appreciated!
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Additional Context
I've started with meanjs.org as the template, but it's several years out of date. I've made updates to get the server running, and have scrubbed Angular out of the public directory, where I installed React in. I can run React by itself without issues, but when I try to add a root element in my node app and include React's index.js file, it most definitely imports the file and that's where it chokes.
Here's my package.json file:
{
"name": "test",
"description": "Test app",
"version": "0.1.0",
"private": false,
"author": "Test",
"license": "MIT",
"repository": {
"type": "git",
"url": ""
},
"engines": {
"node": ">=16.0.0",
"npm": ">=8.0.0"
},
"scripts": {
"update": "npm update && npm prune",
"clean": "rm -rf node_modules/ public/lib/",
"reinstall": "npm cache clean && npm run clean && npm install",
"start": "gulp",
"start:prod": "gulp prod",
"start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
"gulp": "gulp",
"lint": "gulp lint",
"test": "gulp test",
"test:server": "gulp test:server",
"test:server:watch": "gulp test:server:watch",
"test:client": "gulp test:client",
"test:e2e": "gulp test:e2e",
"test:coverage": "gulp test:coverage",
"generate-ssl-certs": "scripts/generate-ssl-certs.sh",
"seed": "gulp seed",
"seed:prod": "gulp seed:prod",
"seed:test": "gulp seed:test",
"snyk-protect": "snyk protect",
"prepare": "npm run snyk-protect"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"acl": "^0.4.11",
"amazon-s3-uri": "0.0.3",
"async": "~2.5.0",
"aws-sdk": "^2.548.0",
"body-parser": "^1.19.0",
"chalk": "~2.1.0",
"compression": "^1.7.4",
"connect-flash": "~0.1.1",
"connect-mongo": "^4.6.0",
"cookie-parser": "^1.4.4",
"del": "~3.0.0",
"eslint-config-airbnb": "~6.0.2",
"express": "^4.17.1",
"express-hbs": "^1.0.5",
"express-session": "^1.17.0",
"generate-password": "~1.3.0",
"glob": "^7.1.4",
"gulp": "^4.0.2",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~4.0.0",
"gulp-concat": "~2.6.1",
"gulp-csslint": "^1.0.1",
"gulp-csso": "^3.0.1",
"gulp-eslint": "^4.0.0",
"gulp-imagemin": "~5.0.0",
"gulp-less": "^4.0.0",
"gulp-load-plugins": "~1.5.0",
"gulp-ng-annotate": "~2.0.0",
"gulp-nodemon": "^2.4.1",
"gulp-refresh": "^1.1.0",
"gulp-rename": "^1.2.3",
"gulp-rev": "~8.0.0",
"gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2",
"helmet": "^3.21.1",
"imagemin-pngquant": "~6.0.0",
"jasmine-core": "~3.0.0",
"lodash": "^4.17.15",
"lusca": "^1.5.2",
"method-override": "^2.3.10",
"mongoose": "^6.4.0",
"morgan": "^1.9.1",
"multer": "^1.3.1",
"multer-s3": "^2.9.0",
"node-sass": "^6.0.0",
"nodemailer": "~4.0.1",
"owasp-password-strength-test": "~1.3.0",
"passport": "~0.3.2",
"passport-facebook": "~2.1.1",
"passport-github": "~1.1.0",
"passport-google-oauth": "~1.0.0",
"passport-linkedin": "~1.0.0",
"passport-local": "~1.0.0",
"passport-paypal-openidconnect": "^0.1.1",
"passport-twitter": "~1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"run-sequence": "~2.1.0",
"sass": "^1.53.0",
"serve-favicon": "^2.5.0",
"snyk": "^1.234.2",
"socket.io": "^2.3.0",
"validator": "~9.4.1",
"web-vitals": "^2.1.4",
"winston": "~2.3.1",
"wiredep": "~4.0.0"
},
"devDependencies": {
"coveralls": "^2.13.3",
"gulp-istanbul": "^1.1.3",
"gulp-mocha": "~3.0.1",
"gulp-protractor": "~4.1.0",
"karma": "6.4.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^1.1.2",
"karma-mocha-reporter": "^2.2.5",
"karma-ng-html2js-preprocessor": "~1.0.0",
"semver": "~5.4.1",
"should": "~11.2.1",
"supertest": "~3.0.0"
},
"snyk": true,
"proxy": "http://localhost:3000"
}
The package.json file from React is unchanged from the original install.
Final note: I'm a self-taught developer. Please be gentle. :)
As can be seen in the image, I always get node.js debugger attached in vscode when run npm run dev is there a way to disable that?
I attached the content of package.json
{
"name": "ff-front",
"version": "0.1.0",
"private": true,
"scripts": {
"lint": "eslint src server --ext .js,.jsx",
"lint:fix": "eslint src server --ext .js,.jsx --fix",
"dev": "next dev",
"build": "next build",
"start": "next start -p 80",
"start:pm2:next": "pm2 start server/babel.js --name ff-front",
"stop:pm2:next": "pm2 delete ff-front",
"deploy": "npm run stop:pm2:next; npm run build && npm run start:pm2:next"
},
"engines": {
"node": ">=14.16.0"
},
"dependencies": {
"#ckeditor/ckeditor5-react": "^3.0.3",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#sosedisverhu/ckeditor5-build-classic": "^23.0.0",
"babel-plugin-inline-react-svg": "^2.0.1",
"body-parser": "^1.19.1",
"body-scroll-lock": "^4.0.0-beta.0",
"classnames": "^2.3.1",
"compression": "^1.7.4",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"date-fns": "^2.28.0",
"eventemitter3": "^4.0.7",
"express": "^4.17.2",
"express-http-proxy": "^1.6.3",
"formik": "^2.2.9",
"helmet": "^4.6.0",
"jsonwebtoken": "^8.5.1",
"md5": "^2.3.0",
"moment-timezone": "^0.5.34",
"mongo-seeding": "^3.7.1",
"mongodb-backup": "1.4.8",
"mongodb-restore": "^1.6.2",
"mongoose": "^6.1.3",
"multer": "^1.4.4",
"next": "12",
"node-schedule": "^2.1.0",
"nodemailer": "^6.7.2",
"nodemon": "^2.0.15",
"pm2": "^5.1.2",
"prop-types": "^15.7.2",
"ramda": "^0.27.1",
"rctx-contextmenu": "^1.3.5",
"react": "^17.0.2",
"react-datepicker": "^4.6.0",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-google-authorize": "^1.0.4",
"react-intl": "^5.13.2",
"react-lazyload": "^3.2.0",
"react-number-format": "^4.9.1",
"react-redux": "^7.2.2",
"react-rnd": "^10.3.5",
"react-scroll": "^1.8.6",
"react-select": "^5.2.2",
"react-sortable-hoc": "^2.0.0",
"react-sortablejs": "^6.0.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rimraf": "^3.0.2",
"sass": "^1.49.7",
"socket.io-client": "^4.4.1",
"sortablejs": "^1.14.0",
"superagent": "^6.1.0",
"superagent-prefix": "^0.0.2",
"tar": "^6.1.11",
"timezones-list": "^3.0.1",
"uniqid": "^5.4.0",
"webp-converter": "^2.3.3",
"yup": "^0.32.11"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"babel-register": "^6.26.0",
"eslint": "^7.21.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.22.0",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0"
}
}
and there is a debug option in package.json
Visual Studio Code is the one attaching the debugger. In settings.json (ctrl+,), search for the following settings and add them to your own user settings.
To disable attachment in vscode's terminal:
// Configures which processes to automatically attach and debug when
// `debug.node.autoAttach` is on. A Node process launched with the `--inspect`
// flag will always be attached to, regardless of this setting.
// - always: Auto attach to every Node.js process launched in the terminal.
// - smart: Auto attach when running scripts that aren't in a node_modules folder.
// - onlyWithFlag: Only auto attach when the `--inspect` is given.
// - disabled: Auto attach is disabled and not shown in status bar.
"debug.javascript.autoAttachFilter": "disabled",
To hide code lens in your package.json:
// Where a "Run" and "Debug" code lens should be shown in your npm scripts.
// It may be on "all", scripts, on "top" of the script section, or "never".
"debug.javascript.codelens.npmScripts": "never",
You may need to kill the terminal and/or restart vscode after saving your settings.
The way I do this is by Press ctrl+shit+p a Dialog will open. Search Toggle Auto Attach and select Disabled.
When you want to debug select Always.
By mistake I pressed "Run and Debug" in VSC and when I went to the Terminal, it showed the commands you mention, after a while of searching the internet, I just closed the Terminal and when I ran it the next day in a new Terminal, it didn't run , later I read on the internet that when you press it once, VSC assumes that you will be doing debugging and that's why it always runs it.
Where I unintentionally pressed.
i killed the terminal
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. )
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