Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

[snehaJain8]

Environment

React Native Version: 0.72.14 Re.Pack Version: 4.2.0 Node Version: 18.18.0 Webpack Version: ^5.93.0 "babel-loader": "^9.1.3", "babel-plugin-module-resolver": "^5.0.2",

Description

I am trying to integrate Re.Pack and Module Federation into an existing React Native project. However, I am facing the following issue: Error in "./node_modules/axios/index.js": Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0) File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders.

  import axios from"./lib/axios.js";var Axios=axios.Axios,AxiosError=axios.AxiosError,CanceledError=axios.CanceledError,isCancel=axios.isCancel,CancelToken=axios.CancelToken,VERSION=axios.VERSION,all=axios.all,Cancel=axios.Cancel,isAxiosError=axios.isAxiosError,spread=axios.spread,toFormData=axios.toFormData,AxiosHeaders=axios.AxiosHeaders,HttpStatusCode=axios.HttpStatusCode,formToJSON=axios.formToJSON,mergeConfig=axios.mergeConfig;export{axios as default,Axios,AxiosError,CanceledError,isCancel,CancelToken,VERSION,all,Cancel,isAxiosError,spread,toFormData,AxiosHeaders,HttpStatusCode,formToJSON,mergeConfig}; import * as Repack from '@callstack/repack'; import { createRequire } from 'node:module'; import path from 'node:path'; import TerserPlugin from 'terser-webpack-plugin';

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, // }, }, /**
  • 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/, /node_modules(.[/\])+react-freeze/, ], use: 'babel-loader', type: 'javascript/dynamic', }, { test: /.[cm]?[jt]sx?$/, include: [/node_modules(.[/\])+axios\//], use: { loader: 'babel-loader', options: { presets: [ ['module:metro-react-native-babel-preset', { disableImportExportTransform: true }], ], }, }, type: 'javascript/dynamic', }, { test: /.[cm]?[jt]sx?$/, include: [/node_modules(.[/\])+clevertap-react-native\//], use: { loader: 'babel-loader', options: { presets: [ ['module:metro-react-native-babel-preset', { disableImportExportTransform: true }], ], }, }, type: 'javascript/dynamic', }, { test: /.[cm]?[jt]sx?$/, include: [/node_modules(.[/\])+@react-native-firebase[/\]app\//], use: { loader: 'babel-loader', options: { presets: [ ['module:metro-react-native-babel-preset', { disableImportExportTransform: true }], ], }, }, type: 'javascript/dynamic', }, { test: /.[cm]?[jt]sx?$/, include: [/node_modules(.*[/\])+superstruct\//], use: { loader: 'babel-loader', options: { presets: [ ['module:metro-react-native-babel-preset', { disableImportExportTransform: true }], ], }, }, type: 'javascript/dynamic', }, /**
      • 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: [
        new Repack.plugins.ModuleFederationPlugin({
        name: 'mainApp',
        shared: {
        react: {
        singleton: true,
        eager: true,
        requiredVersion: '18.2.0',
        },
        'react-native': {
        singleton: true,
        eager: true,
        requiredVersion: '0.72.3',
        },
        '@react-navigation/native': {
        singleton: true,
        eager: true,
        requiredVersion: '6.0.14',
        },
        '@react-navigation/native-stack': {
        singleton: true,
        eager: true,
        requiredVersion: '6.9.2',
        },
        'react-native-safe-area-context': {
        singleton: true,
        eager: true,
        requiredVersion: '4.5.0',
        },
        'react-native-screens': {
        singleton: true,
        eager: true,
        requiredVersion: '3.20.0',
        },
        },
        }),
        /**

      • 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, }, }), ], }; };

Here is my webpack.config.mjs file:

Reproducible Demo