Open zgr024 opened 1 year ago
I cannot reproduce this by following the steps you mentioned. Please provide a working repro.
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?
I was able to resolve this issue by deleting my babel.config.js
and then building the project.
Same issues
having the same issue! when building with metro, the issue is not reproduced.
Same issue!
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
})
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
To complete @s-kuniyoshi answer, here are the steps I followed to fix this issue:
Run in your terminal npx expo customize webpack.config.js
(according to https://docs.expo.dev/guides/customizing-webpack/)
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;
};
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
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