search

expo / expo-cli

Tools for creating, running, and deploying universal Expo and React Native apps
https://docs.expo.io/workflow/expo-cli/
2.61k stars 477 forks source link

yarn next dev fails after upgrading to sdk 42 #3630

Closed wallstar closed 3 years ago

wallstar commented 3 years ago

After upgrading to sdk 42, I cannot develop using Nextjs. When I run yarn next dev, I'm getting the following error: "Error: Cannot find module 'jsonfile/utils'"

When I switch back to sdk 41, it works normally. Versions

axeldelafosse commented 3 years ago

Hey @wallstar! Can you try upgrading to Next.js 11 and @expo/next-adapter 3.0.1 please?

wallstar commented 3 years ago

@axeldelafosse thanks for getting back to me! I can give it a shot next week, but doesn't Next.js 11 require React 17 which isn't yet supported by expo?

axeldelafosse commented 3 years ago

Yes it does but don't worry you can use React 17 with Expo

wallstar commented 3 years ago

@axeldelafosse worked for me, thanks! I did have to disable webpack 5 in my next.config.js, but I'm not sure if that's related

axeldelafosse commented 3 years ago

Cool! You should also be able to use Webpack 5. What errors are you getting? You can check here for more context: https://github.com/expo/expo-cli/issues/3579.

Feel free to close this issue when everything works for you!

wallstar commented 3 years ago

Getting this error:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

axeldelafosse commented 3 years ago

Do you have a custom Webpack config? Can you share your next.config.js please?

wallstar commented 3 years ago 
const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
const withTM = require('next-transpile-modules')([
  'moti',
  'react-native-web',
]);

module.exports = withPlugins(
  [withBundleAnalyzer, withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
  {
    images: {
      domains: ['imgs.com', 'imgs2.com'],
    },
    experimental: {
      scrollRestoration: true,
    },
    webpack5: false,
  },
);
axeldelafosse commented 3 years ago

What's your next-transpile-modules version? Can you also share your package.json please?

wallstar commented 3 years ago 
{
  "dependencies": {
    "@apollo/client": "^3.3.7",
    "@artsy/fresnel": "^1.7.0",
    "@cypress/code-coverage": "^3.9.2",
    "@expo/next-adapter": "3.0.1",
    "@material-ui/core": "^4.12.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@moxy/next-router-scroll": "^2.1.1",
    "@mui-treasury/components": "1.5.2",
    "@mui-treasury/styles": "1.8.0",
    "@next/bundle-analyzer": "^11.0.1",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/datetimepicker": "3.5.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "6.0.0",
    "@react-native-masked-view/masked-view": "0.2.4",
    "@react-native-picker/picker": "1.16.1",
    "@react-native-seoul/masonry-list": "^1.0.6",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.14.3",
    "@tstmkrs/nextjs-ab-test": "^0.0.4",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "autosuggest-highlight": "^3.1.1",
    "clsx": "^1.1.1",
    "create-react-class": "^15.7.0",
    "cross-fetch": "^3.0.6",
    "expo": "^42.0.0",
    "expo-asset": "~8.3.3",
    "expo-blur": "~9.0.3",
    "expo-constants": "~11.0.1",
    "expo-firebase-analytics": "~4.1.0",
    "expo-linear-gradient": "~9.2.0",
    "expo-linking": "~2.3.1",
    "expo-location": "~12.1.2",
    "expo-notifications": "~0.12.3",
    "expo-permissions": "~12.1.1",
    "expo-store-review": "~4.1.0",
    "firebase": "8.2.3",
    "fuse.js": "^6.4.6",
    "graphql": "^15.5.0",
    "gymnast": "^18.0.1",
    "haversine-distance": "^1.2.1",
    "intl": "^1.2.5",
    "linkifyjs": "^3.0.0-beta.3",
    "lodash.isequal": "^4.5.0",
    "lodash.orderby": "^4.6.0",
    "lodash.sortby": "^4.7.0",
    "lottie-react": "^2.1.0",
    "lottie-react-native": "4.0.2",
    "luxon": "^1.26.0",
    "mapbox-gl": "^2.1.1",
    "material-ui-search-bar": "^1.0.0",
    "moti": "^0.11.0",
    "next": "^11.0.1",
    "next-compose-plugins": "^2.2.1",
    "next-fonts": "^1.5.1",
    "next-images": "^1.8.1",
    "next-seo": "^4.23.0",
    "next-transpile-modules": "^6.3.0",
    "nextjs-redirect": "^5.0.2",
    "node-html-parser": "^3.3.4",
    "parse-address": "^1.1.2",
    "prop-types": "^15.7.2",
    "raf": "^3.4.1",
    "react": "17.0.2",
    "react-device-detect": "^1.17.0",
    "react-dom": "17.0.2",
    "react-ga": "^3.3.0",
    "react-intersection-observer": "^8.31.0",
    "react-mailchimp-subscribe": "^2.1.3",
    "react-mapbox-gl": "^5.1.1",
    "react-mapbox-gl-cluster": "^1.11.0",
    "react-markdown": "^5.0.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-appearance": "~0.3.3",
    "react-native-autocomplete-input": "^4.2.0",
    "react-native-collapsible": "^1.5.3",
    "react-native-custom-swiper": "^1.0.16",
    "react-native-expo-cached-image": "^1.3.1",
    "react-native-expo-image-cache": "^4.1.0",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-image-header-scroll-view": "^1.0.0",
    "react-native-image-viewing": "^0.2.0",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.4",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "0.28.0",
    "react-native-masonry-list": "^2.16.1",
    "react-native-modal": "^11.7.0",
    "react-native-modal-datetime-picker": "^9.2.0",
    "react-native-pager-view": "5.0.12",
    "react-native-paper": "^4.9.2",
    "react-native-paper-dates": "^0.4.0",
    "react-native-paper-tabs": "^0.4.2",
    "react-native-parsed-text": "^0.0.22",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "~2.2.0",
    "react-native-responsive-dimensions": "^3.1.1",
    "react-native-safe-area-context": "3.2.0",
    "react-native-scalable-image": "^1.1.0",
    "react-native-screens": "~3.4.0",
    "react-native-shared-element": "0.7.0",
    "react-native-shimmer": "^0.6.0",
    "react-native-shimmer-placeholder": "^2.0.7",
    "react-native-skeleton-placeholder": "^4.0.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-swiper": "^1.6.0",
    "react-native-swiper-flatlist": "^3.0.14",
    "react-native-swiper-hooks": "^1.3.8",
    "react-native-tab-view": "^3.0.0",
    "react-native-web": "~0.13.12",
    "react-navigation-collapsible": "^5.9.1",
    "react-navigation-shared-element": "^5.0.0-alpha1",
    "react-onclickoutside": "^6.10.0",
    "react-photo-gallery": "^8.0.0",
    "react-process-string": "^1.2.0",
    "react-responsive": "^8.2.0",
    "react-responsive-carousel": "^3.2.18",
    "react-responsive-masonry": "^2.1.3",
    "react-spring-lightbox": "^1.5.0",
    "react-sticky-el": "^2.0.6",
    "react-use": "^17.1.1",
    "react-virtuoso": "^1.5.14",
    "react-window": "^1.8.6",
    "reactn": "^2.2.7",
    "rmc-tabs": "^1.2.29",
    "setimmediate": "^1.0.5",
    "styled-components": "^5.2.3"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@babel/preset-env": "^7.13.5",
    "@testing-library/jest-native": "^3.4.3",
    "@testing-library/react": "^11.2.5",
    "@testing-library/react-native": "^7.1.0",
    "babel-plugin-istanbul": "^6.0.0",
    "cypress": "^6.5.0",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-next": "^11.0.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest-expo": "^42.0.0",
    "next-page-tester": "^0.20.0",
    "patch-package": "^6.2.2",
    "postinstall-postinstall": "^2.1.0",
    "react-navigation": "^4.3.7",
    "react-navigation-stack": "^2.3.11"
  },
  "config": {
    "unsafe-perm": true
  },
  "scripts": {
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "cypress:open": "cypress open",
    "analyze": "ANALYZE=true yarn build"
  },
  "jest": {
    "preset": "jest-expo/universal",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ]
  },
  "private": true
}
axeldelafosse commented 3 years ago

You need to install v8 -- Webpack 5 is enabled by default: https://github.com/martpie/next-transpile-modules/releases/tag/8.0.0

wallstar commented 3 years ago

That did the trick! Thanks for the help and all the work y'all do!

axeldelafosse commented 3 years ago

Cool! Happy to help :)

One last thing, I'm curious to know if this is still working if you remove react-native-web from the next-transpile-modules. Can you try please?

wallstar commented 3 years ago

Removed it and everything seems to be working fine

axeldelafosse commented 3 years ago

OK perfect! Thanks. I'd love to learn more about our users using Expo and Next.js -- can you send me an email at axel@expo.io so we can arrange a time to chat soon?

ghost commented 2 years ago

This thread is the closest I've come to found something similar to my current issue. I started with an Ignite boilerplate. It offers react native + expo + a ton of other great configurations out of the box. I wanted to take it even further and after the project was ready (clean start), I immediately tried to add the next support as per the expo documentation.

After doing that and running yarn next dev, the next project fails to start with 

(node:17673) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:17673) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (/mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/build/webpack-config.js:660:33)
    at webpackConfig.externals (/mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/build/webpack-config.js:769:24)
    at /mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/@expo/next-adapter/node_modules/@expo/webpack-config/webpack/addons/withUnimodules.js:162:58
    at /mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/compiled/webpack/bundle5.js:36473:21
    at deprecated (internal/util.js:118:15)
    at handleExternals (/mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/compiled/webpack/bundle5.js:36621:8)
    at next (/mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/compiled/webpack/bundle5.js:36599:9)
    at handleExternals (/mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/compiled/webpack/bundle5.js:36604:7)
    at /mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/compiled/webpack/bundle5.js:36701:5
    at Hook.eval [as callAsync] (eval at create (/mnt/c/Users/Andres Mora/Documents/Projects/adoreal/node_modules/next/dist/compiled/webpack/bundle5.js:135839:10), <anonymous>:37:1)

Do you guys now what might be the issue here?

ArthurianX commented 2 years ago

This fails even with a fresh installation from expo, my guess is that it's a nextjs deprecation.

Even following this https://docs.expo.dev/guides/using-nextjs/ your error replicates @amorealz.

Also pinging @axeldelafosse.