My App not running got an error the package doesn't seem to be linked.

[alfangr]

I just installed this package and did some POCs running the simple usage provided. But my App is not running properly and getting error with details below.

error SyntaxError: /Users/name/documents/repositories/my-app/node_modules/react-native-ssl-public-key-pinning/src/index.ts: Unexpected token (9:12)

   7 |
   8 | import type { ErrorListenerCallback, PinningOptions } from './types';
>  9 | export type * from './types';
     |             ^
  10 |
  11 | const LINKING_ERROR =
  12 |   `The package 'react-native-ssl-public-key-pinning' doesn't seem to be linked. Make sure: \n\n` +

FAILURE: Build completed with 2 failures.

Actually, I tried the link manually but still got the same error. Can you please how to solve this? Thank You

FYI, i still running on Android and my RN version is 0.71.6

[frw]

Could you show your code on how you're using this library?

It seems like you're importing from react-native-ssl-public-key-pinning/src (hence importing the uncompiled typescript files) rather than react-native-ssl-public-key-pinning (which would import the compiled JS files). Could you make sure your import is correct?

[alfangr]

These are the steps I did,

1. yarn add react-native-ssl-public-key-pinning without any config on Android an iOS native
2. Edit on My App.tsx with the code below

import { initializeSslPinning } from 'react-native-ssl-public-key-pinning';

useEffect(() => {
  initSSL();
}, []);

const initSSL = async () => {
  await initializeSslPinning({
    'google.com': {
      includeSubdomains: true,
      publicKeyHashes: [
        'CLOmM1/OXvSPjw5UOYbAf9GKOxImEp9hhku9W90fHMk=',
        'hxqRlPTu1bMS/0DITB1SSu0vd4u/8l8TjPgfaAp63Gc=',
        'Vfd95BwDeSQo+NUYxVEEIlvkOlWY2SalKK1lPhzOx78=',
        'QXnt2YHvdHR3tJYmQIr0Paosp6t/nggsEGD4QJZ3Q0g=',
        'mEflZT5enoR1FuXLgYYGqnVEoZvmf9c2bVBpiOjYQ0c=',
      ],
    },
  });

  const response = await fetch('https://www.google.com');
  console.log('result', response);
}

3. Then you get an error as above

[frw]

Thanks @alfangr, that looks reasonable.

Could you also paste in your package.json and babel.config.js?

It might be an issue with your Typescript version or Babel version, per this Stack overflow: https://stackoverflow.com/a/62289551

[alfangr]

This my package dependencies and babel

package.json

"dependencies": {
    "@enzoferey/ethers-error-parser": "^0.2.3",
    "@ethersproject/shims": "^5.7.0",
    "@gorhom/bottom-sheet": "^4.4.8",
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-clipboard/clipboard": "^1.11.1",
    "@react-native-community/blur": "^4.3.2",
    "@react-native-firebase/analytics": "^17.4.3",
    "@react-native-firebase/app": "^17.4.3",
    "@react-native-firebase/crashlytics": "^17.4.3",
    "@react-navigation/drawer": "^6.5.8",
    "@react-navigation/material-top-tabs": "^6.6.0",
    "@react-navigation/native": "^6.1.3",
    "@react-navigation/stack": "^6.3.12",
    "@realm/react": "^0.4.3",
    "@types/i18n-js": "^3.8.4",
    "@types/use-global-hook": "0.1.3",
    "assert": "^2.0.0",
    "axios": "^1.3.4",
    "bip39": "^3.1.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "dayjs": "^1.11.7",
    "deprecated-react-native-prop-types": "^4.1.0",
    "ethers": "^5.7.2",
    "events": "^3.3.0",
    "hdkey": "^2.1.0",
    "i18n-js": "3.8.0",
    "i18next": "^22.4.9",
    "lottie-react-native": "^5.1.5",
    "pubsub-js": "^1.9.4",
    "react": "18.2.0",
    "react-i18next": "^12.1.5",
    "react-native": "0.71.6",
    "react-native-aes-crypto": "^2.1.1",
    "react-native-biometrics": "^3.0.1",
    "react-native-camera-kit": "^13.0.0",
    "react-native-config": "^1.5.1",
    "react-native-device-info": "^10.3.0",
    "react-native-dropdown-picker": "^5.4.4",
    "react-native-exit-app": "^1.1.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-jazzicon": "^0.1.2",
    "react-native-keychain": "^8.1.1",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-mmkv": "^2.6.3",
    "react-native-pager-view": "^6.2.3",
    "react-native-pin-view": "^3.0.3",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-quick-base64": "^2.0.7",
    "react-native-quick-crypto": "^0.6.1",
    "react-native-reanimated": "^2.14.4",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.19.0",
    "react-native-sensitive-info": "^5.5.8",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-ssl-public-key-pinning": "^1.2.4",
    "react-native-svg": "^13.8.0",
    "react-native-tab-view": "^3.4.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-webview": "^13.3.1",
    "realm": "^11.5.1",
    "stream-browserify": "^3.0.0",
    "use-global-hook": "0.2.3",
    "uuid": "^9.0.0",
    "validator": "^13.11.0",
    "zustand": "^4.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.0.0",
    "@tsconfig/react-native": "^2.0.3",
    "@types/hdkey": "^2.0.1",
    "@types/jest": "^29.4.0",
    "@types/pubsub-js": "^1.8.6",
    "@types/ramda": "^0.28.23",
    "@types/react": "^18.0.27",
    "@types/react-test-renderer": "^18.0.0",
    "@types/uuid": "^9.0.1",
    "@types/validator": "^13.11.9",
    "babel-jest": "^29.2.1",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^9.0.0",
    "husky": ">=6",
    "jest": "^29.2.1",
    "lint-staged": ">=10",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "2.8.8",
    "react-native-progress": "^5.0.1",
    "react-native-svg-transformer": "^1.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^4.9.5"
  },
  "jest": {
    "preset": "react-native"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": "npm run format"
  }

babel

/* eslint-disable */
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          crypto: 'react-native-quick-crypto',
          stream: 'stream-browserify',
          buffer: '@craftzdog/react-native-buffer',
          '@assets': './src/assets',
          '@components': './src/components',
          '@constants': './src/constants',
          '@database': './src/database',
          '@design-systems': './src/design-systems',
          '@handler': './src/handler',
          '@hooks': './src/hooks',
          '@navigator': './src/navigator',
          '@pages': './src/pages',
          '@store': './src/store',
          '@types': './src/types',
          '@utils': './src/utils',
          '@services': './src/services',
          // '@models': './src/models',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

OK, then what version are you using typescript and babel to run this package?, maybe I'll try downgrading to do some analysis of the problem

[frw]

Hmm, it seems like your babel and TypeScript versions shouldn't have any issues, and seems to be the recommended versions for RN 0.71.6

Another possible fix is to delete node_modules, re-install your packages, and then run yarn start --reset-cache to restart the App.

You can check out the example app here: https://github.com/frw/react-native-ssl-public-key-pinning/tree/main/example Perhaps that might help you in figuring out what's being configured improperly.

If you create an example repository with a minimal reproducible example, I'm happy to take a look into it.

[alfangr]

I tried running a fresh install of react native and installing this package worked fine, then I tried updating and adding babel cli then it solved it now.

i did update on this

"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",

to this

"@babel/cli": "^7.24.6",
"@babel/core": "^7.24.6",
"@babel/preset-env": "^7.24.6",

and change this

"typescript": "^4.9.5"

to this

"typescript": "5.0.4"

Then yarn install

Btw, thanks for the help @frw .