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

[zhenliliu]

🐛 Bug Report

I have configed '@loadable/babel-plugin' in babel.config.js, but when i use SSR to render react file ,then i got this error message

this is my config file

and this is SSR

this is client side route file

i want to get some help and to fix it

[theKashey]

Try to hoist loadable plugin. I reckon plugin-syntax-dynamic-import "eats" all imports before loadable plugin.

[zhenliliu]

Try to hoist loadable plugin. I reckon plugin-syntax-dynamic-import "eats" all imports before loadable plugin.

i have try do it, but it still not working

[KleinMaximus]

I have similar trouble

[theKashey]

I've double-checked the babel plugin code, and it seems to be legitly not working - the problem is "classical" - https://jamie.build/babel-plugin-ordering.html - different plugins are conflicting with each other.
It's easy to fix it, as explained in the linked page, but it would make loadable plugin slightly slower.
However, we don't have a choice.

[zhenliliu]

I've double-checked the babel plugin code, and it seems to be legitly not working - the problem is "classical" - https://jamie.build/babel-plugin-ordering.html - different plugins are conflicting with each other.
It's easy to fix it, as explained in the linked page, but it would make loadable plugin slightly slower.
However, we don't have a choice.

but How to fix this problem

[lovewinders]

I have similar trouble, SSR requires @loadable/babel-plugin, please install it

[theKashey]

@lovewinders - trouble is with @loadable/babel-plugin (however you are correct, it's required)

[lovewinders]

@lovewinders - trouble is with @loadable/babel-plugin (however you are correct, it's required)

my question issue is https://github.com/gregberge/loadable-components/issues/484

[shad-k]

@theKashey any update on how to solve this? I am facing the same issue.

[theKashey]

Update: you can't solve it, there is a really small change to be made to the babel plugin, but I can't find enough time to tackle it.
However, I could do the change, open a PR, and let you test it, so we would share a feature development burden.

[shad-k]

@theKashey sure I can test it. Let me know once you've made a PR.

[theKashey]

The "fix" is really super simple, see PR. It would be great if any of you would just copy-paste this gist to node_modules/@loadable/babel-plugin/lib/index.js and check if it works. 99% that it is.

[1846689910]

Hi @theKashey,
Thank you for your PR. I tried your fix solution, but it seems the error is still there. BTW, I think your gist is meant to replace node_modules/@loadable/babel-plugin/lib/index.js.

[theKashey]

:(
Just to double check - could you edit a file with loadable to burst possible compilation cache. If it will would not work - then I would gently ask someone for an example to find the real root cause.

[chen86860]

I have the same issue while wrap @loadable-component as a function call, like so:

// Loadable component
import React from 'react'
import loadable from '@loadable/component'

export default loader => loadable(loader, { fallback: <p> Loading...</p> })

and call it from routes definition:

// routes.js
import Loadable from 'components/Loadable'

const Index = Loadable(() => import('@/pages/Index'))

after remove this wrap and import @loadbale/component directly, errors was gone:

// routes.js
import loadable from '@loadbale/component'

const Index = loadable(() => import('@/pages/Index'))

Hope to be helpful :)

[smsivaprakaash]

Hi,
I had the similar problem. Im my case i wasn't using .bablerc. I have configured bable in webpack.
webpack.config.[evn].js

module.exports = {
  mode: 'production',
  .
  .
  .
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              babelrc: false,
              plugins: ['@loadable/babel-plugin'],
            },
          },
     }
   ]
}]}
}

[tmohammad78]

The "fix" is really super simple, see PR. It would be great if any of you would just copy-paste this gist to node_modules/@loadable/babel-plugin/lib/index.js and check if it works. 99% that it is.

Hi @theKashey
I have same issue and i copy-paste it but it not helped me , what can i do for solving it ?

tsconfig

{
  "compilerOptions": {
    "module": "commonjs", // for Node and export
    "target": "es2015", // version of export file it can be any version
    "outDir": "lib", // exported in the folder
    "declaration": true, // add .d.ts file in outDir
    "sourceMap": true, // add .map file outDir  . debugger  forbid implicit any
    "jsx": "react", // transform JSX
    "strict": true, //enable strict  features
    "strictNullChecks": true, //check and compile JS
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true, // forexample for testing jest
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": false, //for casing erro in the route file
    "skipLibCheck": true,
    "lib": ["es6", "dom"],
    "noImplicitReturns": true,
    "noEmit": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    // "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "rootDir": ".",
    "allowJs": true,
    "plugins": [
      { "transform": "typescript-transform-paths" },
      { "transform": "typescript-transform-paths", "afterDeclarations": true }
    ]
  },
  "include": ["./src/**/*", "./server", "./scripts"],
  "exclude": ["node_modules"]
}

Routes.tsx

const MainAuth = loadable(() => import('../Pages/auth/main/index'), {
    fallback: <div>...loading</div>
});

babel.config

  plugins: [
    '@loadable/babel-plugin', 
             ]

server/render

    const extractor = new ChunkExtractor({ statsFile })
    // console.log('extractor', extractor)
    const sheet = new ServerStyleSheet();
    const context = {};
    const extractorNew = extractor.collectChunks(sheet.collectStyles(
        <Provider store={store}>
            <StyleSheetManager sheet={sheet.instance} >
                <StaticRouter location={req.path} context={context}>
                    <div>{renderRoutes(Routes)}</div>
                </StaticRouter>
            </StyleSheetManager>
        </Provider>
    ))
    const content = renderToString(
        extractorNew
    );
       ....

[suhanw]

i have this issue only when i create my own custom loadable function (per the docs):

import baseLoadable from '@loadable/component';

export const loadable = (importCb, options) => {
    return baseLoadable(
        () => importCb().then(module => {
                       // do some stuff
                       return module;
                 }),
        options
    );
}

using the library loadable function works

[EgorVasilev]

@suhanw @chen86860 Hi! I faced the same problem as you and managed to solve it via "magic-comments". If you still want to use your own custom functions you can try to use this approach too: https://loadable-components.com/docs/babel-plugin/#magic-comments

For example, based on @suhanw comment, try to call your custom loadable function like this:
loadable(/* #__LOADABLE__ */ () => import ('./someModule'), {options})