USWDS-Compile - Bug: Source Map is generating a <No Source>

[jeran-urban]

Describe the bug

the output of the styles.css.map shows the following:

... swds-core/src/styles/mixins/typography/typeset.scss","../../../node_modules/%40uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_margin.scss","../../../node_modules/%40uswds/uswds/packages/uswds-core/src/styles/placeholders/_forms.scss","../../../node_modules/%40uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_font.scss","../../../node_modules/%40uswds/uswds/packages/uswds-core/src/styles/mixins/utilities/_line-height.scss","<no source>", ...

This no source option is throwing compile warnings for webpack 5

Steps to reproduce the bug

run uswds init run npm start on a project with webpack 5

Failed to parse source map from '~\src\uswds\css\<no source>' file: Error: ENOENT: no such file or directory, open '~\src\uswds\css\<no source>'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./src/uswds/css/styles.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/uswds/css/styles.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '~\src\uswds\css\<no source>' file: Error: ENOENT: no such file or directory, open '~\src\uswds\css\<no source>'

If I manually update that no source entry in the list to anything that exists (reuse styles.css again) then the warnings and errors go away.

Expected Behavior

I would expect all css being mapped by the default implementation of the library to have a corresponding source in the map

Related code

No response

Screenshots

No response

System setup

"@uswds/compile": "^1.0.0-beta.3", "@uswds/uswds": "^3.1.0",

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.
• [X] I checked the current issues for duplicate bug reports.

[jeran-urban]

looks like the warning is thrown from this update to CRA: https://github.com/facebook/create-react-app/pull/8227

[mahoneycm]

Hello @jeremyzilar are you still experiencing these warnings from compile?

If so, can you share more information on your project? It may help to have your gulpfile, webpack config, and start script as a start.

I also wanted to note, USWDS-compile is out of beta with our release of 1.0.0.

[mejiaj]

@mahoneycm does your comment still apply to this issue? The mention seems incorrect.

---

I was able to confirm this issue.

How I tested

1. Checkout sandbox main branch; uswds/uswds-sandbox#main.
2. Install and setup via npm run install && npm run init.
3. Run npm start.
4. Visit localhost:8080
5. Open devtools inspector.
6. Go to Sources tab.
7. Find CSS on left and expand src/_styles.

[mahoneycm]

@mejiaj I created a webpack 5 test repo and I was able to properly spin up the app with no errors or compilation warnings.

However, revisiting and following your steps to view the styles, I see the same <no source> error.