Suppose we have these internal/private NPM packages:
config
student-ui -- package includes some UI components related to students
course-ui -- package includes some UI components related to courses / classes
student-ui / package.json
{
"dependencies": {
"course-ui": "^1.0.0"
},
"peerDependencies": {
"config": "^1.0.0"
}
}
course-ui / package.json
{
"dependencies": {
"student-ui": "^1.0.0"
},
"peerDependencies": {
"config": "^1.0.0"
}
}
So the dependency tree looks like this:
student-ui <--> course-ui
| |
|--> config <--|
"Why does course-ui need a reference to student-ui?"
Suppose that when you view a course you can also view a list of students, so you need to use the StudentApi to make some API call, then display the list in a StudentList component -- all things owned by student-ui.
Supposed we do a major upgrade to config so now it's at 2.0.0. When we go to install the new version in student-ui, we can't because the peer dependency for course-ui requires version 1.x.
So, we need to update course-ui first -- but the same issue occurs, since it references student-ui.
We can fix this by adding overrides to student-ui / package.json just so we can build the package, so now the JSON looks like:
{
"dependencies": {
"course-ui": "^1.0.0"
},
"peerDependencies": {
"config": "^1.0.0"
},
"overrides": {
"course-ui": {
"config": "#config"
}
}
}
This should allow student-ui to publish a new package, and then we can update config and student-ui within course-ui, and remove the overrides.
But, there's got to be a better way, right?
I need to install my local package in my react-native project.
I install the package using npm i /path-to-folder command
But i get this error Unable to resolve module #babel/runtime/helpers/interopRequireDefault
local package package.json
{
...
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/runtime": "^7.19.4",
"react": "^18.1.0",
"react-native": "^0.70.1",
"react-native-svg": "^13.2.0"
}
}
project's metro-config.js
resolver: {
nodeModulesPaths: [packagePath],
},
watchFolders: [packagePath],
In my application's package.json:
"dependencies": {
"axios": "0.21.2",
....
},
"resolutions": {
"axios": "0.24.0"
},
"scripts": {
"preinstall": "npx npm-force-resolutions",
...
}
However, the 'axios' version that is installed is 0.21.2. I would expect to be 0.24.0. What am I missing? When doing that for nested dependencies, they are forced to use the version defined in resolutions rather than this defined in their package.json. Why it is not the case with the app's package.json?
In package.json add something like this to resolve any grapahql package (replace with your package of issue) to the specified version.
"resolutions": {
"graphql": "^15.8.0",
"**/graphql": "^15.8.0"
},
I'm getting this Postcss warning:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)
But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.
I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.
This is my package.json
{
"name": "vip-english-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#dzangolab/vue-accordion": "^1.2.0",
"#nuxtjs/axios": "^5.13.6",
"express": "^4.17.1",
"googleapis": "^91.0.0",
"vue-carousel": "^0.18.0",
"vue-check-view": "^0.3.0",
"vue-gapi": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^1.3.0",
"core-js": "^3.19.1",
"nuxt": "^2.15.8",
"nuxt-windicss": "^2.0.12"
}
}
Do anyone have any idea?
Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.
I'm using the following dependencies
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
In nuxt.config.js, under the build options, add the following as shown below. That worked for me.
build: {
postcss: null,
}
Hope it helps
PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).
just add to nuxt.config.js
build: {
postcss: null,
loaders: {
vue: {
prettify: false
}
}
}
I'm using nuxt 2.15.8 & having the same issue.
The following command & config will supress the warning.
npm i -D #nuxt/postcss8 #nuxtjs/style-resources
In nuxt.config.js, edit/add:
buildModules: [
'#nuxtjs/style-resources',
'#nuxt/postcss8',
],
build: {
postcss: {
plugins: {
},
preset: {
}
}
}
In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)
build: {
postcss: {
preset: {
autoprefixer: {
overrideBrowserslist: ['last 3 versions', '> 1%']
}
}
}
}
After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.
Editing the .browserlistrc file did not help.
For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else
I have installed waypoints with using bower. I can see that there is a folder for shortcuts inside of its /lib folder, containing the shortcuts for infinite.js inview.js and sticky.js. My question is how I can actually access them in my project using bower.
I am using gulp to package all of my JavaScript for this project, so I am using "main-bower-files" to compile all of the library javascript files into a single file.
I have modified the bower.json so that waypoints will use the jquery version by doing the following
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": "lib/jquery.waypoints.js"
}
}
But I do not know how I can include the /shortcuts/inview.js using this method. Is it possible to use npm or bower to get access to these files?
Should be able to just add it to "main" I would think:
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": [
"lib/jquery.waypoints.js",
"lib/shortcuts/sticky.js"
]
}
}