tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
81.92k stars 4.13k forks source link

Module build failed error when installing JIT #3777

Closed asivaneswaran closed 3 years ago

asivaneswaran commented 3 years ago

Describe the problem:

I am trying to install the jit compiler in my Laravel project and I am running into this issue:

✖ Mix
  Compiled with some errors in 1.77s

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:11:24)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at clone (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/autoprefixer/lib/prefixer.js:23:17)
    at processResult (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/webpack/lib/NormalModule.js:597:19)
    at /Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/webpack/lib/NormalModule.js:691:5
    at /Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/arasivaneswaran/Documents/repos/ccp-kin-ball-v5/node_modules/postcss-loader/dist/index.js:103:7)

1 ERROR in child compilations
webpack compiled with 2 errors

Link to a minimal reproduction:

This is my tailwind config file:

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')

module.exports = {
    darkMode: 'class',
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans],
        },
        colors: {},
        ringColor: {},
    },

    variants: {
        extend: {},
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
};

And this is my webpack file:

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

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
        .options({
            postCss: [
                require("@tailwindcss/jit"),
            ],
        }
    );

mix.js('resources/js/admin.js', 'public/js');

If I remove the require("@tailwindcss/jit"), it compiles without any issues.

I am currently on Laravel Mix 6

adamwathan commented 3 years ago

Hey! This looks like a duplicate of this:

https://github.com/tailwindlabs/tailwindcss-jit/issues/29#issuecomment-799748676

Check the other issues on the JIT repo if not, there are some other similar ones too 👍🏻