Support NextJS 11

[marklawlor]

Original issue

@expo/next-adapter only supports NextJS 9.x. which is now two major versions behind. The Next adapter is broken for two reasons

• Compile error 'Missing class properties transform' when using Next >=10.0.2 Compile error 'Missing class properties transform' when using Next >=10.0.2 #3226
• Please upgrade @expo/webpack-config's webpack dependency to 5.x Please upgrade @expo/webpack-config's webpack dependency to 5.x #2881

I'm creating this issue to discuss just updating just @expo/next-adapter (not Expo web) to the latest NextJS version with webpack 5 support.

Here is a working proof of concept https://github.com/marklawlor/expo-nextjs-webpack-5.

@EvanBacon Whats the best way to PR these patches without breaking Expo web?

In #2881 you indicated that you wished to wait for Create React App to update, but @expo/next-adapter only uses the withUnimodules addon which requires minimal changes which could be added in a non-breaking manner behind flags.

PRs

• [babel-preset-expo] Improve detection for NextJS 11 as a bundler expo#13327
• [feat] Update next-adapter for NextJS 11.x #3586

Known issues / workarounds

My app doesn't compile when enabling webpack5

Note: If your app doesn't not compile under webpack 4 then you have a different issue

The Expo's babel loader automatically transpiles some dependencies, however there seems to be some edge cases where it doesn't work under webpack5.

The workaround is to explicitly list these modules via next-transpile-modules. See this comment for more info #3579 (comment)

My app doesn't compile under webpack 4 or 5, but previously worked

Check your console output, you probably have an error complaining about es6 syntax, maybe a message like SyntaxError: ./node_modules/<modules>/<path>.js: Missing class properties transform.

NextJS have updated their compile targets and removed some babel transforms that were previously needed for react-native modules. You will need to add these as babel overrides in your babel.config.js #3579 (comment)

My monorepo doesn't compile

See this comment #3579 (comment)

My expo app has a JSX transform error

NextJS 11 w/ React 17 uses the new JSX transform. You should enable useTransformReactJsxExperimental for all platforms.

"React.createElement is not a function"

The JSX transform does not require you to import React, so it may have been removed from a shared component. Consider switching to useTransformReactJsxExperimental for all platforms.

I'm getting Postcss errors from NextJS

Run npm list postcss. NextJS has a peerDependancy on PostCSS 8 and you may have to install this peerDependancy yourself.

[EvanBacon]

You can safely make changes without breaking expo web by simply modifying the webpack config in the next-adapter. Happy to review a PR.

[marklawlor]

@EvanBacon Unfortunately the changes require updating html-webpack-plugin (a dependency of @expo/webpack-config) to the next major version which drops support for webpack 4. So I'm not sure how to completely PR these changes without breaking Expo web.

I found workarounds around the dependencies issues. I've linked two PRs which I believe are non-breaking but I'd appreciate if you could review the draft before I submit it

The only remaining issue is postcss NextJS requires 8.x but due to dependancy hoisting it sometimes loads 7.x. A perfect fix would be to update @expo/webpack-config, but the easy work around is to simply include postcss 8.x as a dependency (forcing it to the top level). Maybe this could be fixed with documentation?

[matt-wbcs]

You can also probably set "resolutions" for postcss in your package.json. https://classic.yarnpkg.com/en/docs/selective-version-resolutions/#toc-how-to-use-it

[marklawlor]

@matt-wbcs I originally used that method, but it adds an extra build step for anyone not using yarn and doesn't play nicely with dependency auditing tools (both security and updating). Adding postcss as a dependency is the lesser for the two evils

[mi3lix9]

I'm interested to use Next with React Native. Do you have an idea how much time to support Next 11?

[marklawlor]

@mi3lix9 You can use the patches in the linked repo - they allow you to jump straight in to Next 11.

@EvanBacon I will need the PR for babel-preset-expo reviewed and merged before I can submit the next-adaptor PR.

Also some instructions on how Expo wants to handle the postcss issue. I think the best way forward would be to publish a canary version of next-adaptor with instructions on how to upgrade.

Or we can just put this on the back burner until expo/webpack-config is updated.

[axeldelafosse]

Hey @marklawlor! Thank you for your time and sorry for the delay. Your PoC is really helpful! I was able to successfully upgrade two projects to Next.js 11 and Webpack 5.

Good news, expo/expo#13327 is now merged.

re: the postcss issue -- yeah let's add a note in the docs, this shouldn't be a blocker. And we need to update the docs and the examples anyway. I'll take care of this.

[axeldelafosse]

Related (but non-exhaustive, non-blocking):

• react-native-reanimated needs @babel/plugin-proposal-class-properties so your babel.config.js should look like this:

module.exports = {
  presets: ['@expo/next-adapter/babel'],
  // Note: If you load other babel plugins, the Reanimated plugin has to be listed last in the plugins array.
  plugins: ['react-native-reanimated/plugin'],
  overrides: [
    {
      test: './node_modules/react-native-reanimated/*',
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  ]
};

• @gorhom/bottom-sheet doesn't work with Next.js 11. It returns this error:

TypeError: Cannot read property 'TIMING' of undefined
    at eval (webpack-internal:///../../node_modules/@gorhom/bottom-sheet/lib/commonjs/utilities/animate.js:1:955)

I'm investigating. Do you know any other package that doesn't support Next.js 11 and Webpack 5 yet?

[marklawlor]

@axeldelafosse Once the babel-preset-expo 8.5.0 is published, is it possible to release the next-adapter as a prerelease? I still have some concerns about dependencies, but this issue and my POC is accumulating likes/watches so it would be good to get something released and get some community feedback.

Like you mentioned, the major version jumps will require some config updates for existing packages. I can update the original post with a Known issues / workarounds section to help with the migration. Eg some users might need to enable useTransformReactJsxExperimental across multiple platforms.

I've also only tested this using npm 6, which is using the legacy peerDep resolution. This might break under the new peerDep resolution in npm 7 due to mismatching peer dependencies (eg this PR updates to React 17), so it would be good to collect feedback from users who use other package managers.

[axeldelafosse]

is it possible to release the next-adapter as a prerelease?

Yeah sure! Please mark your PR #3586 as ready for review when it is and we'll get this merged and released!

I can update the original post with a Known issues / workarounds section to help with the migration

Cool, thank you :)

it would be good to collect feedback from users who use other package managers

Agreed! Let's make sure to get a lot of feedback. Personally I had no problem using yarn

[marklawlor]

Yeah sure! Please mark your PR #3586 as ready for review when it is and we'll get this merged and released!

Updated and ready for review

[mudrila]

Seems like this now fixed - could you guys release new version for next-adapter (and CLI I guess)?