Laravel-mix: Code splitting prevents CSS from being compiled

[mikemand]

• Laravel Mix Version (npm list --depth=0): 4.0.14
• Node Version (node -v): v11.8.0
• Yarn Version (yarn -v): 1.13.0 // NPM Version (npm -v): 6.7.0
• OS: macOS Mojave 10.14.2

Description:

I generated some boilerplate Vue with Vue CLI v3. I told it to generate Router and Vuex files too. After it was generated, I moved everything into the proper Laravel places. In the Router file, there is the following:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home,
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "/js/about" */ '../views/About.vue'),
        },
    ],
});

While this is active, my SASS is not compiled. It runs through all the processes (I can test this by trying to @apply .some-class-that-tailwind-doesnt-have; - it throws an error about the class not being defined), but the output of Mix is:

 DONE  Compiled successfully in 4815ms                                                                                                                                             12:15:42 PM

          Asset      Size                             Chunks             Chunk Names
   /css/app.css   0 bytes  /js/app, /js/manifest, /js/vendor  [emitted]  /js/app, /js/manifest, /js/vendor
   /js/about.js  4.74 KiB                          /js/about  [emitted]  /js/about
     /js/app.js  39.9 KiB                            /js/app  [emitted]  /js/app
/js/manifest.js  8.73 KiB                       /js/manifest  [emitted]  /js/manifest
  /js/vendor.js   462 KiB                         /js/vendor  [emitted]  /js/vendor
✨  Done in 9.40s.

If I comment out the code splitting and replace it with a traditional component: About, then the CSS is compiled.

Steps To Reproduce:

I'm starting a fresh project with Laravel v5.7. Here is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "yarn run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "yarn run development -- --watch",
        "watch-poll": "yarn run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "yarn run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/plugin-transform-runtime": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "babel-eslint": "^10.0.1",
        "cross-env": "^5.2.0",
        "eslint": "^5.12.1",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-vue": "^5.1.0",
        "laravel-mix": "^4.0.14",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.16.1",
        "sass-loader": "7.*"
    },
    "dependencies": {
        "axios": "^0.18",
        "tailwindcss": "^0.7.4",
        "tailwindcss-tables": "^0.2.0",
        "vue": "^2.5.21",
        "vue-router": "^3.0.1",
        "vue-template-compiler": "^2.5.21",
        "vuex": "^3.0.1"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}

babel.config.js:

module.exports = function (api) {
    // const isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
    api.cache(false);

    return {
        plugins: [
            '@babel/plugin-syntax-dynamic-import',
            '@babel/plugin-proposal-object-rest-spread',
        ],
        presets: [
            '@babel/preset-env',
        ],
    };
};

webpack.mix.js:

const mix = require('laravel-mix'),
    tailwindcss = require('tailwindcss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.js')],
    })
    .extract();

if (mix.inProduction()) {
    mix.sourceMaps().version();
}

and finally my app.scss:

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */
a {
    @apply .text-teal;

    &:hover {
        @apply .underline .text-teal-darker;
    }

    &.router-link-exact-active {
        @apply .text-teal-dark;
    }
}

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

I have nuked my node_modules and yarn.lock several times, cleared Yarn and NPM cache, etc. The only time CSS is compiled is when I don't try to code split the route's component.

I should note that I have been using Yarn only so far. When I try to use npm run development, it doesn't do any code splitting at all. CSS is compiled fine too... Wat. 😕

[roitto]

Your router is using dynamic import when using the splitted chunks. They cause problems in current version of webpack.

https://github.com/JeffreyWay/laravel-mix/releases/tag/v4.0.0

If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.

[mikemand]

Aha, thank you. I missed that section. I will stick to the traditional way for now, and hope for a fast Webpack 5 release. 😄

@JeffreyWay Do you want me to leave this open until Webpack 5 is released? Or close it now?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alimirayman]

The problem is in the scss splitting in Vue and using mix.scss() both. Laravel mix when having both creates a css file with manifest js file content in it. which is definitely a bug. which the community mentions a bug from Webpack and will be resolved in webpack 5. But If you use only code splitting in Vue and have the default app.scss file imported to main Vue component like this(not in scope), so each other component will get the styling properly

// resources/js/components/app.vue
<template>
 <!-- Main Vue Component  -->
</template>

<script>
// Main Script
</script>

<style lang="scss">
  @import '~@/sass/app.scss';
</style>

and the webpack.mix.js file will have no mix.scss function to run only a single app.js file. here is my file.

// webpack.mix.js
const mix = require('laravel-mix')
mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'] // important to install -D
})

mix.config.webpackConfig.output = {
  chunkFilename: 'js/[name].bundle.js',
  publicPath: '/'
}

mix
  .js('resources/js/app.js', 'public/js')
  .extract(['vue'])
  .webpackConfig({
    resolve: {
      alias: {
        '@': path.resolve('resources/') // just to use relative path properly
      }
    }
  })

Hope this solves everyone's question

[gtempesta]

While we wait for an official solution, in this other issue there are other solutions which might still work: https://github.com/JeffreyWay/laravel-mix/issues/1914.

[brada1703]

Any update on this?

[thecrypticace]

This is no longer an issue in Mix v6.