Estoy tratando de modificar mi archivo metro.config.js para que no ignore el módulo main de un paquete npm.
Este es el mensaje de error que recibo en tiempo de ejecución:
error: Error: While trying to resolve module `@apollo/client` from file `<project-directory>/src/ApolloProvider.tsx`, the package `<project-directory>/node_modules/@apollo/client/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`<project-directory>/node_modules/@apollo/client/main.cjs`. Indeed, none of these files exist: * <project-directory>/node_modules/@apollo/client/main.cjs(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.|.native.|.|.ios.json|.native.json|.json) * <project-directory>/node_modules/@apollo/client/main.cjs/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.|.native.|.|.ios.json|.native.json|.json) at DependencyGraph.resolveDependency (<project-directory>/node_modules/metro/src/node-haste/DependencyGraph.js:311:17) at Object.resolve (<project-directory>/node_modules/metro/src/lib/transformHelpers.js:129:24) at resolve (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33) at <project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26 at Array.reduce (<anonymous>) at resolveDependencies (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33) at processModule (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31) at processTicksAndRejections (internal/process/task_queues.js:93:5) at addDependency (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18) at async Promise.all (index 3) Puedo ver claramente que <project-directory>/node_modules/@apollo/client/main.cjs existe, pero parece que la resolución siempre intenta agregar una extensión (mientras que el archivo main.cjs descrito anteriormente no necesita extensión).
El siguiente es mi archivo metro.config.js :
module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), }, resolver: { sourceExts: ['jsx', 'js', 'ts', 'tsx', ''], }, }; Como puede ver, he intentado agregar una cadena vacía a la matriz de la propiedad sourceExts , pero eso no resuelve el problema.
¿Alguna idea de cómo hacer que Metro resuelva este archivo main.cjs correctamente?
Recientemente me encontré con este error y probé la misma solución sin éxito. La razón por la que no funciona es porque Metro aún buscará un archivo llamado /path/to/file.js y lo agregará . seguido de la extensión definida en la matriz de configuración. Incluso si está vacío, agrega un archivo . sin embargo.
No estoy seguro de si esto funcionará para usted, pero en mi caso no cambié nada en la configuración del paquete. Lo que solucionó mi problema fue borrar el caché del proyecto para watchman y react-native .
# Clear watchman's cache yarn watchman watch-del-all # Clear react-native's cache yarn react-native start --reset-cache