part of my package.json:
"optionalDependencies": {
"cypress": "^8.2.0",
"cypress-commands": "^1.1.0",
"cypress-expect": "^2.4.1",
"cypress-file-upload": "^4.1.1"
},
I know that npm install --no-optional prevents optinal dependencies to be installed locally. But no idea how to pass that flag on Heroku
heroku config:set NPM_CONFIG_OMIT=optional
And this is exactly what it's needed for. We don't want heroku spending time and resource loading and building test packages.
Related
I'm trying to make a build a Docker image of a react application.
Here is the first part of the package.json:
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"eslint": "^7.29.0",
"html-react-parser": "^1.2.7",
"npm": "^6.14.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-input-mask": "^3.0.0-alpha.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"redux": "^4.1.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3",
"web-vitals": "^1.1.2"
},
Here is the Dockerfile:
# pull official base image
FROM node:13.12.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
ARG REACT_APP_BASEURL='https://localhost:8081'
ENV REACT_APP_BASEURL=$REACT_APP_BASEURL
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
# add app
COPY . ./
#EXPOSE
EXPOSE 3000
# start app
CMD ["npm", "start"]
So, I build with the command line:
docker build -f Dockerfile -t api_front .
and I've this error message:
npm WARN read-shrinkwrap This version of npm is compatible with
lockfileVersion#1, but package-lock.json was generated for
lockfileVersion#2. I'll try to do my best with it!
If I check the version of npm with npm -v , I've the latest one (7.19.1)
If I go to the project folder and I run npm install , everything is up-to-date
If I start the application with npm start , everything is ok and the api is running...
What is the problem?
Edit: SOLUTION
I've changed:
FROM node:13.12.0-alpine
to
FROM node:latest
The version of npm (v7.19.1) used to generate the package-lock.json file is newer than the version of npm (v6.14.4) inside the docker image of node 13.12.0.
1: The lockfile version used by npm v5 and v6.
2: The lockfile version used by npm v7, which is backwards compatible to v1 lockfiles.
You can read more about lockfile versions here
You can either upgrade the docker image to use the lastest version or downgrade your npm to generate a compatible package-lock.json
EDIT #1:
You have to replace the first line of your docker file with:
FROM node:16.4.2
When i deploy my app from github.com to heroku. I get the following message error: fsevents not accessible from jest-haste-map.
Could you help me solve this issue.
This is my package.json
{
"name": "app-clean",
"version": "0.1.0",
"private": true,
"main": "index.js",
"dependencies": {
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"json-server": "^0.16.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server db.json -p 5000 -w -d 0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thanks
So it seems that there are some internal dependencies that depend on the fsevents module. The general consensus seems to be to make this dependency optional, which should fix your problem (on Windows at least).
Try:
npm i fsevents#latest -f --save-optional
That fixed the dependency issue for me.
I have the same issue with the GitHub Actions (is being used for style-checking and testing).
The error message appears while executing command npm ci:
fsevents not accessible from jest-haste-map
If I replace the npm ci by npm install, I receive the error about the lockfile version:
This version of npm is compatible with lockfileVersion#1, but package-lock.json was generated for lockfileVersion#2
Therefore, the reason of the issue is upgraded lockfile version to 2.
If you have the same issue, check the npm version (command) and package-lock.json (file). If the "lockfileVersion" is 2, npm must be at least 7.x.
To fix that in GitHub action I added npm-upgrading step. So, my steps looks like:
# ...
steps:
# ...
- name: Upgrade NPM
run: npm install -g npm
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
Thus, if you have issue like "it works on my PC, but does not work in CI/CD runner", try to use described solution.
Try:
Deleting package-lock.json and node_modules
Running npm install locally, which should generate a new package-lock.json
Committing and pushing the new package-lock.json
I usually try this whenever I get strange npm errors like this relating to the dependencies.
I had this problem in bitbucket.org pipelines.
We was using Docker image with Node in version 14.17.0 (npm was included in version 6.14.13).
Updating only npm to version 8.1.3 did not help.
But updating Docker image of Node to new LTS version (16.13.0, with npm 8.1.0) fixed this problem and npm ci started working properly.
I saw this error this week. I changed package versions, then the error has gone. Here are my versions that seem related to this error. I'm not sure this is the correct way to fix it.
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9"
The same issue happen to me when build the package using ./github/worflows
Run npm ci
npm ERR! fsevents not accessible from jest-haste-map
1 - To resolve, I install in my local:
npm i fsevents#latest -f --save-optional
2 - Push the package.json into github again.
The workflows(view from github repository-> tab Actions) is triggered, the result shows the build is success.
So i've tried researching this but none of the solutions are working. I think it's specifically an issue with some of my vue dependencies, potentially vue-loader, but I'm not sure what specifically to do to fix it. I have tried:
deleting node_modules and re-running npm install
npm update
i've tried removing vue-loader completely
tried adding, removing, and updating #vue/component-compiler-utils
tried changing the version of the above to three different things
tried running composer install and composer update
creating a new temp staging branch from master just in case it was some weird git error and building from that
What am I missing here? Every vue component on my staging site returns this same error. The weirdest thing is that the staging server is a direct clone of our production server, where all of this works completely smoothly and i get zero errors.
The Errors:
ERROR in ./resources/assets/js/components/component.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (/var/www/site/node_modules/#vue/component-compiler-utils/dist/parse.js:14:23)
at Object.module.exports (/var/www/site/node_modules/vue-loader/lib/index.js:67:22)
# ./resources/assets/js/app.js 60:29-81
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
I've tried installing these warnings' dependencies as well but still get the same error above, I'm including these because it's what pops up when i run my bash script and run npm install from my staging branch:
npm WARN eslint-plugin-vue#5.2.3 requires a peer of eslint#^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-eslint-parser#5.0.0 requires a peer of eslint#^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
package.json dependencies
"devDependencies": {
"axios": "^0.19.0",
"babel-preset-stage-2": "^6.24.1",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.2.0",
"eslint": "^6.1.0",
"eslint-config-standard": "^13.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.2.3",
"exports-loader": "^0.6.4",
"imports-loader": "^0.7.1",
"jquery": "^3.3.1",
"laravel-mix": "^4.1.2",
"lodash": "^4.17.11",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.10",
"vue": "^2.6.10"
},
"dependencies": {
"#vue/component-compiler-utils": "^3.1.1",
"ajv": "^6.10.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"braces": "^2.3.1",
"es6-promise": "^4.2.6",
"font-awesome": "^4.7.0",
"luxon": "^1.12.1",
"moment": "^2.24.0",
"popper": "^1.0.1",
"popper.js": "^1.14.7",
"sass-loader": "^7.1.0",
"vue-datetime": "^1.0.0-beta.10",
"vue-datetime-picker": "^0.2.1",
"vue-full-calendar": "^2.7.0",
"vue-loader": "^15.8.3",
"vue-router": "^3.0.2",
"vue-template-compiler": "2.6.10",
"vue-wysiwyg": "^1.7.2",
"vuex": "^3.1.0",
"weekstart": "^1.0.0",
"whatwg-fetch": "^2.0.4",
"wkhtmltopdf": "^0.3.4"
}
}
I'm thinking it might have something to do with a specific version of a dependency? But nothing i've been trying from other stack overflow threads or google searches has been helping
Let me know if there's any code missing that may help
I had exacly the same problem and just figured it out, I hope this helps someone.
First I changed the vue template compiler to:
"vue-template-compiler": "2.6.11"
and the I also had to change the vue version to the latest realese, in my case:
"vue": "2.6.11"
Try running this command
npm update vue-template-compiler
Try this:
npm remove vue-template-compiler
npm remove vue
then
npm install vue-template-compiler#2.6.11
npm install vue#2.6.11
This will match the version of vue and vue-template compiler on your project.
The version of "vue-template-compiler" should match the version of "vue". If the dependency is declared as:
"vue": "^2.6.11"
Npm will possibly install vue#2.6.12, which is mismatched with the version of "vue-template-compiler". As of what updates between 2.6.11 and 2.6.12, you can refer to the release notes.
I had the same issue and I ran the command: npm update vue-template-compiler. All solved.
For yarn:
yarn remove vue vue-template-compiler
yarn add vue vue-template-compiler
yarn upgrade seemed to have errors.
If your project worked before, but then a subsequent install caused errors, another thing you can try instead of upgrading vue-template-compiler is to pin the vue build dependency versions in your package.json by using exact version numbers in dependencies or devDependencies, and in overrides to force sub-dependencies to their minimum specific versions where they were surely known to work.
I am new to react native.
I have setup project properly and able to run it in emulator.
Now I want to use react-redux for my project. When I am running npm install --save react-redux I am getting following error.
+-- react-redux#5.0.1
`-- UNMET PEER DEPENDENCY redux#^2.0.0 || ^3.0.0
npm WARN react-redux#5.0.1 requires a peer of redux#^2.0.0 || ^3.0.0 but none was installed.
I am using Windows + Android Emulator, got so many solution but all IOS based.
I have also tried to put manually.
My package.json file:
"dependencies": {
"react": "15.4.1",
"react-native": "0.40.0",
"react-redux": "^5.0.1",
"redux": "^3.5.2"
},
Realized it's not error, it is just missing dependent module.
Working fine after running npm install --save redux
It is also required two more dependency modules:
npm install --save redux-logger
npm install --save redux-thunk
All the examples I've seen online of using the two together rely on Bower being installed globally, but that can't work on Heroku - Bower needs to be a dependency of the app, so listed in package.json.
My package.json looks like this:
{
"repository": {
},
"dependencies": {
"babel-brunch": "^6.0.0",
"brunch": "^2.0.0",
"clean-css-brunch": ">= 1.0 < 1.8",
"css-brunch": ">= 1.0 < 1.8",
"javascript-brunch": ">= 1.0 < 1.8",
"uglify-js-brunch": ">= 1.0 < 1.8",
"sass-brunch": "^1.9.2",
"bower": "1.7.0"
},
"scripts": {
"postinstall": "./node_modules/bower/bin/bower install"
}
}
And my bower.json like this:
{
"name": "Kaderi",
"dependencies": {
"bootstrap-sass": "~ 3.3.6"
}
}
However, with bower loaded in package.json, I always get the following JS error when building assets:
./node_modules/detective/node_modules/acorn/dist/acorn.js:1747
throw err;
^
SyntaxError: Unexpected token (2:10)
at Parser.pp.raise (./node_modules/detective/node_modules/acorn/dist/acorn.js:1745:13)
at Parser.pp.unexpected (./node_modules/detective/node_modules/acorn/dist/acorn.js:2264:8)
at Parser.pp.semicolon (./node_modules/detective/node_modules/acorn/dist/acorn.js:2243:59)
at Parser.pp.parseExpressionStatement (./node_modules/detective/node_modules/acorn/dist/acorn.js:2677:8)
at Parser.pp.parseStatement (./node_modules/detective/node_modules/acorn/dist/acorn.js:2462:160)
at Parser.pp.parseBlock (./node_modules/detective/node_modules/acorn/dist/acorn.js:2692:21)
at Parser.pp.parseStatement (./node_modules/detective/node_modules/acorn/dist/acorn.js:2443:19)
at Parser.pp.parseTopLevel (./node_modules/detective/node_modules/acorn/dist/acorn.js:2379:21)
at Object.parse (./node_modules/detective/node_modules/acorn/dist/acorn.js:101:12)
at parse (./node_modules/detective/index.js:9:18)
at Function.exports.find (./node_modules/detective/index.js:44:15)
at module.exports (./node_modules/detective/index.js:23:20)
at ./node_modules/deppack/index.js:83:12
at tryToString (fs.js:414:3)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:401:12)
I don't know if this is being caused by Bower itself, or bootstrap-sass/jquery (installed via Bower).
If I use a global install of Bower, the problem does not appear, but my assets cannot be compiled by Brunch on Heroku (due to missing Bower dependencies).
In fact the problem is identical to this Brunch installed with phoenix app doesn't work with bower assets and I am also using Phoenix, but for me the problem is not resolved just by upgrading Phoenix (and I don't know how that would affect Bower/Brunch anyway).
What am I missing in this tangled web of JavaScript frameworks?
edit: Using nodejs v5.1.1 and npm v3.3.12, both locally and on Heroku.