Not working with latest @loadable/server & @loadable/babel-plugin `v5.16.0` version

[denchiklut]

🐛 Bug Report

After updating @loadable/server and @loadable/babel-plugin to version v5.16.0 started having an error:
loadable: SSR requires '@loadable/babel-plugin', please install it

To Reproduce

Steps to reproduce the behavior:
Install latest "@loadable/server" and "@loadable/babel-plugin" version "5.16.0"
Run the app
You will see the message: loadable: SSR requires '@loadable/babel-plugin', please install it

Expected behavior

It should work the same way it worked with previous versions

Link to repl or repo (highly encouraged)

denchiklut/ssr-boilerplate#11

• switch to the feat/update branch:
• yarn install
• yarn dev (u will see an error "loadable: SSR requires @loadable/babel-plugin, please install it")

To see working version:

• switch to the main branch
• yarn install
• yarn dev (this time everything will work)

## System:
 - OS: macOS 13.4.1
 - CPU: (8) arm64 Apple M1 Pro
 - Memory: 63.30 MB / 32.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node
 - Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn
 - npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm
## npmPackages:
 - @loadable/babel-plugin: 5.16.0 => 5.16.0 
 - @loadable/component: ^5.15.3 => 5.15.3 
 - @loadable/server: 5.16.0 => 5.16.0 
 - @loadable/webpack-plugin: ^5.15.2 => 5.15.2 

[denchiklut]

@theKashey small update I think the issue is actually only with @loadable/babel-plugin.
And based on git commits I think the issue might be in isValidIdentifier function. But I have no expertise in writing babel plugins so I might be wrong.

I believe the problem is in the final return statement where we use loadableImportSpecifiers.find
So this:

function isValidIdentifier(path, loadableImportSpecifiers, lazyImportSpecifier) {
   ...
   return (
      path.get('callee').isMemberExpression() &&
      loadableImportSpecifiers.find(specifier => path.get('callee.object').isIdentifier({ name: specifier })) &&
      path.get('callee.property').isIdentifier({ name: 'lib' })
    )
}

should probably be this:

function isValidIdentifier(path, loadableImportSpecifiers, lazyImportSpecifier) {
   ...
   return (
      path.get('callee').isMemberExpression() &&
      loadableImportSpecifiers.every(specifier => path.get('callee.object').isIdentifier({ name: specifier })) &&
      path.get('callee.property').isIdentifier({ name: 'lib' })
    )
}

[theKashey]

Thank you for the insight, that would greatly simply the fix process. @denchiklut +++

[theKashey]

Root cause - broken "loadable" detection

In your code you just import your stuff as loadable, and that's it - https://github.com/denchiklut/ssr-boilerplate/blob/414ff83dc991d59e75db92a031f55b279ee19c15/src/client/components/%40shared/app/routes/index.tsx#L7
"Signatures" broken this moment requiring an explicit configuration, which you should want to implement (😉)

In any case, no breaking changes should occur even for not very widely used functionality and the behaviour has been corrected.
Currently it's too late to perform release, I'll do it tomorrow morning (and time zones are hard)

[theKashey]

@loadable/babel-plugin@5.16.1 should fix the problem