Help resolving absolute imports in Expo 33

[benathaven]

I am able to build my CRNA app just fine for android and iOS but I am getting this import error when building for web. I used absolute imports in the past for this project.

Perhaps I need to change the babel.config somehow? This is tough to research because some elements (e.g. Webpack) are completely hidden to me.

[brookemitchell]

You’re right you’ll need to modify your babel config to use module resolver GitHub - tleunen/babel-plugin-module-resolver: Custom module resolver plugin for Babel (and your webpack config too if you use web). This is how I modify babel.config.js

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias:   {
              src: path.resolve(__dirname, 'src'),
          }
...

Same again for a webpack.config.js (you could unify this ), See web-examples/WEBPACK.md at master · expo/web-examples · GitHub

module.exports = function(env, argv) {
  return merge(expoConfig(env, argv), {

    resolve: {
      alias: {
        src: path.resolve(__dirname, 'src'),
      },
    },
...

[vjsingh]

EDIT: Put some junk in my babel.config.js and realized that Expo wasn’t loading it. I fixed the issue by clearing the expo cache (shift-R) which appears to force Expo to reload the babel config. Afterwards I got a bunch of transform stderr errors the first time the javascript bundle was built, but now it’s working so I suppose it’s good.

@brookemitchell Thanks for the helpful reply!

I seem to have fixed the web issue, but can’t get my babel config to work. Just want to confirm that we should be using babel.config.js and not .babelrc, as it states in the babel-plugin-module-resolver github link that you added.

I copied the config as you stated, but am still getting an error: (note that my files are in src/src/

Unable to resolve "src/styles/RawTheme" from "src/src/App.tsx"

Using babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias:   {
            src: path.resolve(__dirname, 'src/src/'),
          }
        }
      ]
    ],
    env: {
      development: {
        "plugins": ["@babel/plugin-transform-react-jsx-source"]
      }
    }
  };
};

[brookemitchell]

Sure you can use babel.config.js the two are mostly interchangeable see: Configure Babel · Babel.

I think you are close try checking where you place files and give the full extension eg: src/styles/RawTheme.js, then add extensions to your module_resolver config. here is my full babel.config.js (you probably dont need to set root: ['src']) like I do

const path = require('path')

const paths = {
  assets: path.resolve(__dirname, 'assets'),
  src: path.resolve(__dirname, 'src'),
}

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          extensions: [
            '.js',
            '.jsx',
            '.android.js',
            '.ios.js',
            '.web.js'
          ],
          root: ['./src'],
          alias: paths,
        }
      ]
    ]
  }
}

[vjsingh]

@brookemitchell Thank you!

I actually revisited this this morning, and after changing my babel.config.js & tsconfig.json I was able to get absolute imports working. I didn’t need to add file extensions in the imports or in babel.config.js (perhaps because I’m using Typescript?)

I do get a ton of build errors when building webpack (see below), but it doesn’t seem to affect the build so things seem to be working.

Could not resolve "/Users/Varun/Documents/workspace/clyme/src/src/styles/RawTheme" in file /Users/Varun/Documents/workspace/clyme/src/src/App.tsx.

[brookemitchell]

Great, I think adding resolve: {extensions: [...]} to your webpack.config might clear those other errors up,

    resolve: {
      extensions: [
        '.web.js',
        '.js',
        '.jsx',
        '.json',
        '.web.ts',
        '.ts',
        '.web.tsx',
        '.tsx',
      ]
}