React production build result differs from non-production one

[danr-za]

Current Behavior

I have a React app which uses Tailwind.
Serve & build are fine, however, a production build does not have any styles applied.

Assuming our project name is foo, Running nx build --project=foo --configuration=production has few issues:

1. A few deprecations warnings are shown:

(node:40823) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:40823) [DEP_WEBPACK_CHUNK_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: ChunkTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:40823) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)

2. The production configuration has namedChunks: true, but chunks have a numeric name
3. The production configuration has extractCss:true - the build indeed create a css file, but it is not referenced anywhere which results in an app without any styles. (when extractCss: false, it works as expected)

A non production build works as expected.

Expected Behavior

Should create a working production build as expected by configuration

Steps to Reproduce

• Create a workspace with React app
• Add tailwind configuration with postcss (and apply some styles)
• Configure extractCss: true and namedChunks: true
• Run nx build --configuration=production and see the result.

Environment

Node : 14.16.1
  OS   : darwin x64
  yarn : 1.22.10
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.6.5
  @nrwl/cypress : 12.6.5
  @nrwl/devkit : 12.6.5
  @nrwl/eslint-plugin-nx : 12.6.5
  @nrwl/express : Not Found
  @nrwl/jest : 12.6.5
  @nrwl/linter : 12.6.5
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 12.6.5
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.6.5
  @nrwl/web : 12.6.5
  @nrwl/workspace : 12.6.5
  @nrwl/storybook : 12.6.5
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[montogeek]

Have you tried with NODE_ENV=production your_command?

[danr-za]

If I'm not mistaken, nx sets that env variable automatically when running --configuration=production
anyway, I get the same result.

[FrozenPandaz]

Could you please provide a repo that we can pull down to reproduce the issue?

[danr-za]

@FrozenPandaz Sure.
So, I have a few insights, here's the repo - https://github.com/danr-za/nx-react-repro

You have a few branches:

1. master - a clean new repo
   • Works as expected
2. with-tailwind-webpack4- set up tailwind, added a lazy chunk
   • Works as expected
3. with-tailwind-webpack5 - same as with-tailwind-webpack4 but with webpack5
   • namedChunks is ignored and chunk name is numeric
   • Webpack plugins deprecation messages appear

Regarding styles.scss not referenced in index.html - I think its related to this #6558 because the amount of css in the work repo is > 200kb (I couldn't find something to download to check it with) but it makes sense.

Notes:

• Everything was built with production configuration

[danr-za]

I can confirm that everything works as expected with Webpack 4. (except this #6485)

[fetters5]

I was the one who has the issue with #6485, this issue will occur in a react app w/o tailwind as well, as soon as you get above 50KB in styles.scss it loses the ability to track the chunks in production build mode only, it works fine if you run the server with the prod flag and injects the css chunks into index.html.

I just created a new react app in nx and added a bunch of css fluff to get over 50 KB in styles

[danr-za]

@FrozenPandaz I think you can now remove the repro needed label

[danr-za]

@FrozenPandaz ?

[markogresak]

@danr-za I believe you're correct with your comment at #6819 (comment), this issue is related to what I am reporting at #6819.

When digging around the code, I found that the vendorChunk condition for isWebpack5 is different, and it looks incomplete.

The following change fixed my problem: 1a5b78b#diff-52ecb0171c4d78b57f8c7426324be739911887d250d4abc1934e6b1dbba4dc1fL129 (PR #6822). @danr-za can you check if it works for your case as well? This would mean we can close 2 issues with the PR.

[danr-za]

Sure, will test it later today and let you know @markogresak.
Thanks

[jaysoo]

Hi @danr-za 👋

Can you try again with 12.8.0? There were fixes to the style config in that version.

I tried the repro app, and I am able to see the styles.css file being loaded.

Let me know if you continue to run into this issue.

[jaysoo]

If it's because of #6558, I know what the issue is and it will be patched soon.

[danr-za]

Hey @jaysoo !
Thanks for the fix regarding styles.

Regarding the namedChunks, in 12.8.0 the output is not named even though it is set to true. (Webpack 5)

[danr-za]

Closing as everything looks ok since v13

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.