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

[kingller]

Hi,
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.

[babel-bot]

Hey @kingller! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[thiagoarrais]

Hi, @kingller!

That warning was introduced in Babel 7.5.2 and signals some incompatibility between Babel and the plugins. I'm guessing one of the plugins you used is injecting a variable declaration without adding it to the scope, but I can't pinpoint which one.

I have written a small TS program and transformed it with your config files, but I couldn't reproduce the issue. It is maybe caused by something in your program that triggers the faulty plugin to inject the variable.

Can you provide a minimal program that reproduces this warning?

[kingller]

Hi，@thiagoarrais
It is caused by my code as bellow. The class with @observer doesn't have its name.

import React from 'react';
import { observer } from 'mobx-react';

@observer
export default class extends React.Component<any> {
    render(): React.ReactNode {
        return null;
    }
}

When I give it a name (such as Empty) as bellow

import React from 'react';
import { observer } from 'mobx-react';

@observer
export default class Empty extends React.Component<any> {
    render(): React.ReactNode {
        return null;
    }
}

It's OK.
I am not sure if this is a problem.

[thiagoarrais]

It's potentially a problem with the plugin. I will dig into that. Thanks for the report!

[dolvik]

May be it can help a bit. I had warnings when there were default exports in my ts(x) files and I imported it in my js(x) files.

This problem is likely caused by another plugin injecting
"_default" without registering it in the scope tracker. If you are the author
 of that plugin, please use "scope.registerDeclaration(declarationPath)".
The exported identifier "_default" 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.

[JLHwung]

It seems like we have injected an identifier without declaring binding in the scope.

babel/packages/babel-helper-split-export-declaration/src/index.js

Line 27 in f08062b

id = scope.generateUidIdentifier("default");

Related similar PR: #10172

[listenzz]

similar problem:

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

[jony89]

Same here getting

The exported identifier "_default" 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.

This problem is likely caused by another plugin injecting
"_default" without registering it in the scope tracker. If you are the author
 of that plugin, please use "scope.registerDeclaration(declarationPath)".
The exported identifier "_default" 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.

[sibelius]

is there an easy way to find which plugin is causing this?

[GiancarlosIO]

I haven't tested it yet but the last comment of this PR should work i guess
#10174

[nicolo-ribaudo]

is there an easy way to find which plugin is causing this?

Since the AST is fully mutable we can't track automatically which plugin is inserting a new node, but you can try to understand which transformation that identifier comes from (was that originally a class? an export declaration?)

[thiagoarrais]

@kingller: my PR should fix your warning.

@listenzz and @jony89: your issues are similar but are not the same as kingller's. Please check your build for any third-party plugins and open a new issue if applicable.

[kingller]

OK. Thanks.

[secrettomato]

@listenzz if you are upgrading the latest version of RN, you can try to change the rn-cli.config.js to metro.config.js, i met the same problem and fixed it by doing that

[billyvg]

This is still happening for us using v7.6.0