Module parse failed: Unexpected token (1:7)

[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/@native-html/transient-render-engine/src/index.ts": Module parse failed: Unexpected token (1:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

export type { StylesConfig, MixedStyleRecord } from './styles/types'; | export * from './model/model-types'; | export { default as HTMLElementModel } from './model/HTMLElementModel';

Here is my webpack.config.mjs file: 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);

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, devtool: false, context, entry: [ ...Repack.getInitializationEntries(reactNativePath, { hmr: devServer && devServer.hmr, }), entry, ], resolve: { ...Repack.getResolveOptions(platform), }, output: { clean: true, hashFunction: 'xxhash64', path: path.join(dirname, 'build/generated', platform), filename: 'index.bundle', chunkFilename: '[name].chunk.bundle', publicPath: Repack.getPublicPath({ platform, devServer }), }, optimization: { minimize, minimizer: [ new TerserPlugin({ test: /.(js)?bundle(\?.)?$/i, extractComments: false, terserOptions: { format: { comments: false, }, }, }), ], chunkIds: 'named', }, module: { 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\//, /node_modules(.[/\])+react-freeze/, ], use: 'babel-loader', }, { test: /.[jt]sx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { plugins: devServer && devServer.hmr ? ['module:react-refresh/babel'] : undefined, }, }, }, { test: Repack.getAssetExtensionsRegExp(Repack.ASSET_EXTENSIONS), use: { loader: '@callstack/repack/assets-loader', options: { platform, devServerEnabled: Boolean(devServer), scalableAssetExtensions: Repack.SCALABLE_ASSETS, }, }, }, ], }, plugins: [ new Repack.RepackPlugin({ context, mode, platform, devServer, output: { bundleFilename, sourceMapFilename, assetsPath, }, }), ], }; };

Reproducible Demo

[jbroma]

To resolve the issue you're encountering, you need to extend the include array in your Webpack configuration to handle the additional libraries you're using (react-native-render-html and @native-html).

Here's the updated section of your configuration that includes these two libraries:

{
  module: {
    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/,
          /node_modules(.[/\])+react-freeze/,
          // Add these two lines:
          /node_modules(.[/\])+react-native-render-html/,
          /node_modules(.[/\])+@native-html/,
        ],
        use: 'babel-loader',
      },
    ],
  }
}

[snehaJain8]

Thanks @jbroma