Open GlisboaDev opened 4 years ago
Hey there, I think we have a similar problem. After adding the root
and extensions
(it was initially only alias
) because I was trying to migrate to Typescript (and it was written in reactnative.dev) suddenly imported modules are undefined, after hours of debugging I found out by chance that removing root and extensions fixed the issue.
I actually just fixed it just now, I hope there are no other problems
Probably similar issue: https://github.com/tleunen/babel-plugin-module-resolver/issues/387
I have this isuues but when I know Tslint is depreacated I migrated to Eslint delete Tslint estension in vscode and do steps according this site : https://medium.com/@killerchip0/react-native-typescript-with-eslint-and-prettier-e98d50585627
to fix it, on RN 0.63.4, I replaced the file babel.config.js by .babelrc, and then in that file :
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"@components": "./src/components",
"@views": "./src/views",
"@styles": "./src/styles"
}
}
]
]
}
To do an import :
import {styles} from '@styles/<your_file_name>';
EDIT :
Finally, it seems the only problem I had to make the plugin works, without the need to replace babel.config.js by .babelrc, is to launch the command :
react-native start --reset-cache
Also, the alias can be named without the "@", it will still worked :
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"components": "./src/components",
"views": "./src/views",
"styles": "./src/styles"
}
}
]
]
};
Then you can write the import like that :
import {styles} from 'styles/<your_file_name>';
Ugh so in our case everything was working for react-native
but the e2e part wasn't resolving the alaises.
Solution for webdriverio + appium is in your wdio.config.js add the following config to the top level object.
exports.config = {
...rest of your config
jasmineNodeOpts: {
...other config
helpers: [require('@babel/register')({
extensions: ['.js', '.jsx', '.ts', '.tsx'],
})]
}
Adding the extensions fixes the file path resolution for the import aliases.
The plugin configuration that @GrEg00z mentioned worked for me with react-native 0.64.1. Like he mentioned, you can keep your .bable.config.js and make sure you restart the metro cache
to fix it, on RN 0.63.4, I replaced the file babel.config.js by .babelrc, and then in that file :
{ "presets": ["module:metro-react-native-babel-preset"], "plugins": [ [ "module-resolver", { "root": ["./"], "alias": { "@components": "./src/components", "@views": "./src/views", "@styles": "./src/styles" } } ] ] }
To do an import :
import {styles} from '@styles/<your_file_name>';
EDIT :
Finally, it seems the only problem I had to make the plugin works, without the need to replace babel.config.js by .babelrc, is to launch the command :
react-native start --reset-cache
Also, the alias can be named without the "@", it will still worked :
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ "module-resolver", { "root": ["./"], "alias": { "components": "./src/components", "views": "./src/views", "styles": "./src/styles" } } ] ] };
Then you can write the import like that :
import {styles} from 'styles/<your_file_name>';
I take it that babel.config.js has to be in the root of the monorepo, right? And the alias paths would be like in the question: './packages/project1/src/components' instead of './src/components'? With this setup i get the same error, no matter how many times I clean the cache.
@snicro : I do not use a monorepo so I can't tell you if my config will work for you, but yes the babel.config.js is on the root of my project. I will suggest you to add a babel.config in each of your projects, but not sure this is what you looking for
I faced with same issue. The solution is adding extentions like this (not required to change babel.config.js to .babelrc)
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
],
alias: {
test: './test',
underscore: 'lodash',
},
},
],
],
};
How is this solved if the babel.config.js
file is not at the root of the project but inside the monorepo app directories?
I'm trying to put together a monorepo project with
react-native
,typescript
and get relative imports working and keep getting the following error:Unable to resolve module `@screen/XXX` from `packages/project1/src/...`: @screen/XXX could not be found within the project
I noticed https://github.com/tleunen/babel-plugin-module-resolver/issues/276 sounds similar to what I'm experiencing, but I don't have any env related configuration and I can reproduce it even in the debug environment.First, my mono repo structure is:
I managed to get it all working on development environment, but have some weird behaviours happening:
yarn workspace project1 run start
//yarn workspace project1 run ios
everything works fine as mentioned, but running onlyrun yarn workspace project1 run ios
fails to load the path giving the error above (likely because the packager is started from Xcode with a different working directory?)./gradlew assemble
... from the android folder, it also gives the same error above.babel.config.js
file (say add{!@#$: !@#, ...}
) and run./gradlew assemble
nothing seems to changebabel.config.js
``` module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module-resolver', { root: ['./packages/project1/src/'], extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'], alias: { '@': './packages/project1/src', '@screen': './packages/project1/src/screen', '@util': './packages/project1/src/util/*', '@nav': './packages/project1/src/navigation/*', '@component': './packages/project1/src/component/*', }, }, ], 'babel-plugin-styled-components', ], }; ```
Resolver version: "babel-plugin-module-resolver": "^4.0.0",
Any ideas on what might have been happening or what am I missing?