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
Edit [23-7-2019]
After further research, I found that not ALL .vue files have this problem. Some do still show the original source code.
It looks like one of the loaders that is used, might be the culprit for the problems (with "vue-loader" as my first 'target').
In files that DO show the source code, the relevant part of the source map file looks like this:
Whereas the same part of the source map in the files without the source code, looks like this:
So for some reason, the "harmony default export" of the vue-loader seems to be missing for the latter type of files.
Previous issue text
Since a few days, the source maps for my .vue files no longer contain the original code (sourcesContent).
A number of source map files are generated by Webpack, but none of them contain the actual code: only minified or otherwise 'compressed' versions of the code, which are not very usable. They look like this:
The Typescript (.ts) files in my project, look almost correct, but still contain some minor forms of modification, e.g.:
What I have tried:
- I have searched Stackoverflow, and found a number of similar questions (e.g. like WebPack sourcemaps confusing (duplicated files)) with possible fixes, but none of them fixed my problem;
- I have compared my latest (Webpack) changes with that of about a week (and 2 weeks) ago, when all was working okay. And I have compared it also to a very
similar project that still produces correct source maps, including
for .vue files.
- I have tried various settings for the "devtool" setting in the Webpack config, but nothing helped.
- I am not using Uglify (which is mentioned a lot when people have a problem with source maps), so that cannot be the problem;
- I have tried updating a number of build related packages, so that they are equal to those of the project which is still working correctly, but the problem remains.
- I checked different browsers, but the problem occurs both in Chrome and Firefox (and I checked that their source map settings are set to 'on', which they have to be as the other project is working with the same settings). I even tried IE11, but that didn't help either.
My starting scripts in package.json look like this:
"build-watch": "webpack -d --watch true --config webpack.dev.config.js",
"build-release": "webpack -p --config webpack.production.config.js",
"build-dev": "webpack -d --config webpack.dev.config.js",
The devDependencies look like this:
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-typescript": "^7.3.3",
"#types/bootstrap": "^4.3.1",
"#types/jest": "^24.0.15",
"#types/jquery": "^3.3.30",
"#types/webpack": "^4.4.35",
"#vue/cli-plugin-e2e-cypress": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.2",
"#vue/cli-plugin-typescript": "^3.9.0",
"#vue/cli-plugin-unit-jest": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"assets-webpack-plugin": "^3.9.10",
"babel-loader": "^8.0.6",
"babel-preset-vue": "^2.0.2",
"cache-loader": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.1.0",
"cssnano": "^4.1.10",
"cypress": "^3.4.0",
"es6-promise": "^4.2.8",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"globule": "^1.2.1",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-increase-specificity": "^0.6.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"ts-jest": "^24.0.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"url-loader": "^2.0.1",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.36.1",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.6" },
And the most relevant parts of my Webpack development config (excluding stuff like those related to webfonts) are these:
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
const NODE_PATH = path.join(__dirname, "node_modules");
const CACHE_PATH = path.join(NODE_PATH, '.cache/vue');
const VUE_VERSION = require('vue/package.json').version;
const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
const bundleConfig = require('./bundles.config.js');
const buildId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
const config = {
entry: bundleConfig.entries,
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
exclude: [
path.resolve(__dirname, "wwwroot", "Content"),
path.resolve(__dirname, "src", "common")
],
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, "wwwroot", "Content"),
path.resolve(__dirname, "src", "common")
],
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheDirectory: CACHE_PATH,
cacheIdentifier: [
'development',
webpack.version,
VUE_VERSION,
VUE_LOADER_VERSION
].join('|')
}
},
{
test: /\.tsx$/,
loaders: 'babel-loader',
include: /src/
},
{
test: /\.ts$/,
loaders: 'ts-loader',
include: /src/,
options: {
appendTsSuffixTo: [
/\.vue$/
]
}
}, ...
]
},
devtool: "cheap-module-eval-source-map",
resolve: {
extensions: [
'.js',
'.vue',
'.tsx',
'.ts'
],
alias: {
'~#': path.resolve('src'),
'vue$': 'vue/dist/vue.esm.js',
'bootstrap-vue$': 'bootstrap-vue/dist/bootstrap-vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
'Promise': 'es6-promise'
}),
new CleanWebpackPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({ filename: "[name].css" }),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: false } }],
}
}),
new webpack.WatchIgnorePlugin([
/\.d\.ts$/
]),
new AssetsPlugin({
filename: 'webpack.assets.json',
path: bundleOutputDir,
prettyPrint: true,
metadata: { buildId: buildId }
})
],
stats: {
modules: false,
entrypoints: false,
children: false
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
} };
I have totally run out of clues, so if anyone can give some, that would be great!
In the end, it turned out to be a source maps caching issue...! Which seems like a "duh!" solution to the problem, but it is not, really.
Because, it turns out that Chrome is very persistent with the caching of the source maps (at least, so it seems to me).
Whenever I start debugging, I use the Debug option of Visual Studio 2019. Which will then launch a new Chrome instance to do the debugging/testing in. I always assumed that this was done, to make sure you were using a 'fresh' version of the browser (e.g. with an empty cache, and the like). It turns out that this does not apply to the source maps of this browser instance...!
I found out that caching was the problem, because I had a window open in my 'regular' Chrome, which was also set to the local development environment. And I decided to see how the source maps where shown there, more to sort of amuse myself and less because I thought that would lead to anything. And in that browser, the correct source maps were & are shown.
So I went back to my (still open) development instance of Chrome. And in that, I already had disabled the cache in the devtools, both in the settings, and via the checkbox on the network tab. But still the source maps remained cached. So I emptied the browser cache via the regular settings of Chrome. But still the source maps remained cached. I changed the settings in Visual Studio to open an incognito version of Chrome for debugging. And even now, I still see the incorrect/old source maps there (while they show up just fine in the regular browser instance)...
Very weird all of this, but at least I can now start working/debugging again!
I'm trying to load jquery + jquery-ui + bootstrap inside my project throught NPM and gulp.
My configuration is this:
Package.json
"browser": {
"jquery": "/node_modules/jquery/dist/jquery.js",
"jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jquery-ui": {
"exports": "jquery-ui",
"depends": [ "jquery:jQuery" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"bootstrap": "^3.3.6",
"jquery": "2.1.0",
"jquery-ui-browserify": "^1.11.0-pre-seelio",
}
gulpfile.js
gulp.task('browserify', function(){
return browserify([
'node_modules/jquery/dist/jquery.js',
'node_modules/jquery-ui-browserify/dist/jquery-ui.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
])
.bundle()
.pipe(source('core.js'))
.pipe(buffer())
.pipe(gulp.dest('build/js'));
});
Then I load core.js with assetic from my index.php but I get this error:
Uncaught ReferenceError: jQuery is not defined
What am I doing wrong?
Thank you.
I don't know what you're trying to do there but keep in mind that what you should pass to the browserify instance is the entry point of your application, not your dependencies.
Then in your application you can use the require function to load those dependencies:
var $ = require('jquery');
While compiling browserify will autonomously do two things for you:
He will put into your bundle any library you required.
He will resolve your require statements by replacing them with a reference to the bundled copy of that library.
As long as the library is installed through npm you don't need any additional configuration. On the other hand if the library is situated in an unconventional location you'll need to tell browserify how to resolve it.
Anyway you can find more documentation on the repo's readme
Safari is failing to load my React app with this line:
Const declarations are not supported in strict mode.
When I look at the line that's failing I'm seeing:
const Crypto = __webpack_require__(624)
This isn't something in my app so it must be injected by Webpack or another dependency.
Shouldn't Babel replace const with var?
Babel Dependencies
"babel": "~6.1.0",
"babel-core": "~6.2.0",
"babel-loader": "~6.2.0",
"babel-plugin-transform-runtime": "~6.1.0",
"babel-polyfill": "~6.2.0",
"babel-preset-es2015": "~6.1.0",
"babel-preset-react": "~6.1.0",
"babel-preset-stage-0": "~6.1.0",
"babel-runtime": "~6.2.0"
Babel Loader Config
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0']
}
}
NOTE My app does work in Chrome.
You've excluded "node_modules" in babel-loader settings, so it doesn't process your external dependencies. This package you depend on probably is not tested for in-browser usage.
And, btw, babel won't replace your consts anyway unless you use "transform-es2015-block-scoping" plugin.
http://babeljs.io/docs/plugins/transform-es2015-block-scoping/
It's not included in "es2015" preset. There you have only "check-es2015-constants" plugin which just checks and validates const declarations.
The plugin which transforms consts into vars is called "transform-es2015-block-scoping" and it's included in "es2015" preset.