Unable to build website for locale en

[nhaqi2c]

Hi,

I am using https://shoelace.style/ web component in docusaurus component. The Dev mode is working fine though am unable to build it for production. I am getting the following error.

[ERROR] Unable to build website for locale en.
[ERROR] Error: Failed to compile with errors.
at D:\i2c-lib-portal\node_modules@docusaurus\core\lib\webpack\utils.js:180:24
at D:\i2c-lib-portal\node_modules\webpack\lib\MultiCompiler.js:554:14
at processQueueWorker (D:\i2c-lib-portal\node_modules\webpack\lib\MultiCompiler.js:491:6)
at processTicksAndRejections (node:internal/process/task_queues:78:11)

[StreakingMan]

got the same error, Still looking for a solution...

[numankhan4]

If you try to add something that requires a browser or window element to a server-side rendered component, the compiler may throw an error. In such cases, you can load the component using the "browserOnly" or execution environment hook. For example, to load a customElement component in the browserOnly hook and avoid the error, you can do the following:

import { BrowserOnly } from "@docusaurus/core";

return (

{() => {
const SlButton = require("@shoelace-style/shoelace/dist/react").SlButton;
return Button;
}}

);

In this code snippet, the BrowserOnly component from the @docusaurus/core package ensures that the component is only rendered in the browser, while the require statement inside the callback function dynamically loads the SlButton component from the "@shoelace-style/shoelace/dist/react" module. This way, the component can safely use browser-specific features without causing any server-side rendering errors.

[StreakingMan]

@numankhan4

🙏Thanks a lot，your suggestion inspired me.

In my case, I was tring to render react-native components，I have written a webpack plugin to translate react-native to react-native-web:

{
      // ...
      resolve: {
             alias: {
                  'react-native': 'react-native-web',
             }
      }
}

Everthing is ok when I run docusaurus start，but it throws error when docusaurus build

And then I refer to the react-native-element docusaurus document's config

        // ...
        resolve: {
          alias: {
            'react-native$': 'react-native-web',
            //...
          },
          fallback: isServer
            ? {}
            : {
                path: require.resolve('path-browserify'),
                os: require.resolve('os-browserify/browser'),
                fs: false,
                process: 'process/browser',
              },
        },

It works! I hope my experience will help you 😄 @nhaqi2c

[nhaqi2c]

@numankhan4 and @StreakingMan, I have fixed the problem using your suggestion.