React-native js bundle including relative paths
when I run command npx react-native bundle
which creates me RN .js bundle files, in those files all import references have a relative path which starts “.__location=”/Users/ACTUAL_DEV_USERNAME/Desktop/GitHUB/…”. Is it possible to configure my babel/tsconfig to have all the paths in these bundle files start with the root of the project?
My babel.config.js:
module.exports = (api) => {
let prodEnv = api.cache(() => process.env.NODE_ENV === 'production');
let config = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'jsx-control-statements',
[
'module-resolver',
{
root: ['./'],
alias: {
images: './images/',
components: './components/',
},
},
],
'react-native-reanimated/plugin',
],
};
config.plugins = [...config.plugins, 'import-graphql'];
if (prodEnv) {
config.plugins = [...config.plugins, 'transform-remove-console'];
}
return config;
};
My tsconfig:
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"module": "esnext",
"jsx": "react",
"target": "esnext",
"lib": ["esnext"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"baseUrl": ".",
"paths": {
"images/*": ["./images/*"],
"components/*": ["./components/*"]
}
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js",
"ios",
"android"
],
"include": ["*.d.ts", "**/*.ts", "**/*.tsx"]
}
The problem which I am trying to resolve is: not including dev usernames into final prod build logic, so the bundles created by any user would match ideally.
Thanks in advance
Read more here: Source link