'Unknown Word' error in CSS Minimizer and Postcss Modules causing 'Build' failure even though 'Develop' Works.

Dahbu7 commented 2 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

My Gatsby.js site runs without error when I use 'gatsby develop' but the build always fails returning the following error when I 'gatsby build':

` Generating JavaScript bundles failed

styles.1a4684d19cee467a516a.css from Css Minimizer C:\xampp\htdocs\gatsby-troubleshoot-positiveo\styles.1a4684d19cee467a516a.css:756:5 : Unknown word [styles.1a4684d19cee467a516a.css:756,5] at Input.error (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\post css\lib\input.js:123:16) at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modul es\postcss\lib\parser.js:518:22) at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:149:12) at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:59:16) at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\li b\parse.js:11:12) at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\p ostcss\lib\lazy-result.js:133:16) at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_module s\postcss\lib\processor.js:36:12) at cssnanoMinify (eval at transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css -minimizer-webpack-plugin\dist\minify.js:34:28), :51:61) at minify (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\no de_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32) at Object.transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules \gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)

File: styles.1a4684d19cee467a516a.css ` Link to reproduced github:

https://github.com/Dahbu7/gatsby-issue-1

I have uninstalled postcss and postcss-loader and reinstalled them as dev dependencies - that didn't work I have uninstalled css-minimizer-webpack-plugin and reinstalled it as dev dependency - that didn't work either.

PLEASE NOTE: After I uninstalled just postcss I ran build again so it could use the postcss package that is in the node_modules/gatsby folder as in, node_modules/gatsby/node_modules/postcss and that didn't work either.

My Node version is: v14.15.0 My dev-dependency installed webpack version is: Everything else can be found in the github light reproduction repo:

https://github.com/Dahbu7/gatsby-issue-1

I tried hosting it on gatsby cloud and the deploy build failed there too for the exact same reason. I even did the NODE_VERSION = 16 thing as an environment variable and that didn't work. Please try it again though. Maybe I did it wrong.

I have done several react projects but this is my first time converting over to Gatsby. Any help woud be greatly appreciated.

Reproduction Link

https://github.com/Dahbu7/gatsby-issue-1

Steps to Reproduce

Go to the repo I posted: https://github.com/Dahbu7/gatsby-issue-1
You can run gatsby build on your system or any platform of your choice.
Node Version is v14.15.0 ...

Expected Result

Javascript bundles of node modules should build without error when 'gatsby build' is ran. It builds properly with 'gatsby develop'.

Actual Result

failed Building production JavaScript and CSS bundles - 116.946s

ERROR #98123 WEBPACK

Generating JavaScript bundles failed

styles.1a4684d19cee467a516a.css from Css Minimizer C:\xampp\htdocs\gatsby-troubleshoot-positiveo\styles.1a4684d19cee467a516a.css:756:5 : Unknown word [styles.1a4684d19cee467a516a.css:756,5] at Input.error (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\post css\lib\input.js:123:16) at Parser.unknownWord (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modul es\postcss\lib\parser.js:518:22) at Parser.other (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:149:12) at Parser.parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\pos tcss\lib\parser.js:59:16) at parse (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\postcss\li b\parse.js:11:12) at new LazyResult (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\p ostcss\lib\lazy-result.js:133:16) at Processor.process (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_module s\postcss\lib\processor.js:36:12) at cssnanoMinify (eval at transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\node_modules\css -minimizer-webpack-plugin\dist\minify.js:34:28), :51:61) at minify (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules\gatsby\no de_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32) at Object.transform (C:\xampp\htdocs\gatsby-troubleshoot-positiveo\node_modules \gatsby\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)

File: styles.1a4684d19cee467a516a.css

Environment

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-3340M CPU @ 2.70GHz
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
  npmPackages:
    gatsby: ^3.13.1 => 3.14.2
    gatsby-plugin-image: ^1.14.1 => 1.14.1
    gatsby-plugin-manifest: ^3.14.0 => 3.14.0
    gatsby-plugin-postcss: ^4.14.0 => 4.14.0
    gatsby-plugin-preconnect: ^1.2.1 => 1.2.1
    gatsby-plugin-preload-fonts: ^2.14.0 => 2.14.0
    gatsby-plugin-react-helmet: ^4.14.0 => 4.14.0
    gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
    gatsby-plugin-sharp: ^3.14.1 => 3.14.1
    gatsby-plugin-sitemap: ^4.10.0 => 4.10.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^3.14.0 => 3.14.0
    gatsby-theme-material-ui: ^2.0.1 => 2.0.1
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0
  npmGlobalPackages:
    gatsby-cli: 3.14.0

Config Flags

No response

dancon commented 2 years ago

same issue

LekoArts commented 2 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

Dahbu7 commented 2 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

Thank you for getting back to me. This is the link to the Repo containing the minimal reproduction:

https://github.com/Dahbu7/gatsby-issue-1

It is working now, I assure you. Any help would be greatly appreciated and if you need anyting else or have anymore questions, don't hesitate to ask.

lewismwaki commented 2 years ago

Did you get it to work? Experiencing the same issue.

samaritanau commented 2 years ago

Same issue - any help?

Dahbu7 commented 2 years ago

Did you get it to work? Experiencing the same issue.

Sorry for the late reply. Unfortunately I did not. The client had a time constraint so I switched to Next.js. Some complications there but I got it converted over in a couple of days. That one works. I bet this is something silly like something to do with svgs or some other obscure thing

Dahbu7 commented 2 years ago

Same issue - any help?

Unfortunately I did not. I switched to Next.js due to constraints on project deadline. Some complications there but I got it converted over in a couple of days. That one works. I bet this is something silly like something to do with importing svgs or some other obscure thing.

samaritanau commented 2 years ago

The issue I was having was due to including CSS files for slick carousel into the scss, I changed to the scss includes instead and things started working.

Dahbu7 commented 2 years ago

The issue I was having was due to including CSS files for slick carousel into the scss, I changed to the scss includes instead and things started working.

Oh wow. I am using slick carousel too! I think that might be it. I will try it.

lewismwaki commented 2 years ago

The issue I was having was due to including CSS files for slick carousel into the scss, I changed to the scss includes instead and things started working.

I managed to fix this error by completely removing the all import lines for slick-carousel.css on all the files that had it; then adding the CDN link directly to <Helmet/>

the links https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css

LekoArts commented 2 years ago

Thanks for the updates on the issue. I'll close this one as this doesn't seem to be a core Gatsby issue but user error when using slick carousel.

julianmojico commented 2 years ago

The problem for me started when I added "gatsby-plugin-react-svg" to dependencies and gatsby config; this 2 css properties that uses url decoder function started throwing the error, so I fixed by removing them:

  background: url('../../../static/img/arrow.svg') ;
  animation: opacity-cycle 5s;

vic08 commented 2 years ago

I've had a problem with dynamic string in the tailwind classNames when using the tailwind postcss plugin. Tailwind plugin takes plain strings from from classes and generates the css for it, so if you have "max-w-[${MAX_CONST}]" as a className - it will generate a broken css.

AtRiskMedia commented 1 year ago

@vic08 put me on the righteous path. That could have been a much darker, longer night. For me it was an improper implementation of extend > keyframes and a "Missing semicolon" error. Removing the tailwinds.config.js entry fixed it. (Better solution; i'm going to debug as i'm sure this was all something i had done wrong in the first place.)

Big ups on the tailwinds heads-up. I wasn't thinking in that direction.

ryancheta commented 8 months ago

The problem for me started when I added "gatsby-plugin-react-svg" to dependencies and gatsby config; this 2 css properties that uses url decoder function started throwing the error, so I fixed by removing them:
  background: url('../../../static/img/arrow.svg') ;
  animation: opacity-cycle 5s;

I know this is already closed but for anyone else experiencing this issue and landing here, this also solved my issue. As soon as I removed the svg import in my css file, the build succeeded. Very odd though as the gatsby-plugin-react-svg npm page states we can import svg's in css files.

gatsbyjs / gatsby