react-view build: Not able to server render.

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.

Sep 23 '20 10:09 pranshuchittora

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

Sep 23 '20 18:09 tajo

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.

Sep 23 '20 18:09 pranshuchittora

BrowserOnly API of docusaurus made it work,

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

now RNE have integrated playground 🎉

May 05 '22 19:05 arpitBhalla