'Adding `"type": "module"` in `package.json` breaks path resolutions in React Native: Unable to resolve module
I've been using babel-plugin-module-resolver to use aliases in a React Native project since a few months, but since I added "type": "module" to my package.json, at the moment I launch my app (npm run ios), Metro is unable to resolve my dependencies using aliases:
error: Error: Unable to resolve module /path/to/my/project/packages/core from /path/to/my/project/packages/storybook-mobile/index.js
None of these files exist:
* ../core(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
* ../core/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx
As a side note, it might be important to mention that I'm working on a monorepo, explaining the /packages/ in my path.
And again, everything was working fine before I added "type": "module" to my package.json.
This is my babel.config.js:
const path = require('path');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.svg',
'.png',
'.jpg',
'.webp',
'.json',
],
alias: {
'@treezor/core': path.resolve(__dirname, 'packages/core'),
},
},
],
],
};
And this is my compilerOptions in my tsconfig.json:
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@treezor/core": ["./packages/core/src"],
}
}
And in index.js, the line breaking the app is the following:
import { dictionary } from '@treezor/core';
But removing that dependency only moves the error to the following import using an alias.
Does anyone know why simply adding "type": "module" to my package.json would break the aliases?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
