I'm developing a module that uses Vue and Vuetify. They are peer dependencies because if they're not, I will have two instances of Vue, which is bad (one in the main app, and one in the module).
My problem is I want to use ESLint with Vue and Vuetify plugins, but ESLint seems to need Vue and Vuetify as real dependencies. If not, I've got the following error message when linting:
Error: Failed to load plugin 'vuetify' declared in '.eslintrc.js': Cannot find module 'vuetify/es5/components/VGrid/VContainer'
eslint-plugin-vuetify needs the vuetify package for its grid-unknown-attributes rule.
The solution is to install the peer dependencies. With NPM 7+, the peer dependencies are automatically installed. For earlier NPM versions or Yarn users, the peer dependencies must be manually installed, which can be done with this command (using the npm-install-peers package):
npx npm-install-peers
Related
I have a library that uses npm packages that I want as peer dependencies where the app would have to install them (eg. axios, react, react-dom). The goal is to avoid having libraries add to overall bundle size of the app.
Should I add these only under "peerDependencies" or is it okay to add it to "dependencies" as well? I thought it would be good to remove them from "dependencies" just to be sure that they don't get installed on top of what the app already has. However, if I exclude them from "dependencies" then my library tests start to fail because they are only peer dependencies and npm didn't install them.
I thought of installing them manually or adding them as devDependencies just for the purpose of running tests, but I think there has to be a better way. If I add both "dependencies" and "peerDependencies" does npm actually ignore the same dependencies in peerDepenedencies?
I am using https://reactnative.dev/docs/environment-setup 0.64
I npm install #walletconnect/client
put below import in App.js
import WalletConnect from "#walletconnect/client";
after npx react-native run-ios and got below error:
error: Error: While trying to resolve module `crypto` from file `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/#pedrouid/iso-crypto/dist/cjs/helpers/env/node.js`, the package `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/index.js`. Indeed, none of these files exist:
I tried to remove node_modules folder and npm install again but still get the same error.
I am sure that it is thrown by #walletconnect/client because when I removed
import WalletConnect from "#walletconnect/client";
then the error gone
crypto is a built in Node module, which isn't available in React Native, as iOS/Android apps don't run with a Node runtime - only web apps do.
There are a few ways to solve this problem, all of them fairly hacky.
One way is to replace the crypto module with a React Native native module that does the same thing. React-native-crypto is the package used by create-react-native-dapp (https://www.npmjs.com/package/create-react-native-dapp) to integrate with WalletConnect: https://www.npmjs.com/package/react-native-crypto
To get this integration working, note that you'll need to be able to link modules and run rn-nodeify, as it mentions in the instructions on that npm package:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
If you're using Expo, note that you'll need to eject Expo before this can work.
Another hacky workaround is to run WalletConnect in a WebView using react-native-webview. There's an old but working example of this that you can just use to plug and play WalletConnect without requiring linking that you can get here: https://github.com/cawfree/react-native-walletconnect
Note that that repo is archived and effectively hardcoded to WalletConnect version 1.0.0, but it's a pretty simple codebase - you can just effectively copy and paste its code and update it to the latest version of WalletConnect to get it working with a later version if desired.
As a final note, there are multiple ways to get node modules running in React Native on top of rn-nodeify. If you'd like to explore other methods of getting node modules running, here's a quick rundown of other possibilities: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd
Each time I run quasar dev this message appears.
The installation is pretty standard with pwa template.
These dependencies were not found:
quasar-extras/material-icons/material-icons.css in ./.quasar/client-entry.js
quasar-extras/roboto-font/roboto-font.css in ./.quasar/client-entry.js
quasar-framework/dist/quasar.ie.polyfills.js in ./.quasar/client-entry.js
To install them, you can run: npm install --save quasar-extras/material-icons/material-icons.css quasar-extras/roboto-font/roboto-font.css quasar-framework/dist/quasar.ie.polyfills.js
if you are using quasar-cli, firstly delete it due to quasar-cli doesn't include quasar-extras built-in. You can see this with running quasar info. after deleting quasar-cli please install
npm i -g #quasar/cli
then run
quasar dev
with this way error should be gone.
I think the quasar-cli should be tagged deprecated already. To solve this problem I simply remove the global installation, used the vite setup and currently I am running the quasar commands using npx quasar
When I type
npm install bootstrap
I got this error:
ERROR Failed to compile with 4 errors 21:39:34
These dependencies were not found:
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue in ./pages/Index.1.vue
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue in ./pages/Index.vue
To install them, you can run: npm install --save !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue
These relative modules were not found:
* ../.nuxt/components/Footer in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.vue* ../.nuxt/components/Footer.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.1.vue
What do I do?
The first part means you are missing some loaders that WebPack needs to bundle your styles.
Try running npm install --save vue-style-loader css-loader for that. It will install those two loaders.
These relative modules were not found: signals something else in your Index page, where you are trying to use the Footer component, but failed to import it or register it correctly. Have a look at the Vue Docs about registering your components.
I'm new to jspm, transitioning from npm-only. I have one fundamental question. I have some dependencies in the package.json, and I runned jspm init, which created a nice jspm config.js file. My question is, what it the point of installing these packages from jspm (via jspm install ...)? Why not just install them through npm?
More specifically, in my package.json, what's the difference between putting these packages inside dependencies: {} vs inside jspm.dependencies: {}
Assuming that you are building a webapp jspm is more suitable for managing your frontend dependencies than npm. I think for a webapp npm only makes sense when used together with browserify. One key benefit of jspm is that you can load your dependencies using SystemJS & the ES6 Module Loader Polyfill.
This enables you to load the dependencies in the browser using the ES6 module syntax.
E.g.:
import 'jquery';
Keep in mind that jspm is ment to be used for your frontend dependencies.
For your dependencies used for the build process you should keep using npm.