Level 59
Dynamic imports aren't supported in the latest version of Mix. It's a nasty webpack and CSS extraction issue that we're stuck with until webpack 5 is out. This is noted in the release notes.
2 likes
Hello,
I'm having issues compiling using the production command with dynamic imports with Vuejs.
<template>
<component v-if="component" :is="component" :data="data" :type="baseType"></component>
</template>
<script type="text/ecmascript-6">
export default {
name: 'DynamicNotification',
props: ['data', 'type'],
data: () => ({
component: null
}),
computed: {
baseType() {
const type = this.type.split('\');
return type[type.length - 1];
},
loader() {
if (!this.type) {
return null;
}
return () => import(`./${this.baseType}`);
}
},
mounted() {
this.loader().then(() => {
this.component = () => this.loader();
}).catch(() => {
console.error(`Notification of type ${this.baseType} not found!`);
});
}
};
</script>
The error message has nothing to do with this but I narrowed it down to this components.
$ cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
CssSyntaxError: /css/main.css:4:3: Unknown word
at Input.error (/Users/evandam/Sites/scaling/node_modules/postcss/lib/input.js:130:16)
at Parser.unknownWord (/Users/evandam/Sites/scaling/node_modules/postcss/lib/parser.js:563:22)
at Parser.decl (/Users/evandam/Sites/scaling/node_modules/postcss/lib/parser.js:235:16)
at Parser.other (/Users/evandam/Sites/scaling/node_modules/postcss/lib/parser.js:166:12)
at Parser.parse (/Users/evandam/Sites/scaling/node_modules/postcss/lib/parser.js:77:16)
at parse (/Users/evandam/Sites/scaling/node_modules/postcss/lib/parse.js:17:12)
Kind regards,
Erik
Dynamic imports aren't supported in the latest version of Mix. It's a nasty webpack and CSS extraction issue that we're stuck with until webpack 5 is out. This is noted in the release notes.
Please or to participate in this conversation.