Hi, following this article I have arranged my project to use aliases to tidy up imports and increase portability i.e.;
import { BottomTabNav } from "_navigations";
My directory structure is along the lines of;
src/navigations
src/scenes
src/components/atoms
src/components/molecules
src/components/organisms
...
I have configured these aliases in .babelrc:
{
"plugins": [
[
"module-resolver",
{
"alias": {
"_navigations": "./src/navigations",
...
.eslintrc:
module.exports = {
root: true,
extends: '@react-native-community',
plugins: ['import'],
settings: {
'import/resolver': {
node: {
paths: ['src'],
alias: {
_navigations: './src/navigations',
...
and jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"_navigations": ["src/navigations/*"],
...
When I attempt to run expo web I get the error;
Module not found: Can't resolve '_navigations' in '/Users/admin/DevProjects/MyProject/src'
I then tried to resolve this by adding these aliases to my webpack.config.js file (created with expo customize:web
). I have added all of my aliases in here but they are not resolving.
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
config.resolve.alias['_assets'] = './src/assets';
config.resolve.alias['_constants'] = './src/constants';
config.resolve.alias['_components'] = './src/components';
config.resolve.alias['_atoms'] = './src/components/atoms';
config.resolve.alias['_molecules'] = './src/components/molecules';
config.resolve.alias['_organisms'] = './src/components/organisms';
config.resolve.alias['_navigations'] = './src/navigations';
config.resolve.alias['_scenes'] = './src/scenes';
config.resolve.alias['_services'] = './src/services';
config.resolve.alias['_styles'] = './src/styles';
config.resolve.alias['_utils'] = './src/utils';
return config;
};
I have tried omitting the “./” component of the paths i.e. “src/navigations” but no luck.
I can’t seem to find any references for how to add these aliases to webpack.config.js - can anyone assist?
Thank you!