property 'exports' doesn't exists

[aghiad-90]

Hello, I have installed react-native-lottie-splash screen library, splash screen is loaded but when I am calling hide function I am getting this error

Note: I am using re-pack.

here is the output of react-native info
System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Memory: 144.80 MB / 8.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 21.5.0 path: /usr/local/bin/node Yarn: version: 1.22.10 path: /opt/homebrew/bin/yarn npm: version: 10.8.2 path: /opt/homebrew/bin/npm Watchman: version: 4.9.0 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /opt/homebrew/lib/ruby/gems/3.0.0/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.2 - iOS 17.2 - macOS 14.2 - tvOS 17.2 - visionOS 1.0 - watchOS 10.2 Android SDK: API Levels: - "29" - "30" - "34" Build Tools: - 29.0.2 - 30.0.3 - 33.0.1 - 34.0.0 System Images: - android-30 | Google APIs Intel x86 Atom - android-30 | Google Play Intel x86 Atom - android-33 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2023.1 AI-231.9392.1.2311.11255304 Xcode: version: 15.2/15C500b path: /usr/bin/xcodebuild Languages: Java: version: 1.8.0_292 path: /usr/bin/javac Ruby: version: 3.0.1 path: /opt/homebrew/opt/ruby/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: Not Found react-native: Not Found react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

and here is my package.json

`{
  "name": "master",
  "version": "0.0.1",
  "main": "./index.js",
  "private": true,
  "scripts": {
    "android": "pnpx react-native run-android",
    "ios": " pnpx react-native run-ios",
    "pods": "cd ./ios & pnpx pod-install",
    "lint": "eslint .",
    "start": "react-native webpack-start",
    "startdd": "react-native webpack-start",
    "test": "jest"
  },
  "dependencies": {
    "@noxfed/lottie-webpack-loader": "^1.0.1",
    "@react-native-community/cli-platform-android": "^14.0.0",
    "@react-native-community/cli-platform-ios": "^14.0.0",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/material-bottom-tabs": "^6.2.29",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@rnx-kit/metro-config": "^1.3.15",
    "@rnx-kit/metro-resolver-symlinks": "^0.1.36",
    "@types/rn-fetch-blob": "^1.2.7",
    "lottie-react-native": "^6.7.2",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-bootsplash": "^6.1.1",
    "react-native-email": "^2.1.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-lottie-splash-screen": "^1.1.2",
    "react-native-paper": "^5.12.5",
    "react-native-reanimated": "^3.15.0",
    "react-native-safe-area-context": "^4.10.8",
    "react-native-screens": "^3.34.0",
    "react-native-vector-icons": "^10.1.0",
    "react-navigation": "^5.0.0",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.25.3",
    "@babel/preset-react": "^7.24.7",
    "@babel/runtime": "^7.20.0",
    "@callstack/repack": "^4.1.1",
    "@react-native/babel-preset": "0.74.87",
    "@react-native/eslint-config": "0.74.87",
    "@react-native/metro-config": "^0.74.87",
    "@react-native/typescript-config": "0.74.87",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-loader": "^9.1.3",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "concurrently": "^8.2.2",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "metro-react-native-babel-preset": "^0.77.0",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "terser-webpack-plugin": "^5.3.10",
    "typescript": "5.0.4",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4"
  },
  "engines": {
    "node": ">=18"
  }
}

`

Here is my metro config:

`const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");    
      const defaultConfig = getDefaultConfig(__dirname);
      const config = {
        resolver: {
          assetExts: [...defaultConfig.resolver.assetExts, "lottie"],
        },
      };
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

`

Here is my bable.config

`module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript',
    'module:metro-react-native-babel-preset',
  ],
};

`

and finally here is my webpack.config

`import { createRequire } from 'node:module';
  import path from 'node:path';
  import TerserPlugin from 'terser-webpack-plugin';
  import * as Repack from '@callstack/repack';

const dirname = Repack.getDirname(import.meta.url);
const { resolve } = createRequire(import.meta.url);

export default (env) => {
  const {
    mode = 'development',
    context = dirname,
    entry = './index.js',
    platform = process.env.PLATFORM,
    minimize = mode === 'production',
    devServer = undefined,
    bundleFilename = undefined,
    sourceMapFilename = undefined,
    assetsPath = undefined,
    reactNativePath = resolve('react-native'),
  } = env;

  if (!platform) {
    throw new Error('Missing platform');
  }

  process.env.BABEL_ENV = mode;

  return {
    mode,
    /**
     * This should be always `false`, since the Source Map configuration is done
     * by `SourceMapDevToolPlugin`.
     */
    devtool: false,
    context,
    /**
     * `getInitializationEntries` will return necessary entries with setup and initialization code.
     * If you don't want to use Hot Module Replacement, set `hmr` option to `false`. By default,
     * HMR will be enabled in development mode.
     */
    entry: [
      ...Repack.getInitializationEntries(reactNativePath, {
        hmr: devServer && devServer.hmr,
      }),
      entry,
    ],
    resolve: {
      /**
       * `getResolveOptions` returns additional resolution configuration for React Native.
       * If it's removed, you won't be able to use `<file>.<platform>.<ext>` (eg: `file.ios.js`)
       * convention and some 3rd-party libraries that specify `react-native` field
       * in their `package.json` might not work correctly.
       */
      ...Repack.getResolveOptions(platform),

  /**
   * Uncomment this to ensure all `react-native*` imports will resolve to the same React Native
   * dependency. You might need it when using workspaces/monorepos or unconventional project
   * structure. For simple/typical project you won't need it.
   */
  // alias: {
  //   'react-native': reactNativePath,
  // },
},
/**
 * Configures output.
 * It's recommended to leave it as it is unless you know what you're doing.
 * By default Webpack will emit files into the directory specified under `path`. In order for the
 * React Native app use them when bundling the `.ipa`/`.apk`, they need to be copied over with
 * `Repack.OutputPlugin`, which is configured by default inside `Repack.RepackPlugin`.
 */
output: {
  clean: true,
  hashFunction: 'xxhash64',
  path: path.join(dirname, 'build/generated', platform),
  filename: 'index.bundle',
  chunkFilename: '[name].chunk.bundle',
  publicPath: Repack.getPublicPath({ platform, devServer }),
},
/**
 * Configures optimization of the built bundle.
 */
optimization: {
  /** Enables minification based on values passed from React Native CLI or from fallback. */
  minimize,
  /** Configure minimizer to process the bundle. */
  minimizer: [
    new TerserPlugin({
      test: /\.(js)?bundle(\?.*)?$/i,
      /**
       * Prevents emitting text file with comments, licenses etc.
       * If you want to gather in-file licenses, feel free to remove this line or configure it
       * differently.
       */
      extractComments: false,
      terserOptions: {
        format: {
          comments: false,
        },
      },
    }),
  ],
  chunkIds: 'named',
},
module: {
  /**
   * This rule will process all React Native related dependencies with Babel.
   * If you have a 3rd-party dependency that you need to transpile, you can add it to the
   * `include` list.
   *
   * You can also enable persistent caching with `cacheDirectory` - please refer to:
   * https://github.com/babel/babel-loader#options
   */
  rules: [
    {
      test: /\.[cm]?[jt]sx?$/,
      include: [
        /node_modules(.*[/\\])+react-native/,
        /node_modules(.*[/\\])+@react-native/,
        /node_modules(.*[/\\])+@react-navigation/,
        /node_modules(.*[/\\])+@react-native-community/,
        /node_modules(.*[/\\])+expo/,
        /node_modules(.*[/\\])+pretty-format/,
        /node_modules(.*[/\\])+metro/,
        /node_modules(.*[/\\])+abort-controller/,
        /node_modules(.*[/\\])+@callstack[/\\]repack/,
      ],
      use: 'babel-loader',
    },
    /**
     * Here you can adjust loader that will process your files.
     *
     * You can also enable persistent caching with `cacheDirectory` - please refer to:
     * https://github.com/babel/babel-loader#options
     */
    {
      test: /\.[jt]sx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          /** Add React Refresh transform only when HMR is enabled. */
          plugins:
            devServer && devServer.hmr
              ? ['module:react-refresh/babel']
              : undefined,
        },
      },
    },
    { test: /\.txt$/, use: 'raw-loader' },
    {
      test: /\.(ts|tsx|js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
      },
    },
    {
      type: 'javascript/auto',
      test: /\.json$/,
      include: /(lottie)/,
      loader: 'lottie-web-webpack-loader',
    },
    /**
     * This loader handles all static assets (images, video, audio and others), so that you can
     * use (reference) them inside your application.
     *
     * If you want to handle specific asset type manually, filter out the extension
     * from `ASSET_EXTENSIONS`, for example:
     * ```
     * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
     * ```
     */
    {
      test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS),
      use: {
        loader: '@callstack/repack/assets-loader',
        options: {
          platform,
          devServerEnabled: Boolean(devServer),
          /**
           * Defines which assets are scalable - which assets can have
           * scale suffixes: `@1x`, `@2x` and so on.
           * By default all images are scalable.
           */
          scalableAssetExtensions: Repack.SCALABLE_ASSETS,
        },
      },
    },
  ],
},
plugins: [
  /**
   * Configure other required and additional plugins to make the bundle
   * work in React Native and provide good development experience with
   * sensible defaults.
   *
   * `Repack.RepackPlugin` provides some degree of customization, but if you
   * need more control, you can replace `Repack.RepackPlugin` with plugins
   * from `Repack.plugins`.
   */
  new Repack.RepackPlugin({
    context,
    mode,
    platform,
    devServer,
    output: {
      bundleFilename,
      sourceMapFilename,
      assetsPath,
    },
  }),
  new Repack.plugins.ModuleFederationPlugin({
    name: 'master',
    shared: {
      react: {
        singleton: true,
        eager: true,
      }
    }
  }),
  new Repack.plugins.ModuleFederationPlugin({
    name: 'app1',
  })
],

};
};
`

please help me with this ,