Parcel: Code splitting not working with Typescript

Created on 15 Jun 2018  ·  6Comments  ·  Source: parcel-bundler/parcel

🐛 bug report

Parcel doesn't generate chunks for dynamic imports when using typescript.

Here's an example:

  1. A project in JS that works: https://github.com/a-adroit/reacappwithparcel/
  2. Same project in TS that doesn't work https://github.com/reflog/parcel_ts_chunk_prob

🎛 Configuration (.babelrc, package.json, cli command)

No custom config

🤔 Expected Behavior

Chunks should be generated

😯 Current Behavior

only one bundle is generated

Most helpful comment

ok. got it working with:

{
  "compilerOptions": {
    "target": "es2018",
    "sourceMap": true,
    "module": "esnext",
    "jsx": "preserve",
    "lib": ["esnext"]
  }
}

All 6 comments

Typescript, by default, bundles all imports into a single file. Add a tsconfig.json similar to this one to the project:

{
    "compilerOptions": {
        "target": "esnext",
        "sourceMap": true,
        "module": "es6"
    }
}

Thanks @KeineLimonade, using these settings actually works!
But when I try to use that tsconfig, I am getting the following errors in the IDE:

[ts] Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

This is extremely confusing :)

ok. got it working with:

{
  "compilerOptions": {
    "target": "es2018",
    "sourceMap": true,
    "module": "esnext",
    "jsx": "preserve",
    "lib": ["esnext"]
  }
}

我的这个问题还是存在
我已经按照上面的方法加过了 但是还是存在

if this is a fix it should be the parcel.js default. However, for me this is not fixing anything.

The tsconfig is not fixing anything either. I am having the same issue in a typescript project with react router as well.

Was this page helpful?
0 / 5 - 0 ratings