repack icon indicating copy to clipboard operation
repack copied to clipboard
verified publisher icon callstack

File src_navigation_Request_tsx.chunk.bundle for ios not found in compilation assets and i try to add react-native-reanimated-carousel lib to project

Open HongQuang231 opened this issue 1 year ago • 0 comments

Ask your Question

✖ [11:43:07.277Z][DevServer] Failed to symbolicate { reqId: 'req-c', error: 'File src_navigation_Request_tsx.chunk.bundle for ios not found in compilation assets' } ✖ [11:43:07.278Z][DevServer] Internal Server Error { reqId: 'req-c', req: { method: 'POST', url: '/symbolicate', hostname: 'localhost:8081', remoteAddress: '::1', remotePort: 53063 }, res: { statusCode: 500 }, err: { type: 'InternalServerError', message: 'Internal Server Error', stack: 'InternalServerError: Internal Server Error\n' + ' at Object.internalServerError (/Users/hongquang/Documents/fis/super-app-project/hostApp/node_modules/@fastify/sensible/lib/httpErrors.js:137:19)\n' + ' at _Reply.internalServerError (/Users/hongquang/Documents/fis/super-app-project/hostApp/node_modules/@fastify/sensible/index.js:50:42)\n' + ' at Object. (file:///Users/hongquang/Documents/fis/super-app-project/hostApp/node_modules/@callstack/repack-dev-server/dist/plugins/symbolicate/sybmolicatePlugin.js:36:13)\n' + ' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)', explicitInternalServerError: true, status: 500, statusCode: 500, expose: false } }

can you help me, I try direct to mini app and it throw error

my .mjs file

`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);

const STANDALONE = Boolean(process.env.STANDALONE); // const STANDALONE = true;

/**

  • More documentation, installation, usage, motivation and differences with Metro is available at:
  • https://github.com/callstack/repack/blob/main/README.md
  • The API documentation for the functions and plugins used in this file is available at:
  • https://re-pack.dev */

/**

  • Webpack configuration.
  • You can also export a static object or a function returning a Promise.
  • @param env Environment options passed from either Webpack CLI or React Native CLI
  •        when running with `react-native start/bundle`.

*/ 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'); }

/**

  • Using Module Federation might require disabling hmr.
  • Uncomment below to set devServer.hmr to false.
  • Keep in mind that devServer object is not available
  • when running webpack-bundle command. Be sure
  • to check its value to avoid accessing undefined value,
  • otherwise an error might occur. */ // if (devServer) { // devServer.hmr = false; // }

/**

  • Depending on your Babel configuration you might want to keep it.
  • If you don't use env in your Babel config, you can remove it.
  • Keep in mind that if you remove it you should set BABEL_ENV or NODE_ENV
  • to development or production. Otherwise your production code might be compiled with
  • in development mode by Babel. */ 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,
    reselect: path.resolve(
      './node_modules/reselect/dist/reselect.legacy-esm.js',
    ),
    redux: path.resolve('./node_modules/redux/dist/redux.legacy-esm.js'),
    'react-redux': path.resolve(
      './node_modules/react-redux/dist/react-redux.legacy-esm.js',
    ),
    immer: path.resolve('./node_modules/immer/dist/immer.legacy-esm.js'),
    '@reduxjs/toolkit': path.resolve(
      './node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js',
    ),
    'redux-thunk': path.resolve(
      './node_modules/redux-thunk/dist/redux-thunk.legacy-esm.js',
    ),
  },
},
/**
 * 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\//,
        /node_modules(.*[/\\])+react-native/,
        /node_modules(.*[/\\])+@react-native/,
        /node_modules(.*[/\\])+react-freeze/,
        /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/,
        /node_modules(.*[/\\])+immer/,
        /node_modules(.*[/\\])+redux/,
        /node_modules(.*[/\\])+react-redux/,
        /node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit/,
        /node_modules(.*[/\\])+reselect/,
        /node_modules(.*[/\\])+i18next/,
        /node_modules(.*[/\\])+react-i18next/,
        /node_modules(.*[/\\])+react-native-safe-area-context/,
        /node_modules(.*[/\\])+react-native-pager-view/,
        /node_modules(.*[/\\])+react-native-tab-view/,
        /node_modules(.*[/\\])+react-native-reanimated-carousel/,
      ],
      use: 'babel-loader',
    },

    {
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            native: true,
            // You might want to uncomment the following line.
            // More info: https://react-svgr.com/docs/options/#dimensions
            // dimensions: false,
          },
        },
      ],
    },
    /**
     * 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,
        },
      },
    },
    /**
     * 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.filter(ext => ext !== 'svg'),
      ),
      use: {
        loader: '@callstack/repack/assets-loader',
        options: {
          platform,
          inline: true,
          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: 'eRequest',
    exposes: {
      './eRequestApp': './src/navigation/Request',
    },
    shared: {
      react: {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '18.2.0',
      },
      'react-native': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '0.74.2',
      },
      '@react-navigation/native': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '6.1.17',
      },
      '@react-navigation/native-stack': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '6.9.26',
      },
      'react-native-safe-area-context': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '4.10.5',
      },
      '@react-navigation/bottom-tabs': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '6.5.20',
      },
      '@react-native-async-storage/async-storage': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '1.23.1',
      },
      'react-native-reanimated': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '3.12.1',
      },
      'react-native-gesture-handler': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '2.17.1',
      },
      'react-native-svg': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '15.3.0',
      },
      i18next: {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '23.11.5',
      },
      'react-i18next': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '14.1.2',
      },
      redux: {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '5.0.1',
      },
      'react-redux': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '9.1.2',
      },
      '@reduxjs/toolkit': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '2.2.5',
      },
      'redux-saga': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '1.3.0',
      },
      'redux-persist': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '6.0.0',
      },
      'react-native-date-picker': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '5.0.4',
      },
      'react-native-pager-view': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '6.3.3',
      },
      'react-native-tab-view': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '3.5.2',
      },
      'react-native-reanimated-carousel': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '3.5.1',
      },
      '@react-native-masked-view/masked-view': {
        singleton: true,
        eager: STANDALONE,
        requiredVersion: '0.3.1',
      },
    },
  }),

  //sign app
  // new Repack.plugins.CodeSigningPlugin({
  //   // enabled: mode === 'production',
  //   privateKeyPath: './code-signing.pem',
  //   excludeChunks: /local/,
  // }),
],

}; }; `

HongQuang231 avatar Jul 02 '24 11:07 HongQuang231