我有这个奇怪的 webpack.cache.PackageCacheStrategy

Question

以下是我的控制台上的错误

$ 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

这里是错误中提到的global.scss。当我尝试删除 tailwind 导入时，它编译没有问题。但我需要这些才能让顺风发挥作用。

@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;
}

我的 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')],
}

我的 postcss.config.js 是默认的

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

请帮忙...

Answer 1

今天我遇到了同样的问题。我的代码工作得很好，直到我创建了一个 React 组件，该组件具有使用 querySelector 的函数，如下所示：

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

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

看来该-translate-x-[${x}]语句导致了该错误。然而，删除这条线后，问题并没有消失。我尝试删除“node_modules”和“.next”文件夹并重新安装依赖项，但似乎没有任何效果。

我不知道是什么导致了它，但我可以让应用程序再次运行的唯一方法是返回到之前的提交（带有git reset --hard HEAD- 警告：要小心此命令，因为您会丢失所有未提交的更改，但那是我的意图）并删除该组件（文件本身）。即使简单地复制和粘贴该文件的内容，并注释掉大多数“奇怪”的行（基本上是这个函数），也会使错误再次出现。从字面上看，似乎没有其他方法对我有用。

它可能无法回答您的问题，但我希望它可以帮助面临同样问题的人，直到没有更好的解决方案出现。