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

@babel/plugin-transform-react-jsx-source warning appears regardless of configuration #3818

Closed
1 task done
imidom opened this issue Dec 2, 2022 · 1 comment · Fixed by #4350
Closed
1 task done

Comments

@imidom
Copy link

imidom commented Dec 2, 2022

  • Check if updating to the latest Preact version resolves the issue

Describe the bug
Throwing an error within a Preact application with preact/debug enabled always logs the following warning in the dev console:

Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.

Adding @babel/plugin-transform-react-jsx-source to my babel configuration does not stop the warning.

This warning is logged from here in component-stack.js.

} else if (!hasBabelPlugin) {
hasBabelPlugin = true;
console.warn(
'Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.'
);
}

Looking at that file, I don't believe that hasBabelPlugin is ever set to true before this warning gets logged. Unfortunately, I don't know how to detect the presence or absence of a babel plugin, otherwise I'd suggest a patch!

To Reproduce

(I could not reproduce this in the provided codesandbox environment, maybe because it's using react-error-overlay?)

Example repo: https://github.com/imidom/preact-warning-example

  1. Create a new Preact application using the latest version of preact-cli: npx preact-cli create default lol2 (or following instructions for a webpack - babel build)
  2. Put an undefined variable into <App /> like the following:
    ...
    <Header />
     {eekAnUndefinedVariableThatWillCauseAnException}
    <Router>
    ...
    
  3. Run the application: npm run dev
  4. Load the application with your dev console open
    image

Expected behavior
The error is logged without an accompanying warning about a missing babel plugin if the babel plugin has, in fact, been loaded. Though I was not able to see any difference in output with the plugin installed or removed.

@rschristian
Copy link
Member

Sorry this sat for so long.

Unfortunately it's not possible for us to correct the message for Preact-CLI users, due to the way CLI renders to the root element. While we definitely recommend migrating off of Preact-CLI, we certainly understand that's not always possible, so if the warning continues to bother anyone, best option would be to patch it.

For those who don't use Preact-CLI, you can disregard this, we should have a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants