Add experimental cra-to-next transform in codemod cli #24969

ijjk · 2021-05-10T22:50:53Z

This adds a new codemod to allow transforming a CRA project into a Next.js project automatically

Note: while testing locally the next/cra-compat needs to updated to the absolute path locally since the file doesn't exist in the installed version of Next.js until after this has been merged and published.

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.

timneutkens · 2021-05-18T12:09:05Z

packages/next/cra-compat.js

+      // these need to be the last rule to prevent catching other items
+      // https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/config/webpack.config.js#L594
+
+      const isWebpack5 = config.future && config.future.webpack5


This can't be used to detect webpack 5. Should be:

Suggested change

const isWebpack5 = config.future && config.future.webpack5

const isWebpack5 = parseInt(ctx.webpack.version) === 5

When using the CRA migration it would be a good opportunity to force webpack 5 usage as this is for a "new" app. That also means we don't get a divergence of config here.

We can't force it when @svgr/webpack is used for the import {ReactComponent as Something} from './some.svg' since it's not yet compatible with webpack 5, it's enabled by default when this import isn't used though

Can we codemod / ask users to change that import instead? I don't want converted apps to run on webpack 4 in any case.

Yeah we could ask users to switch to the standard SVG import and use img instead, we could potentially run svgr during the transform and output the svg -> react component files so the loader isn't needed although any future svg -> react component usage would need to be done manually 🤔

Updated in 4feec9b to show an error when we detect this type of import and asks them to migrate to a normal SVG import instead to continue to prevent de-opting webpack 5

ijjk · 2021-06-08T19:58:12Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
buildDuration	13.3s	13.7s	⚠️ +412ms
buildDurationCached	3.4s	3.2s	-158ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +6.3 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.654	2.674	⚠️ +0.02
/ avg req/sec	941.86	935.04	⚠️ -6.82
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.457	1.388	-0.07
/error-in-render avg req/sec	1716.2	1801.68	+85.48

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
index.html gzip	573 B	573 B	✓
link.html gzip	580 B	580 B	✓
withRouter.html gzip	567 B	567 B	✓
Overall change	1.72 kB	1.72 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
buildDuration	15.2s	15.1s	-90ms
buildDurationCached	4.4s	4.4s	-48ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +6.3 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_error.js	16.9 kB	16.9 kB	⚠️ +2 B
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	⚠️ +2 B
link.js	17.4 kB	17.4 kB	⚠️ +2 B
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	⚠️ +6 B

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
buildDuration	11.6s	11.8s	⚠️ +200ms
buildDurationCached	4.8s	4.9s	⚠️ +83ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +6.3 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.693	2.685	-0.01
/ avg req/sec	928.5	931.15	+2.65
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.331	1.376	⚠️ +0.04
/error-in-render avg req/sec	1878.49	1816.79	⚠️ -61.7

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.17 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js feat/cra-to-next-cli	Change
index.html gzip	625 B	625 B	✓
link.html gzip	632 B	632 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: 8254796

packages/next-codemod/bin/cli.ts

Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

ijjk added 10 commits May 8, 2021 23:32

Add initial cra-to-next transform in codemod cli

9699ddd

add install, ignores, next.config.js

f011541

ensure file-loader is used for SSR as well

db2a91f

enable webpack5 by default

03e8efa

Migrate tags from index.html

6cbb24c

Add note about webpack5 option

40b0eff

handle cases from testing

7b99f2c

only create babelrc when svgr is used

cbb8567

fix file-loader compat with webpack 5

c3dffcc

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

6df3ba5

ijjk added the type: next label May 10, 2021

ijjk added 2 commits May 10, 2021 17:56

fix type

6734c30

update craCompat require from testing

7e73ec5

This comment has been minimized.

Sign in to view

ijjk marked this pull request as ready for review May 17, 2021 15:09

ijjk requested review from divmain, lfades, shuding and timneutkens as code owners May 17, 2021 15:09

Merge branch 'canary' into feat/cra-to-next-cli

c17e219

This comment has been minimized.

Sign in to view

timneutkens reviewed May 18, 2021

View reviewed changes

ijjk added 4 commits May 23, 2021 12:44

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

ff2b505

Add nested render error

6547567

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

1f95e37

revert test import change

bd02321

This comment has been minimized.

Sign in to view

ijjk added 2 commits June 3, 2021 09:58

Dont allow import {ReactComponent} from "./svg"

4feec9b

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

0df75b0

This comment has been minimized.

Sign in to view

Allow global CSS imports in node_modules for compat

a39265a

This comment has been minimized.

Sign in to view

ijjk added 2 commits June 7, 2021 11:34

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

70565a6

Add feedback link

967f33d

This comment has been minimized.

Sign in to view

ijjk added 3 commits June 8, 2021 11:16

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

6deba72

Move CRA compat inside webpack-config

761309e

Merge remote-tracking branch 'upstream/canary' into feat/cra-to-next-cli

8254796

ijjk requested a review from timneutkens June 9, 2021 14:01

timneutkens reviewed Jun 9, 2021

View reviewed changes

packages/next-codemod/bin/cli.ts Outdated Show resolved Hide resolved

Update packages/next-codemod/bin/cli.ts

226cc02

timneutkens approved these changes Jun 9, 2021

View reviewed changes

Merge branch 'canary' into feat/cra-to-next-cli

75069e9

timneutkens changed the title ~~Add initial cra-to-next transform in codemod cli~~ Add experimental cra-to-next transform in codemod cli Jun 9, 2021

timneutkens merged commit dde9ad4 into vercel:canary Jun 9, 2021

timneutkens deleted the feat/cra-to-next-cli branch June 9, 2021 14:51

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add experimental cra-to-next transform in codemod cli #24969

Add experimental cra-to-next transform in codemod cli #24969

ijjk commented May 10, 2021 •

edited by timneutkens

Loading

This comment has been minimized.

This comment has been minimized.

timneutkens May 18, 2021

timneutkens May 18, 2021

ijjk May 18, 2021

timneutkens May 19, 2021

ijjk May 19, 2021 •

edited

Loading

ijjk Jun 4, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jun 8, 2021

	const isWebpack5 = config.future && config.future.webpack5
	const isWebpack5 = parseInt(ctx.webpack.version) === 5

Add experimental cra-to-next transform in codemod cli #24969

Add experimental cra-to-next transform in codemod cli #24969

Conversation

ijjk commented May 10, 2021 • edited by timneutkens Loading

Feature

This comment has been minimized.

This comment has been minimized.

timneutkens May 18, 2021

Choose a reason for hiding this comment

timneutkens May 18, 2021

Choose a reason for hiding this comment

ijjk May 18, 2021

Choose a reason for hiding this comment

timneutkens May 19, 2021

Choose a reason for hiding this comment

ijjk May 19, 2021 • edited Loading

Choose a reason for hiding this comment

ijjk Jun 4, 2021

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jun 8, 2021

Stats from current PR

ijjk commented May 10, 2021 •

edited by timneutkens

Loading

ijjk May 19, 2021 •

edited

Loading