Search code examples
typescriptbabeljs

How to fix the warning when use @babel/plugin-transform-typescript to compile typescript


When I use @babel/plugin-transform-typescript to compile typescript, the warning happens

This problem is likely caused by another plugin injecting "_class" without registering it in the scope tracker. If you are the author of that plugin, please use "scope.registerDeclaration(declarationPath)". The exported identifier "_class" is not declared in Babel's scope tracker as a JavaScript value binding, and "@babel/plugin-transform-typescript" never encountered it as a TypeScript type declaration. It will be treated as a JavaScript value.

I cannot find out why.

Here is my babel.config.js

module.exports = {
    presets: ['@babel/preset-typescript', '@babel/preset-react', '@babel/preset-env', 'mobx'],
    plugins: [
        ['@babel/plugin-transform-typescript', { allowNamespaces: true }],
        // Stage 0
        '@babel/plugin-proposal-function-bind',

        // Stage 1
        '@babel/plugin-proposal-export-default-from',
        '@babel/plugin-proposal-logical-assignment-operators',
        ['@babel/plugin-proposal-optional-chaining', { loose: false }],
        ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
        ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
        '@babel/plugin-proposal-do-expressions',

        // Stage 2
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        '@babel/plugin-proposal-function-sent',
        '@babel/plugin-proposal-export-namespace-from',
        // '@babel/plugin-proposal-numeric-separator',
        '@babel/plugin-proposal-throw-expressions',
        '@babel/plugin-proposal-object-rest-spread',

        // Stage 3
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-syntax-import-meta',
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        // '@babel/plugin-proposal-json-strings',

        // Other
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-modules-commonjs',
        'jsx-control-statements'
    ]
}

And part of my webpack.config.js

module.exports = {
    // ...
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.js', '.ts', '.tsx']
    },

    module: {
        rules: [
            {
                test: /\.[tj]sx?$/,
                loader: 'babel-loader',
            },
        ]
    }
};

And the program works OK. When I use ts-loader instead, it's OK too.

Can you help me? Thanks.


Solution

  • The issue is fixed. You can see https://github.com/babel/babel/issues/10264