unexpected token

[DilipCoder]

when I include this package and then add a link into my page component it's giving me an error. while working fine in expo client.

Package.json { "dependencies": { "@react-navigation/native-stack": "^6.0.3", "expo": "~42.0.0", "expo-next-react-navigation": "^1.1.14", "next": "^11.0.1", "next-offline": "^5.0.5", "next-optimized-images": "^2.6.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", "react-native-safe-area-context": "3.2.0", "react-native-screens": "~3.4.0", "react-native-web": "^0.17.1", "setimmediate": "^1.0.5" }, "devDependencies": { "@babel/core": "^7.14.6", "@expo/next-adapter": "^3.0.1", "@types/react": "^17.0.16", "@types/react-native": "^0.64.12", "eslint": "^7.32.0", "eslint-config-next": "^11.0.1", "next-compose-plugins": "^2.2.1", "next-transpile-modules": "^8.0.0", "typescript": "^4.3.5", "webp-loader": "^0.6.0" }, "scripts": { "start": "next dev", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject", "build": "next build", "next-lint": "next lint" }, "private": true } .eslintrc { "extends": ["next", "next/core-web-vitals"] }

babel config

module.exports = { presets: ['@expo/next-adapter/babel'] };

[nandorojo]

I haven't tested this with Next 11 yet, so that might be it, not sure. Closing since there's no minimal reproduction.

[DilipCoder]

I have used the same demo but here the nextjs version is 11 i have tried next 10 also but i got error from react-navigation side

[kenchoong]

I have used the same demo but here the nextjs version is 11 i have tried next 10 also but i got error from react-navigation side

Same issue here, do you solve this??

[SoccerBoyMalloy]

I'm also receiving this error:

error - ./node_modules/expo-next-react-navigation/build/components/Link/index.web.js:39:22
Syntax error: Unexpected token, expected ","

  37 |         pathname,
  38 |     }), [pathname, query]);
> 39 |     return (<NextLink passHref {...nextLinkProps} href={href} as={web?.as} prefetch={web?.prefetch} scroll={web?.scroll} replace={web?.replace} shallow={web?.shallow}>
     |                       ^
  40 |         {isText ? (<Text ref={ref} accessibilityRole="link" style={style}>
  41 |             {children}
  42 |           </Text>) : (<View accessibilityRole="link" style={style}>

My package.json:

{
  "dependencies": {
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "expo": "~42.0.0",
    "expo-next-react-navigation": "^1.2.1",
    "next": "^11.0.1",
    "next-images": "^1.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "^0.17.1",
    "tailwind-rn": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@expo/next-adapter": "^3.0.1",
    "@types/react": "^17.0.20",
    "@types/react-native": "^0.65.0",
    "next-compose-plugins": "^2.2.1",
    "next-transpile-modules": "^8.0.0",
    "typescript": "^4.4.3"
  },
  ...
  ...
  ...
}

Sounds like this library doesn't support Next.js version 11?

[nandorojo]

Maybe try following this example? https://github.com/axeldelafosse/expo-next-monorepo-example

Or this one? https://github.com/mwarger/expo-nextjs-dripsy-moti-setup

Those both use Next 11

[SoccerBoyMalloy]

Thanks for the links!

This babel.config.js got me past the original error when running with Next, but caused different errors when running with Expo. I'm admittedly new to Expo and Next so I'm not making much progress, but I'll keep banging my head against it.

I noticed that the first example repo you linked to does not use expo-next-react-navigation - it uses a monorepo with totally separate projects for mobile and web. I also stumbled across a separate issue where you referenced that repo as a good example. In general, at this time, would you recommend an approach like that which doesn't use expo-next-react-navigation? Sorry that this is veering off topic for this issue - feel free to direct my question somewhere else if there's a better forum.

[nandorojo]

Yeah, I recommend the monorepo approach. The Nextjs 11 with webpack 5 has its issues and inconsistencies with RN. Having a monorepo with different app entry points is better to handle those problems. Plus, the community is adopting this approach.

@axeldelafosse thoughts on adding this lib to the monorepo?