Apply codemods for Next.js 16 #6369
Conversation
| const hasExposures = breachesDataArray.length > 0; | ||
| const hasUnresolvedBreaches = tabSpecificExposures.length > 0; | ||
|
|
||
| const TabContentActionNeeded = () => { |
There was a problem hiding this comment.
This file defined three components (TabContentActionNeeded, TabContentFixed, and getZeroStateIndicator - the latter for some reason not a component) inside another component, leading to them getting recreated on every render. The linter pointed this out.
There was a problem hiding this comment.
I had an LLM figure out the "circular reference" error that ESLint threw, and it actually organised it quite neatly, grouping a few things together that belonged together but were separate. What I did was inspect the diff between the before and after, and check that everything that was removed from the before had a place in the after, and that all the additions also made sense.
eslint.config.js
Outdated
| ...compat.config({ | ||
| extends: ["next"], | ||
| }), | ||
| const estlingConfig = defineConfig([ |
There was a problem hiding this comment.
typo here, eslintConfig is probably intended
| UserAnnouncementWithDetails[] | null | ||
| >(props.userAnnouncements); | ||
| useEffect(() => { | ||
| // TODO The `react-hooks` ESLint rules didn't apply correctly |
There was a problem hiding this comment.
Please write a ticket for this TODO so it doesn't get lost
kschelonka
left a comment
kschelonka
left a comment
There was a problem hiding this comment.
I've read up on next based on your comments and I think I understand why the workarounds are done. Someone with next experience should sign off though.
dependabot
bot
force-pushed
the
dependabot/npm_and_yarn/nextjs-a2457717e1
branch
11 times, most recently
from
e870948 to
e784114
Compare
dependabot
bot
force-pushed
the
dependabot/npm_and_yarn/nextjs-a2457717e1
branch
10 times, most recently
from
65ca7d6 to
3a7aca2
Compare
dependabot
bot
force-pushed
the
dependabot/npm_and_yarn/nextjs-a2457717e1
branch
2 times, most recently
from
24cc584 to
e5b44dd
Compare
dependabot
bot
force-pushed
the
dependabot/npm_and_yarn/nextjs-a2457717e1
branch
4 times, most recently
from
8f032fc to
52ebbef
Compare
codemist
left a comment
codemist
left a comment
There was a problem hiding this comment.
Thanks for adding the comments! The changes look good to me, just pending some merge conflicts.
Vinnl
force-pushed
the
next-16-codemod
branch
from
59718ba to
c387336
Compare
Vinnl
changed the base branch from
dependabot/npm_and_yarn/nextjs-a2457717e1
to
main
|
Hmm, CI jobs appear to be having trouble activating after retargeting this to |
I think some of our manual config got integrated into Next.js's default config. This commit organises the config and removes redundancies, while keeping all existing config.
Vinnl
force-pushed
the
next-16-codemod
branch
2 times, most recently
from
e6f2f9d to
c5bedaf
Compare
With the fixed ESLint config, it turned out we were breaking a number of rules.
What I did:
- npx storybook@latest upgrade.
- Change to `moduleResolution: bundler` in tsconfig, because otherwise
importing Storybook types failed.
- Add explicit paths to tsconfig for Glean, which doesn't seem to work
well with moduleResolution: bundler without it.
For some more background on the moduleResolutionChange, this is the
error message I faced on `npm run build`:
.storybook/main.ts:6:38
Type error: Cannot find module '@storybook/nextjs' or its corresponding type declarations.
There are types at 'blurts-server/node_modules/@storybook/nextjs/dist/index.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
Vinnl
force-pushed
the
next-16-codemod
branch
from
c5bedaf to
70e130d
Compare
* transpile dependencies in next config * add comment
Vinnl
force-pushed
the
next-16-codemod
branch
from
70e130d to
242021c
Compare
It's the only tool we use that still needs that. Hopefully down the road we can remove it, either thanks to Jest properly supporting ES Modules natively, or because we switch to another test framework.
See https://nextjs.org/blog/next-16 and https://nextjs.org/blog/next-16-1
Apart from the codemode, I had to fix our ESLint config, which now had some kind of circular references but had gotten fairly messy anyway. All the same config should still be there, although some of it moved into Next's own packages. However, some of them (most notably react-hooks) apparently didn't cover all our code, so I had to fix a bunch of errors, or at least add exceptions for them for now - I left a comment when I did.
I split the changes from the codemod and the changes I had to do for ESLint into separate commits, so that might help during reviewing.
Note that this merges into #6366, though maybe it should just targetForgot that I had done that and just rebased onmain🤔main- so I just retargeted this there.