Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kingller opened this issue Jul 25, 2019 · 15 comments · Fixed by #10302

Comments

@kingller
Copy link

commented Jul 25, 2019

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

This comment has been minimized.

Copy link
Collaborator

commented Jul 25, 2019

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 thiagoarrais self-assigned this Jul 29, 2019
@thiagoarrais

This comment has been minimized.

Copy link
Contributor

commented Jul 29, 2019

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

This comment has been minimized.

Copy link
Author

commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 30, 2019

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

@dolvik

This comment has been minimized.

Copy link

commented Jul 30, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 30, 2019

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

id = scope.generateUidIdentifier("default");

Related similar PR: #10172

@listenzz

This comment has been minimized.

Copy link

commented Jul 31, 2019

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

This comment has been minimized.

Copy link

commented Jul 31, 2019

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

This comment has been minimized.

Copy link

commented Aug 2, 2019

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

@GiancarlosIO

This comment has been minimized.

Copy link

commented Aug 2, 2019

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

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Aug 3, 2019

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 added a commit to thiagoarrais/babel that referenced this issue Aug 5, 2019
For compatibility with the Typescript plugin

Fixes babel#10264
@thiagoarrais

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2019

@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

This comment has been minimized.

Copy link
Author

commented Aug 6, 2019

OK. Thanks.

@JLHwung JLHwung added the Has PR label Aug 8, 2019
nicolo-ribaudo added a commit that referenced this issue Aug 8, 2019
* Decorators legacy: register inserted declaration

For compatibility with the Typescript plugin

Fixes #10264

* Register declaration but also keep replaceWithMultiple
@secrettomato

This comment has been minimized.

Copy link

commented Sep 2, 2019

@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 comment has been minimized.

Copy link

commented Sep 19, 2019

This is still happening for us using v7.6.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.