Not working with loadable SSR

[fmartins-andre]

I'm using it with:

• Gatsby;
• gatsby-plugin-loadable-components-ssr; and
• @loadable/component

when I run gatsby build it crash with this error message:

failed Building static HTML for pages - 1.019s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

   10 | function invariant(condition, message) {
   11 |   if (condition) return;
 > 12 |   var error = new Error("loadable: " + message);
      | ^
   13 |   error.framesToPop = 1;
   14 |   error.name = 'Invariant Violation';
   15 |   throw error;

  WebpackError: Invariant Violation: loadable: SSR requires `@loadable/babel-plugin`, please install it

  - loadable.esm.js:12 
    node_modules/@loadable/component/dist/loadable.esm.js:12:1

  - loadable.esm.js:153 
    node_modules/@loadable/component/dist/loadable.esm.js:153:1

I then installed the @loadable/babel-plugin package but I had no luck! The error continues to trigger! There's no error if I remove the react-loadable-visibility call from the code.

Any ideas?

[bartlomn]

+1, have the same issue. My stack is based on Razzle.

[fmartins-andre]

I manage to solve this problem using "magic-comments". https://loadable-components.com/docs/babel-plugin/#magic-comments

@bartlomn , please try this approach and tell us your results.

[bartlomn]

Hey @fmartins-andre ❤️ Thanks for the suggestion. For clarity, here's what worked for me:

const Component = loadableInViewport(/* #__LOADABLE__ */ () => import('../Component'));

[fmartins-andre]

Great! I think this solves this problem, then. I'm closing this issue now, but I think that would be useful if the maintainer could mention this kind of situation in the README.md file!

@tazsingh