How do you prevent expo from using devDependencies? - javascript

I have a project where I put a React Context code into a local module and included it using
nom install directory
The package.json itself has the following
"devDependencies": {
"#types/react": "^16.14.2",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"axios": "^0.21.1",
"eslint": "^7.18.0",
"eslint-plugin-prettier": "^3.3.1",
"expo-secure-store": "^10.0.0",
"prettier": "2.2.1",
"react": "^16.13.1",
"react-native": "^0.63.4",
"typedoc": "^0.20.19",
"typedoc-plugin-mermaid": "^1.3.0",
"typescript": "^4.1.3"
},
"peerDependencies": {
"axios": "axios^0.17.0 || axios^0.19.0 || ^0.21.1",
"expo-secure-store": "^9.0.0 || ^10.0.0",
"react-native": "^0.62.0 || ^0.63.0"
},
"dependencies": {},
What happens is if I install the local module, Expo will be building it and at runtime there would be two Reacts.
My workaround for now is to do a npm prune --production on the folder. Is there some sort of setting I am missing so I can avoid having to do the workaround?

Related

Dependencies were not found despite existing in package.json

EDIT: This question is related to #56558281 however it's two years old and hasn't been answered
I'm refactoring a few apps we have and tried moving a block of JS code from one NestJs app into another Nuxt app. After installing the dependencies I get this error:
These dependencies were not found: friendly-errors 11:04:41
friendly-errors 11:04:41
* child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.js friendly-errors 11:04:41
* fs in ./node_modules/google-auth-library/build/src/auth/googleauth.js, ./node_modules/google-p12-pem/build/src/index.js and 4 others
friendly-errors 11:04:41
To install them, you can run: npm install --save child_process fs
I tried running npm install --save child_process fs without luck
Tried deleting node modules and clearing the cache then reinstalling with no luck
and I tried adding this block as per this answer without luck either
"browser":{
"child_process": false
}
Package.json
...
"dependencies": {
"#nuxt/types": "^2.14.5",
"#nuxtjs/apollo": "^4.0.1-rc.5",
"#nuxtjs/axios": "^5.12.5",
"#nuxtjs/gtm": "^2.2.2",
"#nuxtjs/vuetify": "^1.11.0",
"apollo-link-http": "^1.5.17",
"child_process": "^1.0.2",
"filestack-js": "^3.16.0",
"googleapis": "^39.2.0",
"google-auth-library": "^3.1.2",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
"isomorphic-fetch": "^3.0.0",
"net": "^1.0.2",
"nuxt": "^2.0.0",
"nuxt-i18n": "^6.12.2",
"nuxt-webfontloader": "^1.1.0",
"pluralize": "^8.0.0",
"readline": "^1.3.0",
"tls": "^0.0.1",
"typescript": "^3.0.0",
"url-slug": "^2.2.0",
"vue": "^2.6.11",
"vue-apollo": "^3.0.7",
"vue-infinite-loading": "^2.4.5",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"#mdi/font": "^5.3.45",
"#nuxt/typescript-build": "^2.0.3",
"#nuxtjs/eslint-config-typescript": "^3.0.0",
"#nuxtjs/eslint-module": "^2.0.0",
"#types/pluralize": "0.0.29",
"#vue/test-utils": "^1.0.0-beta.27",
"babel-eslint": "^10.0.1",
"babel-jest": "^26.0.1",
"deepmerge": "^4.2.2",
"eslint": "^7.9.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"fibers": "^5.0.0",
"jest": "^26.0.1",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass": "^1.26.11",
"sass-loader": "^8.0.2",
"typed-graphqlify": "^2.2.3",
"vue-class-component": "^7.1.0",
"vue-jest": "^4.0.0-beta.3",
"vue-property-decorator": "^9.0.0"
},
"browser":{
"child_process": false
}

Error to load scss to Vue3 TypeError: this.getOptions is not a function

I try to load scss file to the Vue3 project.
I use:
"#vue/cli": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.0.11",
"sass": "^1.32.13",
"sass-loader": "^11.1.1",
"vue": "^3.0.11",
"vue-resource": "^1.3.4",
"webpack": "5.0.0"
and I have still the sale problem:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/dev/src/my-app/node_modules/sass-loader/dist/index.js:25:24)
All is up to date and I have removed my node_modules and reinstaled them. Ihave removed also node-sass so I have only sass package.
I had the same mistake today
"dependencies": {
"core-js": "^3.12.1",
"vue": "^3.0.11",
"vuetify": "^2.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-plugin-eslint": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.0.11",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.9.0",
"sass": "^1.34.1",
"sass-loader": "^10.1.1",
"vue-loader-v16": "^16.0.0-beta.5.4"
},
change from "sass-loader": "^12.0.0" to "sass-loader": "^10.1.1"
run:
rm -rf node_modules
rm package-lock.json
npm install
for me it solved

Babel-Loader Error Plugin/Preset files are not allowed to export objects, only functions

After updating all my outdated npm packages to #latest, my electron app fails to start, giving the error
ERROR in ./src/index.js
[0] Module build failed (from ./node_modules/babel-loader/lib/index.js):
[0] Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/nyxynyx/foobar/node_modules/babel-preset-stage-0/lib/index.js
Any idea what went wrong? Thank you everyone!
.babelrc
{
"presets": ["env", "stage-0", "react"],
"plugins": [
"babel-plugin-styled-components",
"react-hot-loader/babel",
["transform-class-properties", { "loose": true }]
]
}
package.json (dependencies & devDependencies)
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.21",
"#fortawesome/free-solid-svg-icons": "^5.10.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^4.3.1",
"css-loader": "^3.2.0",
"electron-log": "^3.0.7",
"electron-updater": "^4.1.2",
"file-loader": "^4.2.0",
"firebase": "^6.3.4",
"fix-path": "^2.1.0",
"json-loader": "^0.5.7",
"lodash": "^4.17.15",
"menubar": "^6.0.7",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-redux": "^7.1.0",
"react-redux-firebase": "^2.3.0",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"style-loader": "^1.0.0",
"styled-components": "^4.3.2",
"typeface-open-sans": "0.0.75",
"url-loader": "^2.1.0"
},
"devDependencies": {
"concurrently": "^4.1.1",
"devtron": "^1.4.0",
"electron": "^6.0.1",
"electron-builder": "^21.2.0",
"electron-debug": "^3.0.1",
"electron-devtools-installer": "^2.2.4",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-import-resolver-webpack": "^0.11.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"express": "^4.17.1",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.12.10",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.1",
"webpack-dev-middleware": "^3.7.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.1"
},
Using node v12.6.0 on Mac OS X Mojave 10.14.5
I am moving my answer from comment due to lack of space there :)
Try using new packages for babel-core, babel-register and presets, replacing the old ones since they are depricated (babel-core, babel-presets-env, etc):
#babel/core - https://www.npmjs.com/package/#babel/core,
#babel/presets-env - https://babeljs.io/docs/en/babel-preset-env,
#babel/presets-react - https://babeljs.io/docs/en/babel-preset-react,
#babel/presets-stage-0 https://babeljs.io/docs/en/babel-preset-stage-0,
#babel/polyfill - https://babeljs.io/docs/en/babel-polyfill and
#babel/register - https://babeljs.io/docs/en/babel-register.
Then try deleting package.lock, and running again npm i . If that is not helping you can also try deleting node_modules folder, and running npm i again
babel-preset-env / babel-preset-react packages are deprecated.
use #babel/preset-env and #babel/preset-react packages.
And do the following change in .babelrc :
"presets": ["#babel/env", "#babel/react"]
That is due to outdated babel packages being used. The babel project, just like most other active Javascript projects, have moved on to using scope packages. Hence, the package names starts with #babel
Check this to fix issue

ReactNative: babelHelpers.typeof is not a function

On an existing project, that have worked fine over many months and which is already in the AppStores for both iOS and Android, we've got now a break on development with this error:
babelHelpers.typeof is not a function
All what we've done was to try to upgrade an RN-0.26-based Application to a newer version. But even after a rollback the error remains.
We cleared watchman, resetted the packager multiple times. Nothing helped here.
Our package.json looks like this:
{
"version": "0.0.1",
"private": true,
"scripts": {
"reset": "rm -rf node_modules/ && npm cache clear && watchman watch-del-all && npm i",
"start": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"testflight": "fastlane beta",
"android-device": "adb reverse tcp:8081 tcp:8081 && react-native run-android",
"lint": "jslint **.js",
"test": "mocha test/",
"generate-apk": "cd android && ./gradlew assembleRelease && open ./app/build/outputs/apk/",
"install-apk": "cd android && ./gradlew installRelease",
},
"devDependencies": {
"jshint": "latest",
"mocha": "latest",
"eslint": "^2.3.0",
"eslint-config-standard": "^5.1.0",
"eslint-config-standard-react": "^2.3.0",
"eslint-plugin-promise": "^1.1.0",
"eslint-plugin-react": "^4.1.0",
"eslint-plugin-react-native": "^1.0.0",
"eslint-plugin-standard": "^1.3.2"
},
"dependencies": {
"apsl-react-native-button": "^2.5.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"es6-promisify": "^4.1.0",
"fetch-stuff": "^1.0.1",
"iap-receipt-validator": "^1.0.2",
"immutable": "^3.8.1",
"js-sha256": "^0.3.0",
"keymirror": "^0.1.1",
"lodash.difference": "^4.3.0",
"lodash.find": "^4.4.0",
"lodash.partialright": "^4.1.4",
"lodash.remove": "^4.5.0",
"lodash.shuffle": "^4.0.0",
"lodash.uniq": "^4.3.0",
"moment": "^2.14.1",
"normalizr": "^2.1.0",
"react": "15.0.2",
"react-native": "0.26.2",
"react-native-animatable": "^0.6.1",
"react-native-app-intro": "^1.0.2",
"react-native-billing": "^1.3.0",
"react-native-code-push": "^1.12.2-beta",
"react-native-code-push-saga": "^1.0.0",
"react-native-console-panel": "0.0.9",
"react-native-debug-stylesheet": "^0.1.1",
"react-native-drawer": "file:./custom_modules/react-native-drawer",
"react-native-extra-dimensions-android": "^0.17.0",
"react-native-fabric": "^0.2.3",
"react-native-fetch-blob": "^0.4.2",
"react-native-fs": "^1.4.0",
"react-native-gifted-spinner": "0.0.4",
"react-native-google-analytics-bridge": "^2.1.0",
"react-native-htmlview": "^0.5.0",
"react-native-i18n": "0.0.8",
"react-native-image-progress": "^0.5.0",
"react-native-in-app-utils": "^4.0.0",
"react-native-keyboard-aware-scroll-view": "^0.1.0",
"react-native-navbar": "^1.5.0",
"react-native-router-flux": "^3.30.0",
"react-native-search-bar": "^2.11.0",
"react-native-side-menu": "^0.19.0",
"react-native-simple-store": "^1.0.1",
"react-native-sound": "^0.8.3",
"react-native-sqlite-storage": "^2.1.6",
"react-native-swiper": "^1.4.4",
"react-native-vector-icons": "^2.0.2",
"react-redux": "^4.4.5",
"react-timer-mixin": "^0.13.3",
"redux": "^3.5.2",
"redux-form": "^6.0.0-alpha.15",
"redux-logger": "^2.6.1",
"redux-saga": "^0.10.4",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.1",
"rn-viewpager": "^1.1.2",
"rnpm": "^1.7.0",
"tween-functions": "^1.2.0"
}
}
Can anyone help?
The issue happens because either your project (via a custom .babelrc) or one of your dependencies is relying on a es2015 preset that doesn't work with React Native. The reason for that is because it includes transform-typeof-symbol which calls babelHelpers.typeof that is not bundled with React Native.
If you have a custom babelrc - the solution is simple, just remove this preset.
Afterwards, restart packager w/o cache and you should be set.
Note: It maybe one of your dependencies that uses that preset - in such case, there's nothing you can do but try forking it and removing the preset yourself.
A part solution to this is using babel-preset-react-native-stage-0
https://www.npmjs.com/package/babel-preset-react-native-stage-0
There is a PR here to fix this in the react-native codebase: enter link description here

Ember CLI - package.json & bower.json dependencies

I work on an Ember CLI project that has Ember Data declared as a dependency in the the project's package.json and bower.json files respectively. Two different Ember Data versions are declared.
Which dependency takes precedence and why must it be declared in two places?
package.json
{
"devDependencies": {
"active-model-adapter": "1.13.5",
"emberx-select": "1.1.4",
"broccoli-asset-rev": "^2.0.2",
"broccoli-funnel": "^0.2.3",
"ember-cli": "0.2.7",
"ember-cli-app-version": "0.3.3",
"ember-cli-babel": "^5.0.0",
"ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "^1.0.0",
"ember-cli-html5-validation": "0.0.18",
"ember-cli-htmlbars": "0.7.6",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "^1.3.0",
"ember-cli-qunit": "0.3.13",
"ember-cli-rails-addon": "0.0.11",
"ember-cli-sass": "4.0.1",
"ember-cli-uglify": "^1.0.1",
"ember-data": "1.0.0-beta.18",
"ember-disable-proxy-controllers": "^1.0.0",
"ember-export-application-global": "^1.0.2",
"shared": "../shared"
}
}
bower.json
{
"dependencies": {
"ember": "1.13.2",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
"ember-data": "1.13.4",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
"ember-qunit": "0.3.3",
"ember-qunit-notifications": "0.0.7",
"ember-resolver": "~0.1.15",
"jquery": "^1.11.1",
"loader.js": "ember-cli/loader.js#3.2.0",
"qunit": "~1.17.1",
"bourbon": "~4.2.3",
"bitters": "~1.0.0",
"neat": "~1.7.2"
}
}
The dependency in Bower determines which version is used in the built app. I believe the npm package is just there for the development tooling.

Categories