How i can use loadable Visibility?

🙋Get Help
1

Hello ,
i have many components in index page and those are havy so if i load all of them, then my javascript excution time is getting longer so i was trying to use https://www.npmjs.com/package/react-loadable-visibility but i am unable to use it
can anyone help me with steps to configure webpack?

i am getting this error

    Invariant Violation: loadable: SSR requires `@loadable/babel-plugin`, please install it
      at invariant (webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:13:118)
      at new InnerLoadable (webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:14:2002)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:643)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:396:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:1199)
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:470:116)
      at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:53:243)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
2

Hi @mehul!

Looking at the package, seems like it should probably work out of the box with frontity. In fact, frontity already includes the @loadable/babel-plugin because frontity comes with loadable-components included. Is it possible that you have installed react-loadable or @loadable/component separately in your project?

Otherwise, it seems that this is a fairly common error in react-loadable: https://github.com/gregberge/loadable-components/issues?q=SSR+requires+`%40loadable%2Fbabel-plugin` that does not actually point to the root problem as the author admits, I would suggest you try the solutions that from the github issues on the loadable-compnents repo first because I think it’s likely that your problem is not related to frontity!

As an aside, mind that at the moment it’s not possible to extend the babel or webpack configuration in frontity from user code - sorry about that! We’re working on adding that feature and it’s planned for the near future, but no ETA yet.

Hope this helps! :slightly_smiling_face:

1 Like