He tenido este problema durante una semana y no he podido encontrar una solución, pero descubrí algunas cosas para reducir el problema. Estoy intentando ejecutar la compilación de hilo en mi aplicación Next.js pero falla con un error que publicaré a continuación.
La aplicación del programa compila bien con yarn dev y todos los estilos funcionan. Usé la configuración estándar de los documentos TW.
¿Podrían los nombres de estilo incorrectos causar errores con la construcción? Por ejemplo className="BadStyleName h-10 w-10"
Error:
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" } }Notas:
console.log() de postcss.config.js editar: ESTÁ IMPRESOC:\Users\project\static\css\b0067dc6dc66c8dc no parece resolverse en un archivo cuando alt + clic en él."./components/**/*.{js,ts,jsx,tsx}", del content: [] en tailwind.config.js . /components/ jsx no recibirá ningún estilo TW, pero el jsx en /pages/ funciona como se esperaba.plugins: [] y variants: {} no lo soluciona.@tailwind base; @tailwind components; @tailwind utilities; se importan en globals.css .Tenía el mismo problema hoy. Vuelva a comprobar todos los estilos de sus componentes. Compruebe si está pasando un valor dinámico al className personalizado del viento de cola como w-[${width}px] . Y cámbielo al estilo de reacción en línea como style={{ width }} . Provoca el error durante el tiempo de compilación.
Eliminé los comentarios al final de mi archivo (ni siquiera dentro del componente) y el comando de compilación funcionó correctamente. A veces el código es simplemente increíble.
En mi caso, tenía una línea en el bloque de un componente como este:
function Foo({ givenListPaperWidth = 200 }) { // ... // The below line was commented // const listPaperWidth = `w-[${givenListPaperWidth}px]`; (**) return "Foo component"; }Aunque se comentó "(**) línea", estaba causando un error de compilación. Después de eliminar la línea, la compilación se realizó con éxito.