I'm having this weird webpack.cache.PackageCacheStrategy

Question

Below is the error on my console

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\css-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\postcss-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\resolve-url-loader\index.js??ruleSet[1].rules[2].oneOf[7].use[3]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\styles\globals.scss': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CssSyntaxError
error - ./styles/globals.scss:1:1
Syntax error: Unknown word
wait  - compiling...
error - ./styles/globals.scss:1:1
Syntax error: Unknown word

Here is global.scss mentioned in the error. When I try to removed the tailwind imports, it compiles without a problem. But I needed those in order for tailwind to work.

@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

My tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  important: true,
  theme: {
    container: {
      center: true,
      padding: '1.5rem',
    },
    extend: {
      colors: {
        // 'nav-bg': '#383E4C',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
}

And my postcss.config.js which is default

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Please help...

Millionaire

Answer 1

As Renato mentioned in his answer, it seems dynamically constructing tailwind class names returns this error.

This is explained in the tailwind docs here:

Dynamic class names

As outlined in Class detection in-depth, Tailwind doesn’t actually run your source code and won’t detect dynamically constructed class names.

❌ Don't construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

✔️ Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Also from this documentation about how tailwind detects CSS class names:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS

Therefore to dynamically set a CSS property of an element, using the inline style provided by React.js would be the best way to do it. For example:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Nobie

Answer 2

Today I had the same problem. My code was working just fine, until I created a React component that had a function that uses querySelector, something like this:

const handleSomething = () => {
  const x = 150;

  let activeSlide = document.querySelector('.slide');
  activeSlide.classList.add(`-translate-x-[${x}]`);
}

It seemed that the -translate-x-[${x}] statement was causing the bug. However, after removing this line, the problem didn't go away. I tried to delete the "node_modules" and ".next" folders and reinstall the dependencies, but nothing seemed to work.

I don't know what caused it, but the only way I could get the application to run again was to go back to the previous commit (with a git reset --hard HEAD - WARNING: be careful with this command because you loose all uncommitted changes, but that was my intention) and delete that component (the file itself). Even a simple copy and paste of the contents of this file, with most of the "weird" lines commented out (this function, basically), would make the error come back. Literally nothing else seemed to work for me.

It probably doesn't answer your question, but I hope it can help someone who is facing the same problem, until no better solution comes up.

Harvest

Had the same problem here. It seems either webpack or tailwindcss has problems compiling programmatic arbitrary values into CSS. – Nobie

Answer 3

I had a similar issue that happened when I tried to add a preview of the filed I just choosed. For that I used the URL object like that : image.src = URL.createObjectURL(picture)

I just remove this part of my component the error was gone.

Arlinda

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Lianneliao