Skip to content

React: Remove react import in template files #30757

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

Merged
merged 2 commits into from
Mar 14, 2025

Conversation

kasperpeulen
Copy link
Contributor

@kasperpeulen kasperpeulen commented Mar 5, 2025

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 79.9 MB 79.9 MB 0 B 0.56 0%
initSize 79.9 MB 79.9 MB 0 B 0.56 0%
diffSize 97 B 97 B 0 B - 0%
buildSize 7.57 MB 7.57 MB 0 B 1.22 0%
buildSbAddonsSize 1.98 MB 1.98 MB 0 B 1.22 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.88 MB 1.88 MB 0 B 0.42 0%
buildSbPreviewSize 0 B 0 B 0 B - -
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.06 MB 4.06 MB 0 B 1.22 0%
buildPreviewSize 3.51 MB 3.51 MB 0 B 1.22 0%
testBuildSize 0 B 0 B 0 B - -
testBuildSbAddonsSize 0 B 0 B 0 B - -
testBuildSbCommonSize 0 B 0 B 0 B - -
testBuildSbManagerSize 0 B 0 B 0 B - -
testBuildSbPreviewSize 0 B 0 B 0 B - -
testBuildStaticSize 0 B 0 B 0 B - -
testBuildPrebuildSize 0 B 0 B 0 B - -
testBuildPreviewSize 0 B 0 B 0 B - -
name before after diff z %
createTime 7.3s 19.5s 12.2s 0.3 62.4%
generateTime 19.2s 20.1s 842ms 0.6 4.2%
initTime 4.6s 4.8s 192ms 0.63 3.9%
buildTime 10.3s 8.8s -1s -513ms -0.47 -17.2%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 5s 8.4s 3.3s 4.74 🔺40%
devManagerResponsive 4.8s 7.9s 3.1s 4.76 🔺39.4%
devManagerHeaderVisible 724ms 782ms 58ms -0.2 7.4%
devManagerIndexVisible 732ms 1s 364ms 1.59 🔺33.2%
devStoryVisibleUncached 2.5s 3s 513ms 1.54 🔺16.7%
devStoryVisible 1.1s 1.3s 250ms 0.58 18%
devAutodocsVisible 1.1s 1.1s -31ms -0.1 -2.8%
devMDXVisible 1.1s 1.6s 461ms 2.42 🔺28.7%
buildManagerHeaderVisible 805ms 838ms 33ms -0.25 3.9%
buildManagerIndexVisible 824ms 847ms 23ms -0.3 2.7%
buildStoryVisible 795ms 831ms 36ms -0.22 4.3%
buildAutodocsVisible 793ms 768ms -25ms -0.24 -3.3%
buildMDXVisible 766ms 736ms -30ms -0.25 -4.1%

Greptile Summary

This PR removes React imports from template files across Next.js and React renderer templates, aligning with modern React 17+ practices but introducing potential compatibility concerns.

  • Critical: Page.jsx/tsx files still use React.useState without React in scope, which will cause runtime errors
  • Modified tsconfig.json to change jsx option from 'react' to 'preserve', requiring verification with build tools
  • ESLint rule 'react/react-in-jsx-scope' disabled globally in .eslintrc.js
  • TypeScript files using React.FC and other React types need proper type imports
  • Template files using styled-jsx may require React to be in scope for proper functioning

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

20 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile

@@ -1,5 +1,3 @@
import React from 'react';

import './button.css';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: React import needed for JSX syntax - either keep the React import or use a JSX runtime import

Suggested change
import './button.css';
import React from 'react';
import './button.css';

Comment on lines 1 to 4
import { Header } from './Header';
import './page.css';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Either React import needs to be restored, or useState should be imported directly from 'react' like: import { useState } from 'react'

Suggested change
import { Header } from './Header';
import './page.css';
import { Header } from './Header';
import { useState } from 'react';
import './page.css';

Copy link

nx-cloud bot commented Mar 5, 2025

View your CI Pipeline Execution ↗ for commit a5537ec.

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 1m 59s View ↗

☁️ Nx Cloud last updated this comment at 2025-03-14 10:25:03 UTC

@kasperpeulen kasperpeulen force-pushed the kasper/remove-react-import branch from ad0b326 to 4e7a056 Compare March 5, 2025 16:03
@kasperpeulen kasperpeulen added ci:daily Run the CI jobs that normally run in the daily job. ci:merged Run the CI jobs that normally run when merged. and removed ci:normal ci:daily Run the CI jobs that normally run in the daily job. labels Mar 6, 2025
@kasperpeulen kasperpeulen merged commit 7b8512a into next Mar 14, 2025
67 checks passed
@kasperpeulen kasperpeulen deleted the kasper/remove-react-import branch March 14, 2025 15:01
@shilman shilman added maintenance User-facing maintenance tasks react cli and removed feature request labels Mar 16, 2025
@github-actions github-actions bot mentioned this pull request Mar 16, 2025
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:merged Run the CI jobs that normally run when merged. cli maintenance User-facing maintenance tasks react
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy