Issues with styled components and the faster builds

[B4nan]

We enabled the faster build on https://github.com/apify/apify-docs (unfortunately we have some private package registry in there, so not usable as a repro), and the CSS from the styled components are present only on the dev builds, and completely missing out from the production builds. I realized it is probably because the build is no longer using babel, so our babel plugin is not effective (https://github.com/apify/apify-docs/blob/master/babel.config.js#L3). I tried to use https://github.com/rspack-contrib/rsbuild-plugin-styled-components instead, as described in their readme, but I can't make it work.

× Module build failed:
  ╰─▶   × SyntaxError: /Users/adamek/htdocs/apify/apify-docs/apify-docs-theme/src/theme/TOCItems/index.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (43:9):
        │
        │   41 |
        │   42 |     return (
        │ > 43 |         <TOCItemTree
        │      |         ^
        │   44 |             toc={tocTree}
        │   45 |             className={className}
        │   46 |             linkClassName={linkClassName}
        │
        │ Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
        │ If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
        │
        │ If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
        │ You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
        │       npx cross-env BABEL_SHOW_CONFIG_FOR=/Users/adamek/htdocs/apify/apify-docs/apify-docs-theme/src/theme/TOCItems/index.jsx <your build command>
        │ See https://babeljs.io/docs/configuration#print-effective-configs for more info.
        │
        │     at constructor (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:359:19)
        │     at Parser.raise (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:3266:19)
        │     at Parser.expectOnePlugin (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:3300:18)
        │     at Parser.parseExprAtom (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10941:18)
        │     at Parser.parseExprSubscripts (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10615:23)
        │     at Parser.parseUpdate (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10600:21)
        │     at Parser.parseMaybeUnary (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10580:23)
        │     at Parser.parseMaybeUnaryOrPrivate (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10434:61)
        │     at Parser.parseExprOps (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10439:23)
        │     at Parser.parseMaybeConditional (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10416:23)
        │     at Parser.parseMaybeAssign (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10379:21)
        │     at /Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10349:39
        │     at Parser.allowInAnd (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:11951:12)
        │     at Parser.parseMaybeAssignAllowIn (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10349:17)
        │     at Parser.parseParenAndDistinguishExpression (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:11210:28)
        │     at Parser.parseExprAtom (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10863:23)
        │     at Parser.parseExprSubscripts (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10615:23)
        │     at Parser.parseUpdate (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10600:21)
        │     at Parser.parseMaybeUnary (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10580:23)
        │     at Parser.parseMaybeUnaryOrPrivate (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10434:61)
        │     at Parser.parseExprOps (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10439:23)
        │     at Parser.parseMaybeConditional (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10416:23)
        │     at Parser.parseMaybeAssign (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10379:21)
        │     at Parser.parseExpressionBase (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10333:23)
        │     at /Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10329:39
        │     at Parser.allowInAnd (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:11946:16)
        │     at Parser.parseExpression (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:10329:17)
        │     at Parser.parseReturnStatement (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12636:28)
        │     at Parser.parseStatementContent (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12288:21)
        │     at Parser.parseStatementLike (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12257:17)
        │     at Parser.parseStatementListItem (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12237:17)
        │     at Parser.parseBlockOrModuleBlockBody (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12810:61)
        │     at Parser.parseBlockBody (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12803:10)
        │     at Parser.parseBlock (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12791:10)
        │     at Parser.parseFunctionBody (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:11634:24)
        │     at Parser.parseFunctionBodyAndFinish (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:11620:10)
        │     at /Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12935:12
        │     at Parser.withSmartMixTopicForbiddingContext (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:11928:14)
        │     at Parser.parseFunction (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12934:10)
        │     at Parser.parseExportDefaultExpression (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:13389:19)
        │     at Parser.parseExport (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:13315:25)
        │     at Parser.parseStatementContent (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12370:27)
        │     at Parser.parseStatementLike (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12257:17)
        │     at Parser.parseModuleItem (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12234:17)
        │     at Parser.parseBlockOrModuleBlockBody (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12810:36)
        │     at Parser.parseBlockBody (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12803:10)
        │     at Parser.parseProgram (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12131:10)
        │     at Parser.parseTopLevel (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:12121:25)
        │     at Parser.parse (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:13929:10)
        │     at parse (/Users/adamek/htdocs/apify/apify-docs/node_modules/@babel/parser/lib/index.js:13963:38)

Will try to build a repro for this when I have some spare time.

[B4nan]

When I remove the babel.config.js and only keep the rsbuild.config.ts (with just the styled components plugin in there), I get this error instead:

[ERROR] Error:   × TypeError: Cannot read properties of undefined (reading 'set')
  │     at Object.fn (/Users/adamek/htdocs/apify/apify-docs/node_modules/webpack/lib/DefinePlugin.js:362:37)
  │     at SyncHook.callAsyncStageRange (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
  │     at SyncHook.callStageRange (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
  │     at QueriedHook.call (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
  │     at /Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/core/dist/index.js:13679:28
  │     at last.function (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/core/dist/index.js:14477:25)
  │ 


[ERROR] Error: Unable to build website for locale en.
    at tryToBuildLocale (/Users/adamek/htdocs/apify/apify-docs/node_modules/@docusaurus/core/lib/commands/build/build.js:78:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async /Users/adamek/htdocs/apify/apify-docs/node_modules/@docusaurus/core/lib/commands/build/build.js:34:9
    at async mapAsyncSequential (/Users/adamek/htdocs/apify/apify-docs/node_modules/@docusaurus/utils/lib/jsUtils.js:21:24)
    at async Command.build (/Users/adamek/htdocs/apify/apify-docs/node_modules/@docusaurus/core/lib/commands/build/build.js:33:5)
    at async Promise.all (index 0)
    at async runCLI (/Users/adamek/htdocs/apify/apify-docs/node_modules/@docusaurus/core/lib/commands/cli.js:56:5)
    at async file:///Users/adamek/htdocs/apify/apify-docs/node_modules/@docusaurus/core/bin/docusaurus.mjs:44:3 {
  [cause]: [Error:   × TypeError: Cannot read properties of undefined (reading 'set')
    │     at Object.fn (/Users/adamek/htdocs/apify/apify-docs/node_modules/webpack/lib/DefinePlugin.js:362:37)
    │     at SyncHook.callAsyncStageRange (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
    │     at SyncHook.callStageRange (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
    │     at QueriedHook.call (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
    │     at /Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/core/dist/index.js:13679:28
    │     at last.function (/Users/adamek/htdocs/apify/apify-docs/node_modules/@rspack/core/dist/index.js:14477:25)
    │ 
  ] {
    code: 'GenericFailure'
  }
}

[slorber]

This error is related to a plugin using webpack.DefinePlugin instead of rspack.DefinePlugin

It's explained here how to fix it: https://docusaurus.io/blog/releases/3.6#plugins

[slorber]

I can't really help sorry.

I'd recommend not using StyledCompoonents with Docusaurus in the first place. We never implemented the hooks to allow proper SSR/SSG support for runtime-based CSS-in-JS libs, and now that the trends is to get rid of them, it's not really our plan to add support. I'm surprised that you got it working because most SC sites would usually have a FOUC before hydration.

That being said, you can still use Babel with Rspack, just turn off the swcJsLoader flag.