Getting Postcss warning without using it - npm

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

Related

Vite HMR suddenly reloading full app on every minor save in Vue 3

Stack:
Vue 3 (Options API)
Vite
TailwindCSS
Context:
I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire app reloads on every save regardless of what changes, including adding a single whitespace which is removed via auto-format.
New Warning:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
This warning seemingly came out of nowhere and I can't find any information about it online besides a reference to it in the newest Volar relase notes. I've tried downgrading to an older version and then disabling it entirely. This didn't work.
Config
// vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
Note that I use npm run serve which would normally be npm run dev. I swapped them because of muscle memory. This shouldn't be an issue but it's noteworthy.
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.11.0",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}
After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.
you can try Temporarily disable Volar plugin, it won't show waining tip
I also encountered this problem, and then I disabled the volar plug-in so that there is no longer this warning message, but I do not know z there is no harm
Add the following entry to your project's jsconfig.json and you're good to go:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
I think it's better than disabling Volar, especially if it's useful for you, because that's not a bug, but a new feature. Check out the changelog for more info:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md

How to properly install ClassPrivateProperties and ClassPrivateMethods plugins?

Hei,
I updated my npm packages, including parcel, and after the update I could not run my application anymore and keep getting the following error:
🚨 Build failed.
#parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (3:2)
My package.json looks like below:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Klei Rama",
"license": "ISC",
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-private-methods": "^7.13.0",
"#parcel/transformer-sass": "^2.0.0-beta.2",
"parcel": "^2.0.0-beta.2",
"sass": "^1.32.8"
},
"dependencies": {
"fractional": "^1.0.0"
},
"plugins": [
"#babel/plugin-proposal-private-methods",
"#babel/plugin-proposal-class-properties"
]
}
I keep trying to delete node_modules, clear the cache, and delete package.json and then reinstall again but it does not work. I tried to use experimantal versions of parcel such as 2.0.0-beta.1 and 2.0.0-beta.2, but none of these version does not seem to work with experimental phase of babel plugins (class-properties and private-methods) (7.13.0). I was wondering if there is any certain version of babel plugins which can work either with parcel 2.0.0-beta.1 or 2.0.0-beta.2?
Hei you, install babel and the following plugins:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"
]
}
Of course, also, to file .babelrc.

The package at "node_modules/web3-eth-accounts/src/index.js" attempted to import the Node standard library module "crypto"

I'm building a Ethereum ERC20 tokens support wallet in React Native, I have been struggling on this particular issue for the past few days and I hope someone could help.
The package at "node_modules/web3-eth-accounts/src/index.js" attempted
to import the Node standard library module "crypto"
Here is my package.json file.
"dependencies": {
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-web": "^0.11.4",
"socket.io-client": "^2.2.0",
"web3": "1.0.0-beta.34",
"cryptico": "^1.0.2",
"native-base": "2.8.0",
"node-libs-browser": "2.1.0",
"react-native-crypto": "^2.0.0",
"react-native-randombytes": "^2.0.0"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"babel-cli": "6.26.0",
"babel-preset-es2015": "6.24.1"
},
Please advise!
I have followed this link as well, no luck !
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
i have 2 answers for you :)
1) use ethers.js since its rich and have default support for React Native
2) copy shims from link that you provided to your project and import it on App.js file at top so your web3 lib should work
you can use .babelrc file to define optional configuration, First, install the dependencies:
You can try install npm install --save crypto-browserify
Then add plugins config to your .babelrc file:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"root": ["./app"],
"alias": {
"crypto": "crypto-browserify"
}
}]
]
}
and Please import the wallet module.
import crypto from 'crypto'
You can run npm i --save-dev rn-nodeify#latest and rn-nodeify --install "stream"
if not ./node_modules/.bin/rn-nodeify --install "stream"
rn-nodeify will create a shim.js in the project root directory
example
// index.ios.js or index.android.js or App.js
// make sure you use `import` and not `require`!
import './shim.js'
Error

Module not found: Error: Can't resolve 'core-js/es6'

I've got a problem with my build process in relation to my React app.
I always get the following error:
Module not found: Error: Can't resolve 'core-js/es6'
if I use this in a polyfill.js:
import 'core-js/es6';
That is my package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.4.2",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^5.0.2",
"css-hot-loader": "^1.4.4",
"eslint": "5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"react-hot-loader": "4.8.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^3.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-redux": "^6.0.1",
"react-string-replace": "^0.4.1",
"redux": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"scripts": {
"dev": "webpack-dev-server --hot",
"build": "webpack --colors --profile --progress --env.mode production",
"lint": "eslint ./src/ --ext .js,.jsx"
}
}
Can someone help here?
The imports have changed for core-js version 3.0.1 - for example
import 'core-js/es6/array';
and
import 'core-js/es7/array';
can now be provided simply by the following
import 'core-js/es/array';
if you would prefer not to bring in the whole of core-js
I found possible answer. You have core-js version 3.0, and this version doesn't have separate folders for ES6 and ES7; that's why the application cannot find correct paths.
To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.
To downgrade the version, simply run:
npm i -S core-js#2.5.7
In my case, with Angular, this works ok.
Change all "es6" and "es7" to "es" in your polyfills.ts and polyfills.ts (Optional).
From: import 'core-js/es6/symbol';
To: import 'core-js/es/symbol';
After Migrated to New Angular Version or Version changed for core-js, core-js/es6 or core-js/es7 Will not work.
You have to simply replace import core-js/es/ in your polyfills.ts file.
For ex.
import 'core-js/es6/symbol'
to
import 'core-js/es/symbol'
This will work properly.
Change all es6 and es7 to es in your polyfills.ts
example:
import 'core-js/es6/reflect';
becomes
import 'core-js/es/reflect';
If you use #babel/preset-env and useBuiltIns, then you just have to add corejs: 3 beside the useBuiltIns option, to specify which version to use, default is corejs: 2.
presets: [
[
"#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}
]
],
For further details see: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env
Sure, I had a similar issue and a simple
npm uninstall #babel/polyfill --save &&
npm install #babel/polyfill --save
did the trick for me.
However, usage of #babel/polyfill is deprecated (according to this comment) so only try this if you think you have older packages installed or if all else fails.
Ended up to have a file named polyfill.js in projectpath\src\polyfill.js
That file only contains this line: import 'core-js'; this polyfills not only es-6, but is the correct way to use core-js since version 3.0.0.
I added the polyfill.js to my webpack-file entry attribute like this:
entry: ['./src/main.scss', './src/polyfill.js', './src/main.jsx']
Works perfectly.
I also found some more information here : https://github.com/zloirock/core-js/issues/184
The library author (zloirock) claims:
ES6 changes behaviour almost all features added in ES5, so core-js/es6
entry point includes almost all of them. Also, as you wrote, it's
required for fixing broken browser implementations.
(Quotation https://github.com/zloirock/core-js/issues/184 from zloirock)
So I think import 'core-js'; is just fine.
Just change "target": "es2015" to "target": "es5" in your tsconfig.json.
Work for me with Angular 8.2.XX
Tested on IE11 and Edge
I got this error today (13 April 2022) after upgrade core-js version from 2 to 3 and after I tried to find the answer for several Hour, finally I can solved it after update my babel.config.js and make it like this:
Before:
presets: [ "#vue/app" ]
After:
presets: [ [ "#vue/app", { useBuiltIns: "entry" } ] ]
Notes
I'm using Vue in my project
I already try almost all question regarding npm uninstall core-js and tried to re-install it again npm install core-js --save or delete node_modules, package-lock.json, and yarn-lock.json but still failed to solved it
I can solved it if I downgrade core-js version using this line : npm install core-js#2.6.5, but it is not a good solution for long term condition
Explanation for this problem: this problem happens because the path for core-js/es6 in version 3 is already changed to core-js/es that's why your project can't find it the right path for the directory where it pointed to core-js/es6
It is vital that Webpack is able to resolve the import statements prepended to source files by Babel, for example
import "core-js/modules/es.object.freeze.js";
If such an import statement is inserted into a file which does not reside in a package which has core-js as a dependency, then Webpack may not be able to resolve its location on disk, resulting in a ModuleNotFoundError.
The solution for me was to specify the application's node_modules directory in the resolve section of my webpack.config.cjs:
module.exports = {
resolve: {
modules: [
path.join(__dirname, "node_modules"), // Contains core-js.
"node_modules" // Webpack's default.
]
}
}
And of course core-js is listed as a dependency in my application's package.json:
{
"dependencies": {
"core-js": "^3.19.3"
}
}
For Angular 14 I had to run npm i --save core-js
I kept the polyfills the same as in the Amplify docs:
import 'core-js/es/typed-array';
import 'core-js/es/object';

Jest - Unknow "preset" - "jest-react-native"

I'm using the following package.json (according to http://facebook.github.io/jest/docs/tutorial-react-native.html#content):
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
},
"dependencies": {
"react": "^15.3.1",
"react-native": "0.31.0",
},
"devDependencies": {
"babel-jest": "^14.1.0",
"babel-preset-react-native": "^1.9.0",
"jest": "^14.1.0",
"jest-cli": "^13.1.0",
"jest-react-native": "^14.1.3",
"react-test-renderer": "^15.3.1"
},
"jest": {
"globals": {
"__DEV__": true,
"__RCTProfileIsProfiling": false
},
"preset": "jest-react-native"
}
}
But I get the error:
Error: Unknown config option "preset" with value "jest-react-native". This is either a typing error or another user mistake and fixing it will remove this message.
Using Jest CLI v13.2.3, jasmine2, babel-jest
FAIL __tests__/AuthorRequest-test.js (0s)
● Runtime Error
- Error: Cannot find module 'throwOnWrongReactAPI' from 'react-native.js'
at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/build/index.js:197:17)
at eval (node_modules/react-native/Libraries/react-native/react-native.js:180:26)
at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native.js:189:4)
1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 2.238s)
npm ERR! Test failed. See above for more details.
my .babelrc file contains:
{
"presets": ["react-native"]
}
I have a feeling that you are using a wrong version of Jest. You have:
"jest": "^14.1.0",
"jest-cli": "^13.1.0"
But it seems you have 13.2.3installed using npm -g:
Using Jest CLI v13.2.3, jasmine2, babel-jest
First of all, I think you can remove jest-cli and just use jest 14.1.0.
Then you can update your test script like:
"scripts": {
"test": "./node_modules/jest/bin/jest.js"
}
In this way, you make sure you run the local Jest copy of your project, so it should say now:
Using Jest CLI v14.1.0, jasmine2, babel-jest
Doing that and following the official docs you posted, it should be everything you need (Can't say for sure since you did not post the test code).