这个问题已经存在一个星期了，还没有找到解决方案，但我找到了一些方法来缩小问题的范围。我试图在我的Next.js应用程序中运行yarn build，但它失败了，我将在下面发布一个错误。
该程序应用程序编译良好，与yarn dev和所有的风格工作。我使用的标准设置从tw文档。
错误的样式名称会导致构建错误吗？例如className="BadStyleName h-10 w-10"
错误：

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at makeWebpackError (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:47168:9)
    at C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:31056:12
    at eval (eval at create (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:141512:10), <anonymous>:34:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tailwind.config.js：

module.exports = {
    content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: true, // or 'media' or 'class'
  theme: {
    extend: {
            flex: {
                basis: '0 0 100%',
            },
            colors: {
                primary: { mint: "#18BCFF" },
                slate: {
                    50: "#f8fafc",
                    100: "#f1f5f9",
                    200: "#e5e5e5",
                    300: "#d4d4d4",
                    400: "#a3a3a3",
                    500: "#737373",
                    600: "#525252",
                    700: "#404040",
                    800: "#262626",
                    900: "#171717"
                }
            },
        }
        
  },

  plugins: [
        require('daisyui'),
        require('@tailwindcss/line-clamp'),
        require('tailwind-scrollbar'),
    ],
    variants: {
        scrollbar: ['rounded']
    }
}

next.config.js：

module.exports = {
  reactStrictMode: true,
    images: {
    domains: ['firebasestorage.googleapis.com'],
  },
}

_app.js：

import "../styles/globals.css"
import 'tailwindcss/tailwind.css'
import Layout from "../components/layout/layout"
import "../firebase/clientApp"
import { SessionProvider } from "next-auth/react"
import MintBG from "../components/layout/mintBG"

function MyApp({ Component, pageProps }) {
  return (
        <div className="text-white overflow-hidden">
            <AnimatedBG />
            <SessionProvider session={pageProps.session}>
                <Layout>
                    <Component {...pageProps} />
                </Layout>    
            </SessionProvider>
        </div>
    )
}

export default MyApp

postcss.config.js

console.log("Testing Postcss")

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

package.json

{
  "name": "project",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.2",
    "@tailwindcss/line-clamp": "^0.3.0",
    "daisyui": "^1.16.2",
    "dotenv": "^10.0.0",
    "embla-carousel-react": "^6.0.2",
    "firebase": "^9.4.1",
    "firebase-admin": "^10.0.0",
    "firebaseui": "^6.0.0",
    "formik": "^2.2.9",
    "lodash": "^4.17.21",
    "next": "latest",
    "next-auth": "^4.0.0-beta.7",
    "react": "17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "svg-react-loader": "^0.4.6",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "postcss": "^8.4.5",
    "react-svg-loader": "^3.0.3",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.6"
  }
}

注：

postcss.config.js中的console.log()编辑：已打印
C:\Users\project\static\css\b0067dc6dc66c8dc在我按住alt键并单击它时似乎无法解析为文件。
当"./components/**/*.{js,ts,jsx,tsx}",从tailwind.config.js中的content: []中删除时，应用程序将构建良好。/components/ jsx不会接收任何TW样式，但/pages/中的jsx按预期工作。
删除plugins: []和variants: {}并不能修复它。
将@tailwind base; @tailwind components; @tailwind utilities;导入到globals.css中。

虽然我的前任们的评估是正确的，但问题有时很难被发现。
在这种情况下，可以尝试使用RegEx查找\[[^]]*\$的任何出现，尝试并找出括号中的变量，或者一般地搜索className。
如果你的代码库大小合适，无论如何，这可能会变得相当棘手。
用tailwind.config.js的内容数组构建一个二叉搜索树。
1.通过传递空数组不包含任何内容，并验证您的构建是否再次运行，这意味着问题肯定出在代码库中，而不是出在顺风配置中。
1.然后包括一半的代码库文件夹（如果结构较浅，请使用ls > folders.txt和MultiCursor编辑快速生成导入）

如果它仍然工作：包括剩余代码库的一半
如果不起作用：删除一半包含的代码库

这将引导您找到构建量最小的特定文件。
也许有更好的方法来调试这个，如果你愿意把精力投入到调试webpack捆绑器，但这个特定错误的主错误日志并没有真正帮助你找到问题的根源可悲的。
我们只知道问题出在postcss的scss解析器上，这是有道理的，因为它是运行tailwind构建管道的东西。

4条答案

按热度按时间

3vpjnl9f1#

今天遇到了同样的问题。重新检查你所有的组件样式。检查你是否正在传递动态值给tailwind的自定义className，比如w-[${width}px]。然后把它改为内联React样式，比如style={{ width }}。它会在构建时导致错误。

赞(0）回复(0）举报 2023-02-08

qhhrdooz2#

在我的例子中，我在组件块中有一行代码，如下所示：

function Foo({ givenListPaperWidth = 200 }) {
    // ...
    // The below line was commented
    // const listPaperWidth = `w-[${givenListPaperWidth}px]`;  (**)
    
    return "Foo component";
}

即使注解了“（**）行”，它仍会导致生成错误。删除该行后，生成已成功完成。

knsnq2tg3#

我删除了文件末尾的注解（甚至在组件内部也没有），构建命令成功地工作了。有时候代码真是难以置信。

2izufjch4#

reactjs 为什么我得到这个错误(Tailwind + Next.js)？HookwebpackError，CssSyntaxError

4条答案

相关问题

热门标签

最新问答