Update to 6.2.1 causes infinite refresh on web

[zgr024]

Summary

After updating to 6.2.1, running the app in web results in the following console error and an infinite refresh in the browser

react native TypeError: (0 , _nanoid.nanoid) is not a function

Reverting to 6.1.0 resolves issue

Environment

expo-env-info 1.0.5 environment info: System: OS: macOS 12.6 Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.21.2 - /usr/local/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 9.3.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 IDEs: Xcode: 14.2/14C18 - /usr/bin/xcodebuild npmPackages: babel-preset-expo: ~9.1.0 => 9.1.0 expo: ^45.0.0 => 45.0.8 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 react-native-web: 0.17.7 => 0.17.7 npmGlobalPackages: eas-cli: 0.47.0 expo-cli: 6.2.1 Expo Workflow: managed

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

Mac OS Monteray v12.6 running Brave browser; AWS Amplify

Error output

No response

Reproducible demo or steps to reproduce from a blank project

install expo-cli 6.2.1 run expo start -c press w to run in web

[EvanBacon]

I cannot reproduce this by following the steps you mentioned. Please provide a working repro.

[zgr024]

the refresh and error are actually 2 separate issues

the refresh was caused by a method implemented for cache busting which was looking for asset-manifest.json which appears to have been removed in this version. I have implemented a workaround.

the TypeError Uncaught TypeError: (0 , _nonSecure.nanoid) is not a function at useRegisterNavigator.tsx:11:1 however, is caused by the following code within the @react-navigation/stack package...

useRegisterNavigator.tsx

import { nanoid } from 'nanoid/non-secure';
import * as React from 'react';

import { SingleNavigatorContext } from './EnsureSingleNavigator';

/**
 * Register a navigator in the parent context (either a navigation container or a screen).
 * This is used to prevent multiple navigators under a single container or screen.
 */
export default function useRegisterNavigator() {
  const [key] = React.useState(() => nanoid());
  ...

What was removed from v6.2.x that would cause this error with react-navigation?

[willbach]

I was able to resolve this issue by deleting my babel.config.js and then building the project.

[ruida-shen]

Same issues

[592da]

having the same issue! when building with metro, the issue is not reproduced.

[s-kuniyoshi]

Same issue!

[s-kuniyoshi]

It appears that cjs has been excluded from the compilation target. https://github.com/facebook/create-react-app/pull/12021 After adding the following code to webpack.config.js, it now works properly in my environment.

  config.module.rules.forEach(rule => {
    if (rule.oneOf instanceof Array) {
      rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/]
    }
    return rule
  })

[elenitaex5]

It appears that cjs has been excluded from the compilation target. facebook/create-react-app#12021 After adding the following code to webpack.config.js, it now works properly in my environment.

  config.module.rules.forEach(rule => {
    if (rule.oneOf instanceof Array) {
      rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/]
    }
    return rule
  })

This is working for me. I was facing this error having my app in web, starting and refreshing. But including customize webpack.config.js and including it solve my problem

[pierregambaud]

To complete @s-kuniyoshi answer, here are the steps I followed to fix this issue:

1. Run in your terminal npx expo customize webpack.config.js (according to https://docs.expo.dev/guides/customizing-webpack/)

2. Copy the code below in your new webpack.config.js (according to https://github.com/expo/expo-webpack-integrations/issues/10)

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.module.rules.forEach(rule => {
    if (rule.oneOf instanceof Array) {
      rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/]
    }
    return rule
  })

  return config;
};

[Sidak08]

the refresh and error are actually 2 separate issues

the refresh was caused by a method implemented for cache busting which was looking for asset-manifest.json which appears to have been removed in this version. I have implemented a workaround.

the TypeError Uncaught TypeError: (0 , _nonSecure.nanoid) is not a function at useRegisterNavigator.tsx:11:1 however, is caused by the following code within the @react-navigation/stack package...

useRegisterNavigator.tsx

import { nanoid } from 'nanoid/non-secure';
import * as React from 'react';

import { SingleNavigatorContext } from './EnsureSingleNavigator';

/**
 * Register a navigator in the parent context (either a navigation container or a screen).
 * This is used to prevent multiple navigators under a single container or screen.
 */
export default function useRegisterNavigator() {
  const [key] = React.useState(() => nanoid());
  ...

What was removed from v6.2.x that would cause this error with react-navigation?

how did you fix the second error