Dynamic import not working

[KatSick]

Description

Dynamic import not split bundle into chunks.

Expected behavior

When using import('./component') inside some callback webpack should extract it to separate bundle.

Actual behavior

It always loads full bundle

Environment

1. npm ls react-scripts-ts (if you haven’t ejected): react-scripts-ts@2.2.0
2. node -v: v6.11.0
3. npm -v: 3.10.10

Then, specify:

1. Operating system: Mac OS Sierra
2. Browser and version: Chrome latest

[codeaid]

I have the same problem. I got it working by changing extension of the file containing my async component import statements from *.ts to *.js.

Looks like it's some configuration issue somewhere.

Edit
Actually ignore that. Tried to build the project and got this:

Creating an optimized production build...
Warning: Got empty options
Warning: The 'no-use-before-declare' rule requires type checking
ts-loader: Using typescript@2.4.0 and /var/www/blah/tsconfig.json
Skipping static resource "/var/www/blah/build/static/js/main.756df096.js" (2.73 MB) - max size is 2.1 MB
Failed to compile.

static/js/main.756df096.js from UglifyJs
Unexpected token: punc ()) [./~/source-map-loader!./src/routes/config.js:9,0][static/js/main.756df096.js:72742,87]

error Command failed with exit code 1.

Edit 2
Weird, renamed my file back to *.ts and inlined my async calls instead of declaring them at the top of the file as const and it works now.

This is what I had:

import asyncComponent from './components/AsyncComponent';

const HomeScreen = asyncComponent(() => import ('screens/HomeScreen'));

export default [
    // core routes
    {
        path: '/',
        title: 'Home',
        component: HomeScreen,
    },
];

and this is what I now have (which works):

import asyncComponent from './components/AsyncComponent';

export default [
    // core routes
    {
        path: '/',
        title: 'Home',
        component: asyncComponent(() => import ('screens/HomeScreen')),
    },
];

[rohmanhm]

react-script-ts not yet support import() since it stuck with Typescript v2.3.3.
Dynamic import available in Typescript v2.4.*. For a while just use require.ensure() to replace import()

[wmonk]

We have shipped 2.4 now, so this should be working. Please update so I can close this issue.

[nicolaserny]

Dynamic import works fine with the latest version.
But you have to update the tsconfig.json file to make it work:
Set module to esnext (instead of commonjs)

[wmonk]

@nicolaserny can you open a PR with the necessary updates to tsconfig?

[codeaid]

It's worked for me without changing module since TS 2.4 RC. I don't think you even need to change anything in your config files.

[nicolaserny]

I've just created a basic example (create react app ts + react router). see attached document.
with commonjs module:
File sizes after gzip:

60.42 KB build/static/js/main.6b8b3e4e.js
289 B build/static/css/main.9a0fe4f1.css

with esnext module:
File sizes after gzip:

60.53 KB (+106 B) build/static/js/main.1319f34a.js
289 B build/static/css/main.9a0fe4f1.css
230 B build/static/js/homejs.5a764d30.chunk.js
227 B build/static/js/otherjs.4291caf7.chunk.js

test-code-splitting.zip

[KatSick]

for me with "commonjs" module type import not worked

[JLarky]

I can confirm that it doesn't work with commonjs, it clearly states in https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html

using this new feature with the esnext module target

[rolandjitsu]

@wmonk I'm still having this issue when running tests. Building and running the app works fine with dynamic imports, but not when I run react-scripts-ts test.

Do you know why could this happen?