Search code examples
javascriptreactjstailwind-cssyarnpkgvercel

Error when building my app ("yarn run build" command and in vercel)

Error during the build, whether on the server or locally. This happens through package manager yarn, npm, and others. It gives me an error that the problem is in the CSS file, but it is created only in the production build. I'm using Tailwind 3.2.4 in the app, I think the problem is somehow related to that.

> react-scripts build

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the      
"@babel/plugin-proposal-private-property-in-object" package without     
declaring it in its dependencies. This is currently working because     
"@babel/plugin-proposal-private-property-in-object" is already in your  
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which   
is not maintianed anymore. It is thus unlikely that this bug will       
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Failed to compile.

static/css/main.e921bd2c.css from Css Minimizer plugin
D:\WEB\React\my-portfolio\static\css\main.e921bd2c.css:1651:56: Unknown word [static/css/main.e921bd2c.css:1651,56]


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-portfolio@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-portfolio@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sanchos\AppData\Roaming\npm-cache\_logs\2023-06-14T10_33_42_732Z-debug.log





PS D:\WEB\React\my-portfolio> yarn run build
yarn run v1.22.19
$ react-scripts build
Creating an optimized production build...
Failed to compile.

static/css/main.e921bd2c.css from Css Minimizer plugin
D:\WEB\React\my-portfolio\static\css\main.e921bd2c.css:1651:56: Unknown word [static/css/main.e921bd2c.css:1651,56]


error Command failed with exit code 1.
Solution

  • Fixed this by changing the part with className that tailwind couldn't read.

    Before:

    After:

    I hope this helps someone in the future if they have a similar problem.