Parcel: Code splitting is not working

[maxirozay]

🐛 bug report

Code splitting

{
  "presets": [
    "env",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "dynamic-import-node"
  ]
}

🤔 Expected Behavior

The build should contain one javascript file per page since I import them asynchronously.

😯 Current Behavior

There's only one javascript file.

🔦 Context

I have a Vue application with webpack and I'm trying to migrate to parcel. My application has 5 pages that are lazy-loaded with const TheHome = () => import('../components/TheHome').

💻 Code Sample

I made an example that reproduce my problem. To try you can execute yarn dev or yarn build.
https://github.com/maxirozay/test-parcel

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2
| Node | 8.9.4
| npm/Yarn | 1.3.2
| Operating System | linux (Solus)

[jeanfortheweb]

Just to be sure: AFAIK you have to handle the promise from import(), so import(....).then(...) could already do the trick.

[maxirozay]

I tried it too and it's not working either. The way I'm importing is the way indicated on the vue-router documentation and the way it's working fine with webpack.

I also tried component: async () => await import('./a') which is not working either.

[jeanfortheweb]

If your files getting imported and they work but the actual split does not work, it could be a duplicate of #790 which I'm trying to fix with PR #895 .

If you like, you can try the branch im my fork at #895 and check if the splitting works there for you. I would appreciate you feedback!

[maxirozay]

Ok I'll do that!

[maxirozay]

@jeanfortheweb with your branch I get the error

(node:3568) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/path/node_modules/parcel-bundler/src/builtins/prelude.min.js'
(node:3568) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The file prelude.min.js doesn't exist but prelude.js does exist.

If I remove the code that use prelude.min.js it works but still no code splitting. I have one file for js, css, html and an empty map file.

[jeanfortheweb]

Okay, thats for that, I'll have a look

[lifeiscontent]

I'm also running into this issue.

[gilbert]

I'm also running into this issue. It's a small open source project so one can inspect for themselves:

• Here's the main script tag
• Here's the dynamic import
• Building only yields one js file (the other is from the codemirror.js script)

[glomotion]

On a slightly related note:
I've just checked out the repo posted by @maxirozay - and noticed that none of the vue components seem to be getting the usual postcss transform (i've noticed the same thing in my own work when vue code splitting is enabled - demo repo here).

Could this be something todo with babel-plugin-dynamic-import-node?

[alidlorenzo]

I just ran into this as well. I'm using Parcel with React and loadable-components (and basically same babel config above) and none of the routes are being split, only a single bundle file is generated.

[machycek]

Same issue here. I'm using react-loadable. Once it's fixed I can finally migrate to parcel ✨

[John0x]

Experiencing the same issue with react-router 4 and react-loadable

[ewyler]

Ditto the above, this seems broken - only one bundle file is ever generated. Using Parcel 1.8.1 and tried both with react-loadable as well as a very vanilla import() usage

[zurp]

Also running into the exact same scenario with Vue.

Update @maxirozay : Managed to get it working by using syntax-dynamic-import instead of dynamic-import-node. You can see how it's configured here: https://github.com/neculaesei/vue-starter

[maxirozay]

@neculaesei I tried to update parcel to 1.9.7 and parcel-bundler to 1.9.7 and use your babelrc config and I get the error Cannot read property 'add' of undefined at JSPackager.addAsset...JSPackager.js:57:32.

[antoniopuero]

so it seems to be the issue with those plugins. If I remove transform-runtime - everything works as expected

[devongovett]

Closing. I believe this is because you have dynamic-import-node in your babelrc. This means babel will compile away the import() syntax before parcel sees it, and therefore no code splitting occurs. That babel plugin just compiles import() to require() which means it will be in a single bundle.

[davibe]

Same issue, i don't even have a babelrc

however I am using typescript. Maybe parce.js does this when using typescript ?

[shenjo]

@davibe check this issue , https://github.com/parcel-bundler/parcel/issues/1547