I have a fairly large Vue project that was initially created with vue-cli. I'm getting the infamous "couldn't fulfill desired order of chunk group(s)" warning when building. After much searching, I think the solution is to add ignoreOrder to the initial configuration options for mini-css-extract-plugin but I have no idea how. I think this should be done in vue.config.js. The contents of that file are:
module.exports = {
lintOnSave: false
}
I've tried:
module.exports = {
lintOnSave: false,
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({ ignoreOrder: true })
]
}
}
But that gives me an error that I think means that the module was loaded twice.
I've tried:
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
ignoreOrder: true
}
}
}
but that gives me a syntax error.
How do I set that option?
According to the document, you can pass the configuration for min-css-extract-plugin by passing the options via css.extract property as following:
// vue.config.js
module.exports = {
// ...,
css: {
extract: {
ignoreOrder: true
},
}
};
Related
I'm using TSDX for my ui-kit library along with postCSS for scss-modules. And it works pretty fine. Now i want to use preserveModules for treeshaking to not load all ui-kit components in application, but only imported ones.
So i added some configs to my tsdx.config.js and now it looks like this:
const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano')
const babel = require('rollup-plugin-babel')
module.exports = {
/**
* #param {import("rollup/dist/rollup").InputOptions} config
*/
rollup(config, options) {
if (options.format === 'esm') {
config = { ...config, preserveModules: true }
config.output = {
...config.output,
dir: 'dist/',
entryFileNames: '[name].esm.js',
}
delete config.output.file
}
config.plugins.push(
postcss({
modules: true,
plugins: [
autoprefixer(),
cssnano({
preset: 'default',
}),
],
inject: true,
extract: false,
minimize: true,
})
)
return config
},
}
For some reason builded components in /dist folder have wrong imports (extra '../').
For example in Button.esm.js
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../_virtual/_rollupPluginBabelHelpers.js'
instead of
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js'
Changing postcss option inject: false fix imports but broke components styles.
I'm not sure is it a tsdx issue or postcss issue.
Asking for any help and advice.
I have a vue project and I use vue-cli-service build to build the project for production.
I noticed by default when I build the files, the resource name are having some kind of version code like
app.34fc5700.js
chunk-vendors.c7da5824.js
Is there a way to get rid of it?
I'm using vue.config.js, there's no webpack.conf.js in my project, and this is how it looks like:
module.exports = {
publicPath: process.env.VUE_APP_ROOT_PATH,
outputDir: process.env.VUE_APP_BUILD_DIR,
chainWebpack: config => {
config.resolve.symlinks(false);
config.plugin('html').init((Plugin, args) => {
const newArgs = {
...args[0],
};
newArgs.minify && (newArgs.minify.removeAttributeQuotes = false);
return new Plugin(newArgs);
});
},
css: {
loaderOptions: {
sass: {
additionalData: '#import "#/scss/_variables.scss";',
},
},
}
}
Looks like the option filenamehashing is something you need. Basically this option is enabled by default so you might need to turn it off:
// vue.config.js
module.exports = {
filenameHashing: false,
// ...
};
I am using Vue typeScript with GraphQL. Whenever I try to use a query using deconstructor I get an error from Vetur. I am able to use GetPostData query in the Vue Component and its working fine.
Trying to use this - https://github.com/apollographql/graphql-tag#support-for-multiple-operations
Vue File
import { GetPostData } from "../../util/queries/getPageData.gql";
getPageData.gql
query GetPostData {
continents {
code
}
}
query GetCountries($code: String!) {
country(code: $code) {
code
}
}
Vue.config.js
const antdTheme = require("./src/theme.js");
module.exports = {
publicPath: "/",
pwa: {
iconPaths: {
favicon32: "./favicon.png",
favicon16: "./favicon.png",
appleTouchIcon: "./favicon.png",
maskIcon: "./favicon.png",
msTileImage: "./favicon.png"
}
},
css: {
loaderOptions: {
less: {
modifyVars: antdTheme,
javascriptEnabled: true
}
}
},
chainWebpack: config => {
// GraphQL Loader
config.module
.rule("graphql")
.test(/\.(graphql|gql)$/)
.use("graphql-tag/loader")
.loader("graphql-tag/loader")
.end();
}
};
I think it states that's what you can do but I don't think you really can.
It's better to put all your queries in a javascript file and import 'graphql-tag' to store queries instead of using a .gql file.
Just tested and Vetur didn't complain, could have been a bug that is already fixed.
According to graphql-tag package this case is supported (docs), so if Vetur complains must be an issue with the extension itself.
I've noticed that there are virtually no info from babel on incorrect configuration. For example I've created new app with react-native-cli, installed decorators plugin and filled my babel.config.js as follows:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['#babel/plugin-proposal-decorators', { legacy: true }],
};
And there were the same complain as if no plugin is installed. Correct config would be:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]],
};
Now I'm trying to install jsx-control-statements and have the same silent fail causing
ReferenceError: Can't find variable: Choose as if no such plugin is installed at all. My babel.config.js is:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'jsx-control-statements',
['#babel/plugin-proposal-decorators', { legacy: true }],
],
};
So the question is: How do I debug this configuration? How can I get some diagnostic from babel about incorrect configuration/not found packages etc.?
For instance if the presets/plugins are missing or missconfigured, you'll get an error when webpack takes over and try to load all the config. But I think your best shot is to use progressPlugin where you could display each step and see for yourself what is happening.
new webpack.ProgressPlugin((percentage, message, ...args) => {
console.log(percentage, message, ...args);
}),
Another approach, would be using debug module, as nearly all other plugins, modules use it.
DEBUG=* webpack [-c webpack.something.js]
Hope it helps
If you use babel.config.js you could do the following:
module.exports = function(api) {
if (api) {
api.cache(true);
api.debug = process.env.NODE_ENV === 'development' || false;
}
const presets = ['#babel/preset-env'];
const plugins = [
'#babel/plugin-proposal-class-properties',
...
];
return {
presets,
plugins,
};
};
I built my simple site using Vue UI (the ones that comes with Vue-CLI 3), and it created sourcemaps in the /dist folder. I deploy these sourcemaps along with the production files. When I load up my site, Chrome indicates it cannot parse the sourcemaps in Devtools.
DevTools failed to parse SourceMap: https://www.thisisnotarealdomain.net/js/app.92ef018b.js.map
I have tried the following in vue.config.js:
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#source-map'
}
}
and
module.exports = {
css: {
// modules: true,
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/scss/variables.scss`
data: `#import "#/scss/_globals.scss";`
}
}
},
configureWebpack: {
devtool: '#cheap-eval-source-map'
}
}
But Chrome still complains and I cannot see my original source.
I found some articles on the Internet regarding Webpack and Chrome interaction with sourcemaps, but I cannot tell if the problem has been resolved. Is there a problem with sourcemaps created by Vue UI?
Thanks.