Laravel Mix failing to compile in production on dynamic imports

Posted 4 months ago by Erik


I'm having issues compiling using the production command with dynamic imports with Vuejs.

  <component v-if="component" :is="component" :data="data" :type="baseType"></component>

<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!`);

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,


Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.