SSR Loadable can not detect code splitting with typescript, ts-loader

💬 Questions and Help

Problem

typescript project like App.jsx can not code split with @loadable/babel-plugin.

To Reproduce

I’m forked this project and copied examples/server-side-rendering-ts. Example js code was transformed to ts or tsx.

After yarn build:webpack, there is only one js file main.js in public/dist/node and public/dist/web. It seems like @loadable/component not working properly.

https://github.com/DylanJu/loadable-components/tree/master/examples/server-side-rendering-ts/public/dist

If yarn start, you can see an error “Invariant Violation: loadable: SSR requires @loadable/babel-plugin, please install it”

Expected behavior

Output of yarn build:webpack is letters-A.js, letters-B.js, letters-C.js… etc and main.js like server-side-rendering.

Details

For typescript project, I changed some config

1. Added ts-loader in webpack
2. Transformed .js to .ts, .tsx (except minor issue about preventing uglify remove)
3. Changed babel target from src to ts-output because babel can not read typescript directly. ts-output is compiled files from src.

I guess my problem is ‘Loadable detection’. Seeing ts-output/client/App.js in here (https://github.com/DylanJu/loadable-components/tree/master/examples/server-side-rendering-ts/ts-output/client)

App.tsx const A = loadable(() => import('./letters/A'))

compiled App.js const A = component_1.default(() => Promise.resolve().then(() => __importStar(require('./letters/A'))));

It seems keyword loadable is gone. So @ladable/babel-plugin can not detect code splitting. It’s just my opinion.

Please help me!

[phuocng]

Never mind. The order of loaders are important. I changed the loaders to

{
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'ts-loader'], // The orders are important
},

and it works perfectly now!

[DylanJu]

@neoziro @theKashey

It is solved by myself. The problem is because typescript compile as I guessed. Using webpack, babel and typescript same time, A.tsx is compiled in order ts-loader, babel-loader, webpack. In my case, ts-loader changed loadable based on typescript config.

If configure tsconfig.json like this

"compilerOptions": {
    "module": "commonjs",
}

It change App.tsx const A = loadable(() => import('./letters/A'))

to const A = component_1.default(() => Promise.resolve().then(() => __importStar(require('./letters/A'))));

Then @loadable/babel-plugin can’t detect loadable

My Solution

tsconfig.json

"compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
}

It don’t change loadable(() => import('something') so the detection is enable compile normally. I wish help someone like me. And I think it’s needed a guide to this for someone who use typescript.