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.

Sign up for GitHub

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

Jump to bottom

Use named components for type imports in update-react-imports #305

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Use named components for type imports in update-react-imports #305

wants to merge 1 commit into from

Conversation

BPScott
Copy link

@BPScott BPScott commented Feb 10, 2022

Fixes #283.

Previously running update-react-imports against

import React from 'react';

const App: React.FunctionComponent<{ message: string }> = ({ message }) => ();

produced the following output:

import * as React from 'react';

const App: React.FunctionComponent<{ message: string }> = ({ message }) => ();

Note that types are not converted to be named exports like when React.BLAH values are used, usage in types still gets plucked off the namespace object. This PR applies the fix documented here, so now it compiles to:

import { FunctionComponent } from 'react';

const App: FunctionComponent<{ message: string }> = ({ message }) => ();

@BPScott
Use named components for type imports
7e1ab1b 
Reference to types like React.ReactNode will be converted into
named imports like ReactNode instead of resulting in a namespace import.
@BPScott BPScott marked this pull request as draft February 10, 2022 18:46
@BPScott BPScott marked this pull request as ready for review February 12, 2022 00:32
@stropho
Copy link

stropho commented May 4, 2022

I was looking for this right now. Well if it helps anyone, you can run the updated codemod from this PR before it gets merged (if ever) like this:
npx -p react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports react-codemod update-react-imports PATH

@lainermeister
Copy link

lainermeister commented Oct 31, 2022 •
edited
Loading

npx -p react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports react-codemod update-react-imports PATH

I tried running this (in the same directory where npx react-codemod update-react-imports worked) and got the following error:

npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports.
npm ERR! package.json npm can't find a package.json file in your current directory.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/elainewong/.npm/_logs/2022-10-31T20_41_09_939Z-debug.log
Install for [
  'react-codemod@https://github.com/BPScott/react-codemod/tree/handle-type-imports#handle-type-imports'
] failed with code 1

Any idea where I'm going wrong? @stropho @thespacemanatee @raopg @pmillspaugh @NoMoreViolence @julianguyen

Thanks!

@stropho
Copy link

stropho commented Nov 1, 2022

@lainermeister sorry, no idea. I tried to run the command right now and it works fine (Linux,Mac) even if I am in a directory where there is no package.json - (based on npm can't find a package.json file in your current directory.)
So my wild guess is that there was either a Github outage 🤣 or there are some security measures on your machine or network... Or the issues is completely somewhere else 🤷

@BPScott BPScott mentioned this pull request Mar 15, 2023
Closed
5 tasks
@TkDodo TkDodo mentioned this pull request Sep 4, 2024
Open
@TkDodo
Copy link

TkDodo commented Sep 4, 2024

This PR correctly addressed 518 files out of 577 in our codebase that had React specific type imports, so thank you for that ❤️

see:

I think it's fair to say that it "fixes" this issue, too.

@alexbit-codemod
Copy link

thanks ben for this PR, which was used by @amirabbas-gh as the foundation for his fix: #325 (comment)

i think we can close this out.

cc @rickhanlonii

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

update-react-imports adds extra import * from React
5 participants
@BPScott @stropho @lainermeister @TkDodo @alexbit-codemod