Loadable-components: Cannot find module '@babel/plugin-syntax-dynamic-import'

[gcardella]

🐛 Bug Report

When in server-side-rendering example, unable to start project due to:

loadable-components/examples/server-side-rendering/babel.config.js: Error while loading config - Cannot find module '@babel/plugin-syntax-dynamic-import'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (loadable-components/packages/babel-plugin/lib/index.js:6:57)
at Module._compile (module.js:635:30)
at Module._compile (loadable-components/examples/server-side-rendering/node_modules/pirates/lib/index.js:83:24)
at Module._extensions..js (module.js:646:10)
at Object.newLoader [as .js] (loadable-components/examples/server-side-rendering/node_modules/pirates/lib/index.js:88:7)
at Module.load (module.js:554:32)
[nodemon] app crashed - waiting for file changes before starting...
[nodemon] restarting due to changes...
[nodemon] starting babel-node src/server/main.js
loadable-components/examples/server-side-rendering/node_modules/@babel/core/lib/config/files/configuration.js:206
throw err;

To Reproduce

• Clone git repository.
• Go into root dir loadable-components and run npm install
• Go into examples/server-side-rendering and run npm install

• Go back to root dir loadable-components and run yarn build
  I get the following after yarn build completes:
  lerna success run Ran npm script 'build' in 4 packages:
  lerna success - @loadable/babel-plugin
  lerna success - @loadable/component
  lerna success - @loadable/server
  lerna success - @loadable/webpack-plugin

• Go into examples/server-side-rendering and run yarn dev and get the error:
  loadable-components/examples/server-side-rendering/babel.config.js: Error while loading config - Cannot find module '@babel/plugin-syntax-dynamic-import'
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
  at Function.Module._load (internal/modules/cjs/loader.js:506:25)
  at Module.require (internal/modules/cjs/loader.js:636:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at Object. (loadable-components/packages/babel-plugin/lib/index.js:6:57)
  at Module._compile (internal/modules/cjs/loader.js:688:30)
  at Module._compile (loadable-components/examples/server-side-rendering/node_modules/pirates/lib/index.js:83:24)
  at Module._extensions..js (internal/modules/cjs/loader.js:699:10)
  at Object.newLoader [as .js] (loadable-components/examples/server-side-rendering/node_modules/pirates/lib/index.js:88:7)
  at Module.load (internal/modules/cjs/loader.js:598:32)
  [nodemon] app crashed - waiting for file changes before starting...

Expected behavior

I expected the server-side-rendering example to start.

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.
https://github.com/gcardella/loadable-components.git

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

System:

• OS: macOS High Sierra 10.13.6
• CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
• Memory: 116.87 MB / 4.00 GB

• Shell: 3.2.57 - /bin/bash

  Binaries:

• Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node

• Yarn: 1.12.3 - /usr/local/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
• Watchman: 4.7.0 - /usr/local/bin/watchman

[gregberge]

Hi @gcardella, thanks for this issue.

The example should run without running yarn at the root of the project. It is just some dependencies that are missing, can someone add them and ensure that the example is working without any node_modules installed at the root of the project.

[gcardella]

I'll checkout the README files in loadable-components/packages/server dir

[dlebedynskyi]

@gcardella looking at your issue,
First problem I see is that you are mixing both yarn (including lerna) and npm (lock file) .
and there are seem to be issues with yarn install in your repo.
specifically related to unpublished error https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.6.tgz.
can you please update to latest from master and remove unnecessary added lock files?

[gcardella]

rm -rf loadable-components. peace.

[gcardella]

Loadable-components is by far the cleanest solution with the least amount of mystery. I got SSR, code splitting on server and client, and Redux, and pm2 working. Getting react-router in here will be easy.

I am able to get this working with loadable-components. Man getting babel and webpack just right can be a brutal turnoff.

Here is a link to the project that maybe could be upgraded to webpack hot middleware or some other enhancements: https://github.com/gcardella/universal-framework

To launch:

1. yarn
2. yarn build

Let me know if there's any problems.

(Apologies for a zip. I was at work and use a different github account and didn't want to change credentials.)

[gcardella]

https://github.com/gcardella/universal-framework

• updated with react-router

Use as an example to help users get up and running with loadable-components.

[gregberge]

Awesome 💯