react-native-builder-bob icon indicating copy to clipboard operation
react-native-builder-bob copied to clipboard

Using relative paths inside a native module

Open cesar-medina-25 opened this issue 4 years ago • 2 comments

Is there a way to use relative paths in a bob builder module? This is the current import:

import LoginForm from 'loginForm';

LoginForm is located at src/components/ so I added it to paths in tsconfig:

{
  "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@package/login": ["./src/index"],
        "*": ["./src/components/*"]
      },
      "allowUnreachableCode": false,
      "allowUnusedLabels": false,
      "esModuleInterop": true,
      "importsNotUsedAsValues": "error",
      "forceConsistentCasingInFileNames": true,
      "jsx": "react",
      "lib": ["esnext"],
      "module": "esnext",
      "moduleResolution": "node",
      "noFallthroughCasesInSwitch": true,
      "noImplicitReturns": true,
      "noImplicitUseStrict": false,
      "noStrictGenericChecks": false,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "resolveJsonModule": true,
      "skipLibCheck": true,
      "strict": true,
      "target": "esnext"
  }
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        root: ['./src/components'],
      },
    ],
  ],
};

bob.config.js

module.exports = {
  source: 'src',
  output: 'lib',
  targets: [
    [
      'commonjs',
      {
        configFile: true,
      },
    ],
    [
      'module',
      {
        configFile: true,
      },
    ],
    [
      'typescript',
      {
        project: `tsconfig.build.json`,
      },
    ],
  ],
};

Then when I run the command "yarn example ios" it shows an error:

error: Error: Unable to resolve module loginForm from /Users/username/Desktop/@package/login/src/index.ts: loginForm could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import LoginForm from 'loginForm';

If I run "yarn prepare" it builds the lib folder and resolves the correct path:

var _loginForm=_interopRequireDefault(require("./components/loginForm")

but running from example doesn't resolve relative paths in the module.

cesar-medina-25 avatar Jul 07 '21 18:07 cesar-medina-25

I have the same issue, did you fix it somehow @cesar-medina-25 ?

jorgearuv avatar Oct 22 '21 00:10 jorgearuv

try: npx react-native-builder-bob init

minh-dai avatar Feb 23 '22 03:02 minh-dai