Expo webpack configuration for 'resolve' is not working

user_13518990 0
Viewed 508

I have an almost empty expo project and I am trying to configure webpack so I can import components from my src/components modules just by typing

import { Button } from 'components/Button';

instead of

import { Button } from '../../components/Button';

Currently my webpack.config.js(the one generated automatically by expo) does not seem to work. I tried many ways but it still does not work, it is like during compilation this config is not even considered.

My current config looks like this:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.resolve = {
    modules: [
      path.resolve(__dirname, './src'),
      'node_modules'
    ],
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  };
  return config;
};

I tried to create also aliases but it did not work neither. What am I missing here? I thought that it will be an easy thing to do and then I started struggling with it :/

expo react-native webpack javascript
1 Answers

replace with this in webpack.config.js

config.config.resolve.alias['src'] = __dirname + '/src'

and make sure to create a package.json file in src folder with only name:"src"

user_50559250
Related