add axios to repack app

Ask your Question

my webpack 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);

/**

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), conditionNames: ['default'], /**
  - 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, axios: new URL('./node_modules/axios/index.js', import.meta.url) .pathname, }, }, /**
- 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-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(.[/\])+redux-thunk/, ], use: 'babel-loader', },
  { test: /.[jt]sx?$/, include: [/node_modules(.*[/\])+axios\//], use: { loader: 'babel-loader', options: { presets: [ [ 'module:@react-native/babel-preset', {disableImportExportTransform: true}, ], ], }, }, }, /**
  - 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),
  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,
  },
  }),
  ],
  };
  };
```

I try add axios to app but I had error Unhandled JS Exception: Cannot find module '@babel/runtime/helpers/slicedToArray'

webpackMissingModule index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62101:59 ./node_modules/axios/lib/utils.js index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62101:161 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require__ index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./node_modules/axios/lib/axios.js index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:61399:86 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./node_modules/axios/index.js index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:61323:90 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 __webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./src/services/httpClient.ts index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:12109:560 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./src/services/account.services.ts index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:12065:640 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./src/services/index.ts index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:12153:398 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./src/app/screens/sign-in-flow/index.tsx index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:11273:1476 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./src/navigation/index.tsx index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:11757:961 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./App.tsx index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:10525:730 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 webpack_require index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 fn index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62381:28 ./index.js index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:10569:489 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62723:35 __webpack_require__ index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:62180:37 anonymous index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:63434:56 global index.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.hostApp:63437:12

callstack / repack

add axios to repack app #652

Ask your Question