Using Next.js with Expo for Web fails with error

[iam-yan]

Summary

I've followed the instructions in Add Next.js to Expo projects. However with yarn next dev, the app failed to run and reported error.

PS. This issue has actually been mentioned by others in a conversation in expo/expo.
expo/expo#14971 (comment)

Environment

Expo CLI 5.0.3 environment info:
System:
OS: macOS 11.4
Shell: 5.8 - /bin/zsh
Binaries:
Node: 17.3.0 - /usr/local/bin/node
Yarn: 3.1.1 - /usr/local/bin/yarn
npm: 8.3.0 - /usr/local/bin/npm
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7042882
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
npmGlobalPackages:
expo-cli: 5.0.3
Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

macOS Version 11.4 / Chrome Version 97.0.4692.99

Error output

.../node_modules/next/dist/build/webpack-config.js:660
const isLocal = request.startsWith('.') || // Always check for unix-style path, as webpack sometimes
^
TypeError: Cannot read properties of undefined (reading 'startsWith')

Reproducible demo or steps to reproduce from a blank project

1. Add Next.js to a Expo project
2. Run yarn next dev

[aleksandr-senichev]

This answer helped me

[iam-yan]

Thx @aleksandr-senichev . I've tried that solution. It works, how ever a new error came out instead:
HookWebpackError: Cannot read properties of undefined (reading 'replace')

Have you experienced this issue?

[aleksandr-senichev]

@iam-yan I haven't. They released a new @expo/next-adapter@3.1.20, I cleared my dependencies and repeat all steps again, after that I added this proposal and it launched without issues.

[iam-yan]

@aleksandr-senichev It's sooooo strange.. I did the same thing and it simply can't work......:(

[trigonometric-act]

@expo/next-adapter@3.1.20 is still not working with next 12

[wibb36]

Temporary patch:

1. In the root node_modules, look for @expo > next-adapter > build
2. open withExpo.js
3. line 17, change webpack5: true as follow:

            }, {
                supportsFontLoading: false,
                // webpack5: webpack5 && webpack5 !== false,
                webpack5: true
            });

4. npx patch-package @expo/next-adapter

[kbrandwijk]

You don't need patch-package for that. If you check out that line you commented out, it indicates that you can pass in webpack5: true to the withExpo plugin's options.

[wibb36]

for some strange reason when I tried it, it didn't work.

[iam-yan]

@wibb36

I made it... by adding "webpack5: true".........
But you have to first add the following into next.config.js

// next.config.js
const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")(["react-native-web"]);

const nextConfig = { webpack5: true };

module.exports = withPlugins(
  [withTM, [withExpo, { projectRoot: __dirname }]],
  nextConfig
);

This config is mentioned in the Manual setup section. However enabling webpack5 explicitly is not mentioned there.

Hope it helps.

[iam-yan]

@kbrandwijk Thanks for pointing this out. It works...
However it looks like a bug, because Next12 enable webpack5 by default....Users are not expected to manually turn it on.

[kbrandwijk]

@kbrandwijk Thanks for pointing this out. It works... However it looks like a bug, because Next12 enable webpack5 by default....Users are not expected to manually turn it on.

next-adapter supports Next 11+, so it can't make that assumption automatically.

[kenchoong]

@wibb36

I made it... by adding "webpack5: true"......... But you have to first add the following into next.config.js

// next.config.js
const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")(["react-native-web"]);

const nextConfig = { webpack5: true };

module.exports = withPlugins(
  [withTM, [withExpo, { projectRoot: __dirname }]],
  nextConfig
);

This config is mentioned in the Manual setup section. However enabling webpack5 explicitly is not mentioned there.

Hope it helps.

Lifesaver answer. Can confirm this is work