[Metro] Disliking the @/ imports

[mvolonnino]

So I add the same issue (expect I do not use the @ symbol but rather the absolute pathing instead)

So in my app.json it has:

    "experiments": {
      "typedRoutes": true,
      "tsconfigPaths": true
    },

and then when adding the metro.config.js i had to update to this for it to now error about module resolution:

• wondering if adding the same, but with the '@/folderName' structure would solve your issue in the README as well?

  
  // Learn more https://docs.expo.io/guides/customizing-metro
  const { getDefaultConfig } = require('expo/metro-config');
  const path = require('path');

/* @type {import('expo/metro-config').MetroConfig} / const config = getDefaultConfig(__dirname);

config.resolver = { ...config.resolver, extraNodeModules: { apollo: path.resolve(dirname, 'apollo'), assets: path.resolve(dirname, 'assets'), components: path.resolve(dirname, 'components'), constants: path.resolve(dirname, 'constants'), features: path.resolve(dirname, 'features'), firebaseConfig: path.resolve(dirname, 'firebaseConfig'), hooks: path.resolve(dirname, 'hooks'), layouts: path.resolve(dirname, 'layouts'), legacy: path.resolve(dirname, 'legacy'), sentry: path.resolve(dirname, 'sentry'), stores: path.resolve(dirname, 'stores'), theme: path.resolve(dirname, 'theme'), types: path.resolve(dirname, 'types'), updates: path.resolve(dirname, 'updates'), utils: path.resolve(__dirname, 'utils'), }, };

module.exports = config;

[mgscreativa]

Well, adding this didn't solve the @/ issue, but it's not big deal as its simply fixed with the good old relative path notation.

metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
  // [Web-only]: Enables CSS support in Metro.
  isCSSEnabled: true,
});

config.resolver = {
  ...config.resolver,
  extraNodeModules: {
    apollo: path.resolve(__dirname, 'app'),
    assets: path.resolve(__dirname, 'assets'),
    components: path.resolve(__dirname, 'components'),
    constants: path.resolve(__dirname, 'constants'),
    plugins: path.resolve(__dirname, 'plugins'),
  },
};

module.exports = config;

[mvolonnino]

Ah damn was hoping that would work for you. Ya i never adopted the @/ import syntax, but rather just the absolute so something like features/ or hooks/ is how import which the above metro config worked for me.. albeit the other issue i am having that is opened 🥲

[mgscreativa]

The @ import is there as it's default in Expo demo projects, I don't use either, just updated the project to use good old relative imports