esbuild-loader not finding any imported module

Question

I am trying to change from ts-loader/babel-loader to esbuild-loader

As per doc, I did the swap from both to:

{
    test: /\.tsx?$/,
    loader: 'esbuild-loader',
    options: {
        loader: 'tsx',
        target: 'es2015'
    }
},
{
    test: /\.(js|mjs|jsx)$/,
    loader: 'esbuild-loader',
    options: {
        loader: 'jsx',
        target: 'es2015'
     }
}

but when I try to run my app I get a lot of these errors:

export '< A >' (imported as '< B >') was not found in '< module >' (module has no exports)

< A > always exists in < module >

And all < module > are installed properly.

I can post my tsconfig and my babelrc, I am just not sure if it matters much. Another point that might be important initial webpack.config was created using CRA and eject.

Dependencies:

"webpack": "^5.61.0",
"webpack-dev-server": "^4.4.0",
"webpack-cli": "^4.9.1",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"esbuild-loader": "^2.16.0",

Thanks :)

Answer 1

I was running into the same issue as you when I was trying to switch out ts-loader for esbuild-loader.

Because I enabled isolatedModules within my tsconfig.json file it meant that I needed to export types with the "type" keyword like this:

export { FetchPaymentMethodsTypes } from './types'; // This is an enum so compiled to JS
export type { FetchPaymentMethodsAction, FetchPaymentMethodsResponse } from './types';

As opposed to this:

export { FetchPaymentMethodsTypes, FetchPaymentMethodsAction, FetchPaymentMethodsResponse } from './types';

See more here which explains this exact issue: https://www.typescriptlang.org/tsconfig#isolatedModules