I recently started using NVM but doing so inadvertently broke my Gatsby site dependencies, specifically the Sharp dependency. I'm using Node 10.16.0, but I think the error was caused by running an install with Node 12.
The issue is that some of my modules are not being imported properly - specifically typography.js, but I think the problem is with the Sharp package. I was having build problems on Netlify until I cleared the cache and rebuilt, and now everything works in deployment. The issue is something being cached on my local machine I think.
So I've tried the following:
deleting the package-lock.json
deleting node_modules and running npm install or yarn install
Deleting the cache and public folders in my project dir
None of these has worked so far.
Here's the package.json:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.19",
"#fortawesome/free-brands-svg-icons": "^5.9.0",
"#fortawesome/free-solid-svg-icons": "^5.9.0",
"#fortawesome/react-fontawesome": "^0.1.4",
"#glidejs/glide": "^3.3.0",
"babel-plugin-styled-components": "^1.10.0",
"bootstrap": "^4.3.1",
"express": "^4.17.1",
"gatsby": "^2.8.5",
"gatsby-background-image": "^0.2.74",
"gatsby-image": "^2.1.2",
"gatsby-plugin-express": "^1.1.6",
"gatsby-plugin-manifest": "^2.1.1",
"gatsby-plugin-offline": "^2.1.1",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sharp": "^2.1.3",
"gatsby-plugin-styled-components": "^3.0.7",
"gatsby-plugin-typography": "^2.2.13",
"gatsby-remark-copy-linked-files": "^2.0.13",
"gatsby-remark-images": "^3.0.14",
"gatsby-remark-prismjs": "^3.2.10",
"gatsby-source-contentful": "^2.0.67",
"gatsby-source-filesystem": "^2.0.38",
"gatsby-transformer-remark": "^2.3.12",
"gatsby-transformer-sharp": "^2.1.21",
"prismjs": "^1.16.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"react-glider": "^1.1.2",
"react-helmet": "^5.2.1",
"react-pure-lifecycle": "^3.0.0",
"react-scroll": "^1.7.11",
"react-typography": "^0.16.19",
"sharp": "^0.22.1",
"styled-components": "^4.2.1",
"typography": "^0.16.19",
"typography-theme-lawton": "^0.16.19"
},
"devDependencies": {
"gatsby-plugin-remove-trailing-slashes": "^2.0.11",
"nodemon": "^1.19.1",
"prettier": "^1.17.1"
},
It would be great to have any suggestions about how I can reset the dependencies...Many thanks.
Related
Enviroment
React Native CLI 0.63.2
Windows 10 x64 bit
Node v14.4.0
Packages (package.json):
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-native-fontawesome": "^0.2.5",
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/datetimepicker": "^3.0.4",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.7",
"#react-native-community/picker": "^1.8.1",
"#react-native-firebase/app": "^8.4.6",
"#react-navigation/native": "^5.7.1",
"#react-navigation/stack": "^5.7.1",
"md5": "^2.3.0",
"moment": "^2.27.0",
"react": "16.13.1",
"react-hook-form": "^6.4.1",
"react-native": "0.63.2",
"react-native-code-push": "^6.3.0",
"react-native-code-push-saga": "^1.0.1",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.1",
"react-native-safe-area-context": "^3.1.7",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "^2.9.0",
"react-native-snap-carousel": "^4.0.0-beta.5",
"react-native-svg": "^12.1.0",
"react-native-ui-lib": "^5.15.0",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"#babel/core": "7.10.5",
"#babel/runtime": "7.10.5",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "16.13.1"
}
Problem
Whenever I import #react-native-community/netinfo or #react-native-community/async-storage it seems to work fine on Android Emulator. However if I test it live on my iPhone 11 device it crashes almost instantly. All I have to do in order to reproduce the problem is only to import the packages and run it on a iOS device.
I currently don't have the ability to debug for iOS devices as I do not own a MacOS. Is this a known bug or is there a solution to this?
Both packages are from React Native community maybe there is a pattern there. Maybe the packages are affecting other packages causing a crash.
npm ERR! Merge conflict detected in your package.json.
npm ERR! Please resolve the package.json conflict to retry the command:
I have tried the npm-merge-driver but still coming the same error.
The problem is that you might have duplicate keys in your package.json file.
To fix it:
1. Open your package.json trace it for duplicate keys. To give you some ease start with the dependencies and devDependencies key.
2. If you find duplicate keys compare and copy and paste the dependencies that are not duplicated into one key and delete the rest.
3. Run npm install
Example:
At the start, I had this.
"dependencies": {
"#react-navigation/material-bottom-tabs": "^6.1.1",
"#react-navigation/material-top-tabs": "^6.1.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"axios": "^0.26.0",
"eject": "expo eject"
},
"dependencies": {
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-pager-view": "5.4.9",
"react-native-paper": "^4.11.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"twrnc": "^3.0.2"
},
after I compared and remove duplicate dependencies and one of the keys. I got this:
"dependencies": {
"#react-navigation/material-bottom-tabs": "^6.1.1",
"#react-navigation/material-top-tabs": "^6.1.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"axios": "^0.26.0",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-pager-view": "5.4.9",
"react-native-paper": "^4.11.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"twrnc": "^3.0.2"
},
You can also check your dev dependencies as well.
To avoid this problem in the future do not open your package.json file while installing packages.
Error: Cannot find module 'sharp'
Require stack:
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-plugin-manifest\safe-sharp.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-plugin-manifest\gatsby-node.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\resolve-module-exports.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bootstrap\index.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\commands\develop.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-cli\lib\create-cli.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby-cli\lib\index.js
- D:\Marketing\sbj-react\suburban\node_modules\gatsby\dist\bin\gatsby.js
1) npm install
2) npm also check with npm install --unsafe perm
3) npm start
4) npm install sharp
But still have same problem with me please resolve my question.
This is my package.json
{
"name": "Ashish",
"description": "Ashish Group Project",
"version": "1.0.0",
"author": "AshishBhangade <ashishbhangade#gmail.com>",
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-styled-components": "^1.10.0",
"base-64": "^0.1.0",
"bcryptjs": "^2.4.3",
"bootstrap": "^4.1.3",
"gatsby": "^2.0.53",
"gatsby-background-image": "^0.9.11",
"gatsby-graphiql-explorer": "^0.2.29",
"gatsby-image": "^2.0.20",
"gatsby-plugin-compression": "0.0.1",
"gatsby-plugin-compression-v2": "^0.1.0",
"gatsby-plugin-drift": "^1.0.0",
"gatsby-plugin-facebook-analytics": "^2.0.2",
"gatsby-plugin-facebook-pixel": "^1.0.3",
"gatsby-plugin-facebook-sdk": "^1.0.6",
"gatsby-plugin-google-analytics": "^2.0.9",
"gatsby-plugin-google-gtag": "^1.0.8",
"gatsby-plugin-google-tagmanager": "^2.0.7",
"gatsby-plugin-hotjar": "^1.0.1",
"gatsby-plugin-manifest": "^2.0.9",
"gatsby-plugin-netlify": "^2.0.6",
"gatsby-plugin-offline": "^2.0.21",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-robots-txt": "^1.4.0",
"gatsby-plugin-sass": "^2.0.5",
"gatsby-plugin-sentry": "^1.0.0",
"gatsby-plugin-sharp": "^2.0.12",
"gatsby-plugin-sitemap": "^2.0.4",
"gatsby-plugin-styled-components": "^3.0.4",
"gatsby-plugin-zopfli": "^1.0.2",
"gatsby-source-apiserver": "^2.1.4",
"gatsby-source-filesystem": "^2.0.8",
"gatsby-transformer-sharp": "^2.1.8",
"jquery": "^3.3.1",
"logrocket": "^1.0.6",
"logrocket-react": "^4.0.1",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"node-sass": "^4.10.0",
"perm": "^1.0.0",
"react": "^16.6.3",
"react-bootstrap": "^0.32.4",
"react-bootstrap-time-picker": "^1.0.3",
"react-datepicker": "^2.0.0",
"react-device-detect": "^1.11.14",
"react-dom": "^16.6.3",
"react-ga": "^2.5.6",
"react-helmet": "^5.2.0",
"react-input-mask": "^2.0.4",
"react-number-format": "^4.0.6",
"react-otp-input": "^0.3.1",
"react-phone-input-2": "^2.11.0",
"react-places-autocomplete": "^7.2.1",
"react-popper": "^1.3.2",
"react-scroll": "^1.7.12",
"react-select": "^3.0.8",
"react-slick": "^0.23.2",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.2.0",
"styled-components": "^4.1.3",
"universal-cookie": "^3.0.7"
}
}
I had the same problem and solved with
npm install sharp
I was getting the same error on a mac and this fixed my issue
Basically:
delete node_modules folder
xcode-select --install
close and open terminal
yarn install (I assume it would also work with npm install)
npm rebuild --verbose sharp
this single line command helped me. This was a magic.
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.
So my issues are mostly the same as posts from here. It starts to explain all the issues and steps needed for windows users and node-gyp problems.
As I am sure you can imagine, I ran into the same problems as everyone else on windows trying to run 'npm install'. The culprit is node-gyp. I followed ToTallNate's solution step by step multiple times and still can't get node-gyp to do a rebuild. I have uninstalled and reinstalled everything in the correct order only God know's how many times. My Python is the correct V and is in my PATH as well as node. I've tried on VS2010 and 2015 express with no luck. I am preparing to restore my image to day one and start over again with the installs (it's a new desktop we just started working on so no big losses here)
To give you a quick background My client handed me a stack of Reactjs components that were developed on os x and linux and is pretty much forcing me to use this stack on a windows environment because it uses a tech stack approved for use by this company. The dev team I am working with is all on windows 7 enterprise
My questions are:
How many npm modules/packages depend on node-gyp? And just what is node-gyp doing for them? can someone please elaborate/point me in the right direction. I've seen the npm documentation a million times so that won't help me right now...
Is there a better set of modules I should be using with windows from npm?
Can anyone recommend a better way to get started with a reactjs/flux project on windows? Would grunt work better than gulp?
I'm relatively new to working with this frontend stack so thank you for your patience.
Here is the package.json they want me to work with:
`"config": {
"server_port": "4040",
"browser_sync_port": "8080",
"livereload_port": "35729"
},
"scripts": {
"start": "gulp",
"build": "gulp build --prod",
"test": "./node_modules/karma/bin/karma start karma.conf.js",
"ci-test": "./scripts/ci-test.sh"
},
"devDependencies": {
"aliasify": "^1.4.0",
"async": "^0.9.0",
"axios": "^0.5.4",
"body-parser": "^1.9.2",
"browser-sync": "^1.3.7",
"browserify": "5.10.0",
"chai": "^1.9.1",
"component-mocker": "^0.2.0",
"compression": "^1.0.11",
"connect-livereload": "0.4.0",
"envify": "~3.0.0",
"express": "~4.8.5",
"falafel": "^0.3.1",
"glob": "^4.0.5",
"gulp": "~3.8.7",
"gulp-arialinter": "0.0.1",
"gulp-autoprefixer": "^2.0.0",
"gulp-concat": "^2.4.3",
"gulp-if": "^1.2.1",
"gulp-jshint": "~1.8.4",
"gulp-livereload": "2.1.0",
"gulp-nodemon": "^2.0.2",
"gulp-notify": "^1.4.0",
"gulp-react": "^2.0.0",
"gulp-sass": "^1.3.3",
"gulp-scss-lint": "^0.1.4",
"gulp-shell": "~0.2.9",
"gulp-streamify": "0.0.5",
"gulp-strip-line": "0.0.1",
"gulp-tar": "^1.3.2",
"gulp-template": "^3.0.0",
"gulp-uglify": "~0.3.0",
"gulp-util": "^3.0.0",
"gulp-watch": "~0.6.9",
"jshint-stylish": "~0.4.0",
"karma": "^0.12.21",
"karma-bro": "^0.7.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.1.4",
"karma-coverage": "^0.2.6",
"karma-firefox-launcher": "^0.1.3",
"karma-mocha": "^0.1.9",
"karma-phantomjs-launcher": "^0.1.4",
"karma-safari-launcher": "^0.1.1",
"karma-spec-reporter": "0.0.13",
"merge-stream": "~0.1.5",
"messageformat": "~0.2.1",
"mkdirp": "~0.5.0",
"mocha": "^1.21.4",
"nopt": "^3.0.1",
"react-tools": "^0.12.0",
"reactify": "^0.15.2",
"request": "^2.47.0",
"requirefrom": "~0.2.0",
"rewireify": "~0.0.9",
"rimraf": "~2.2.8",
"run-sequence": "~0.3.6",
"sinon": "^1.10.3",
"sinon-chai": "^2.5.0",
"s-ui-build": "0.1.14",
"s-ui-icon": "^0.1.9",
"through": "~2.3.4",
"vinyl-source-stream": "^0.1.1",
"watchify": "^1.0.2"
},
"dependencies": {
"accounting": "^0.4.1",
"classnames": "^1.1.4",
"console-shim": "^1.0.3",
"es5-shim": "^4.0.1",
"inherits": "^2.0.1",
"jquery": "~1.11.1",
"lodash": "~2.4.1",
"moment": "2.7.0",
"react": "~0.12.0",
"react-router": "~0.11.6",
"uuid": "^2.0.1"
},
"aliasify": {
"aliases": {}
}
}
`