build: Not able to server render.

[pranshuchittora]

Hi I am trying to integrate react-view in docusaurus. While running the dev server fs not found issue was there. I fixed it by chain the webpack config.

 node: {
          fs: 'empty',
        },

Unfortunately while building the prod build which is server rendered. I am getting fs error as it's been set to empty.

[tajo]

Not enough to reproduce. It should generally work with SSR (like here: https://baseweb.design/components/button/)

[pranshuchittora]

So I am using Docusaurus and while running the dev server it works without any issue given the above config. While building the prod build the clients gets successfully built but the server fails.
When I comment out the react-view code then it gets built successfully.

ERR Log

✔ Client
  Compiled successfully in 1.27m
✖ Server

Compiled with some errors in 1.42m
ReferenceError: Buffer is not defined

(undefined) ReferenceError: Buffer is not defined

at Object. (main:110171:18)

at webpack_require (main:21:30)

at Object. (main:185585:37)

at webpack_require (main:21:30)

at Object. (main:282495:14)

at webpack_require (main:21:30)

at Object. (main:281210:50)

at webpack_require (main:21:30)

at Object. (main:279113:39)

at webpack_require (main:21:30)

(undefined) ./node_modules/@babel/plugin-transform-react-display-name/node_modules/@babel/core/lib/config/files/plugins.js 165:11-24

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx-source/node_modules/@babel/core/lib/config/files/plugins.js 165:11-24

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-display-name/node_modules/@babel/core/lib/config/files/module-types.js 77:17-34

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-display-name/node_modules/@babel/core/lib/config/files/import.js 9:9-25

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx-source/node_modules/@babel/core/lib/config/files/module-types.js 77:17-34

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx-source/node_modules/@babel/core/lib/config/files/import.js 9:9-25

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/core/lib/config/files/plugins.js 165:11-24

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/core/lib/config/files/module-types.js 77:17-34

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx-self/node_modules/@babel/core/lib/config/files/plugins.js 165:11-24

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/core/lib/config/files/import.js 9:9-25

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx-self/node_modules/@babel/core/lib/config/files/module-types.js 77:17-34

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/plugin-transform-react-jsx-self/node_modules/@babel/core/lib/config/files/import.js 9:9-25

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/core/lib/config/files/plugins.js 165:11-24

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/core/lib/config/files/module-types.js 77:17-34

Critical dependency: the request of a dependency is an expression

(undefined) ./node_modules/@babel/core/lib/config/files/import.js 9:9-25

Critical dependency: the request of a dependency is an expression

Error: Failed to compile with errors.

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/@docusaurus/core/lib/webpack/utils.js:145:24

at finalCallback (/home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/MultiCompiler.js:254:12)

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/MultiCompiler.js:277:6

at done (/home/undefined/OSS/rne/react-native-elements/website/node_modules/neo-async/async.js:2931:13)

at runCompilers (/home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/MultiCompiler.js:181:48)

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/MultiCompiler.js:188:7

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/MultiCompiler.js:270:7

at finalCallback (/home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/Compiler.js:257:39)

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/Compiler.js:273:13

at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/undefined/OSS/rne/react-native-elements/website/node_modules/tapable/lib/HookCodeFactory.js:33:10), :40:1)

at AsyncSeriesHook.lazyCompileHook (/home/undefined/OSS/rne/react-native-elements/website/node_modules/tapable/lib/Hook.js:154:20)

at onCompiled (/home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/Compiler.js:271:21)

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/Compiler.js:681:15

at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/undefined/OSS/rne/react-native-elements/website/node_modules/tapable/lib/HookCodeFactory.js:33:10), :4:1)

at AsyncSeriesHook.lazyCompileHook (/home/undefined/OSS/rne/react-native-elements/website/node_modules/tapable/lib/Hook.js:154:20)

at /home/undefined/OSS/rne/react-native-elements/website/node_modules/webpack/lib/Compiler.js:678:31

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[arpitBhalla]

BrowserOnly API of docusaurus made it work,

 <BrowserOnly fallback={<>Loading...</>}>
        {() => <ButtonPlayground/>}
</BrowserOnly>

now RNE have integrated playground 🎉