'babel.config not compiling correctly when changing tsconfig alias

I have a problem involving configuring tsconfig path alias with react-native, at the moment I just did 2 changes:

tsconfig file

"extends": "expo/tsconfig.base",
  "compilerOptions": {
    "jsx": "react",
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      "@/assets/*": ["assets/*"],
      "@/components/*": ["components/*"],
      "@/context/*": ["context/*"],
      "@/hooks/*": ["hooks/*"],
      "@/locales/*": ["locales/*"],
      "@/routes/*": ["routes/*"],
      "@/screens/*": ["screens/*"],
      "@/services/*": ["services/*"],
      "@/types/*": ["types/*"],
      "@/utils/*": ["utils/*"],
    }
  },
  "plugins": [
    {
      "name": "typescript-styled-plugin"
    }
  ]
}
babel.config.js
module.exports = function(api) {
  api.cache(true);
  const plugins = [
    [
      require.resolve("babel-plugin-module-resolver"),
      {
        root: ["./src"],
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx',
        ],
        alias: {
          "@/components": "./components",
          "@/ui": "./ui",
          "@/util": "./util",
          "@/screens": "./screens",
          "@/navigation": "./navigation",
          "@/constants": "./constants",
          "@/assets": "./assets",
          "@/hooks": "./hooks",
        },
      },
    ]
  ]
  return {
    presets: ['babel-preset-expo'],
    plugins
  };
};

The problem seems in the babel config, because I can do all my imports with @ and they are found correctly, just when I run the application I get the following errors:

VM34:2 Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at HTMLIFrameElement.e.onload (index.js:1:1)

Cannot find module '@/locales/de/common.json'

tried to add cwd: "babelrc",to the configuration, the module error disappeared but the process one stayed

Anybody know what is wrong and can give me a hand on this? thanks a lot :slightly_smiling_face:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'babel.config not compiling correctly when changing tsconfig alias

Sources

Related Questions