bug with awesome-typescript-loader(4.0.1)

[WingGao]

console log error:

Uncaught ReferenceError: antd_1 is not defined

config:

{
...
use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
       getCustomTransformers: () => ({
            before: [tsImportPluginFactory({
                libraryName: 'antd',
                libraryDirectory: 'lib',
                style: true,
            })],
        }),
                        }
                    },
                ],
}

And complite js file like:

var React = __webpack_require__("./node_modules/react/index.js");
        __webpack_require__("./node_modules/antd/lib/modal/index.js");
        __webpack_require__("./node_modules/antd/lib/modal/style/index.js");
        __webpack_require__("./node_modules/antd/lib/tabs/index.js");
        __webpack_require__("./node_modules/antd/lib/tabs/style/index.js");
        __webpack_require__("./node_modules/antd/lib/input/index.js");
        __webpack_require__("./node_modules/antd/lib/input/style/index.js");
        var react_router_dom_1 = __webpack_require__("./node_modules/react-router-dom/index.js")
          , constsApp_1 = __webpack_require__("./app/constsApp.ts");

You can see that there were no variableName to hold the import antd module.

[mkurcius]

I face the same error with ts-loader@4.1.0

   {
      test: /\.(tsx|ts)?$/,
      loader: 'ts-loader',
      options: {
        getCustomTransformers: () => ({
          before: [tsImportPluginFactory({
            libraryName: 'antd',
            libraryDirectory: 'lib',
            style: 'css',
          })],
        }),
      },
      exclude: /node_modules/,
    },

[ityuany]

@WingGao I have the same situation. Have you solved the problem? Is this library still maintained?

[WingGao]

@CN-YUANYU
I solved this with such config:

// tsconfig.json
{
        "target": "es2016",
        "module": "ESNext",  // !important!
}

// webpack.config.js
        rules: [
...
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.ts|\.tsx$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            useCache: true,
                            useBabel: false, // !important!
                            getCustomTransformers: () => ({
                                before: [tsImportPluginFactory({
                                    libraryName: 'antd',
                                    libraryDirectory: 'lib',
                                    style: true,
                                })],
                            }),
                        },
                    },
                ],
            },
...
]

The "module": "ESNext" in the tsconfig.json is must, because it is how this ts-import-plugin works.

[Brooooooklyn]

@WingGao babel-loader actually is not required if you are developing a pure TypeScript project.
Because the TypeScript could produce smaller and higher performance ES5 codes .
see ReactiveX/rxjs#2093

[ityuany]

@WingGao thinks