React Native Web based on demo failes serving due to react-native-fs and DynamicFonts

[theobouwman]

Our RN app of which we want to create a web version from fails to serve due to DynamicFonts using react-native-fs.

➜  momo-app git:(staging) ✗ yarn web
yarn run v1.22.19
$ webpack serve --mode=development --config webpack.config.js
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9001/, http://[::1]:9001/
<i> [webpack-dev-server] On Your Network (IPv4): http://169.254.168.41:9001/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/theobouwman/dev/projects/momo/momo-app/dist' directory
asset rnw.bundle.js 7.57 MiB [emitted] (name: app)
asset index.html 430 bytes [emitted]
runtime modules 26.5 KiB 13 modules
orphan modules 234 bytes [orphan] 1 module
modules by path ./node_modules/ 5.99 MiB 1368 modules
./index.web.js 697 bytes [built] [code generated]
./app.json 49 bytes [built] [code generated]
./terminal-highlight (ignored) 15 bytes [built] [code generated]
path (ignored) 15 bytes [built] [code generated]
source-map-js (ignored) 15 bytes [built] [code generated]
url (ignored) 15 bytes [built] [code generated]
fs (ignored) 15 bytes [built] [code generated]

WARNING in ./node_modules/react-native-ui-lib/lib/components/DynamicFonts/RNFSPackage.js 1:98-124
Module not found: Error: Can't resolve 'react-native-fs' in '/Users/theobouwman/dev/projects/momo/momo-app/node_modules/react-native-ui-lib/lib/components/DynamicFonts'
 @ ./node_modules/react-native-ui-lib/lib/components/DynamicFonts/FontDownloader.js 1:571-595
 @ ./node_modules/react-native-ui-lib/lib/components/DynamicFonts/index.js 1:670-697
 @ ./node_modules/react-native-ui-lib/lib/components/index.js 1:1199-1224
 @ ./node_modules/react-native-ui-lib/src/index.js 1:34001-34029
 @ ./index.web.js 1:230-260

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.95.0 compiled with 1 warning in 17943 ms

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = path.resolve(__dirname);
const { presets, plugins } = require(`${appDirectory}/babel.config.js`);
const compileNodeModules = [
  // Add every react-native package that needs compiling
  // 'react-native-gesture-handler',
  '@react-native-community/netinfo',
  'react-native-ui-lib',
  'react-native-reanimated',
  'react-native-shimmer-placeholder',
  'react-native-linear-gradient',
  'react-native-haptic-feedback',
  'react-native-animatable',
  'react-native-reanimated',
  'react-native-svg',
  'react-native-svg-transformer',
  '@react-native-community/netinfo',
  '@react-native-community/datetimepicker',
  'react-native-color',
  'react-native-ui-lib',
  'postcss',
  'postcss-js',
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.(js|jsx|ts|tsx)$/, // Updated to include .jsx
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, "index.web.js"), // Entry to your application
    // path.resolve(__dirname, "App.tsx"), // Updated to .jsx
    // path.resolve(__dirname, "src"),
    ...compileNodeModules,
  ],
  use: {
    loader: "babel-loader",
    options: {
      cacheDirectory: true,
      presets,
      plugins,
    },
  },
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: "@svgr/webpack",
    },
  ],
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: "url-loader",
    options: {
      name: "[name].[ext]",
    },
  },
};

const tsLoaderConfiguration = {
  test: /\.(ts)x?$/,
  exclude: /node_modules|\.d\.ts$/, // this line as well
  use: {
    loader: 'ts-loader',
    options: {
      compilerOptions: {
        noEmit: false, // this option will solve the issue
      },
    },
  },
};

module.exports = {
  entry: {
    app: path.join(__dirname, "index.web.js"),
  },
  output: {
    path: path.resolve(appDirectory, "dist"),
    publicPath: "/",
    filename: "rnw.bundle.js",
  },
  resolve: {
    extensions: [".web.tsx", ".web.ts", ".tsx", ".ts", ".web.js", ".js"],
    alias: {
      "react-native$": "react-native-web",
    },
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      svgLoaderConfiguration,
      tsLoaderConfiguration,
    ],
  },
  devServer: {
    static: path.resolve(appDirectory, './dist'),
    compress: true,
    port: 9001
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(true),
    }),
  ],
};

package.json

{
  "name": "awesomeproject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "react-native setup-ios-permissions && pod-install",
    "android:staging": "react-native run-android --variant=stagingdebug",
    "android:staging-release": "react-native run-android --variant=stagingrelease",
    "android:dev": "react-native run-android --variant=developmentdebug",
    "android:dev-release": "react-native run-android --variant=developmentrelease",
    "android:prod": "react-native run-android --variant=productiondebug",
    "android:prod-release": "react-native run-android --variant=productionrelease",
    "ios:dev": "react-native run-ios --scheme 'MomoAppDevelopment'",
    "ios:prod": "react-native run-ios --scheme 'MomoAppProduction'",
    "ios:staging": "react-native run-ios --scheme 'MomoAppStaging'",
    "web": "webpack serve --mode=development --config webpack.config.js"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@georstat/react-native-image-cache": "^2.4.0",
    "@gorhom/bottom-sheet": "^4.5.1",
    "@notifee/react-native": "^7.8.0",
    "@react-native-async-storage/async-storage": "^1.21.0",
    "@react-native-community/datetimepicker": "^7.6.1",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-firebase/analytics": "18.3.0",
    "@react-native-firebase/app": "18.3.0",
    "@react-native-firebase/auth": "18.3.0",
    "@react-native-firebase/crashlytics": "18.3.0",
    "@react-native-firebase/firestore": "18.3.0",
    "@react-native-firebase/messaging": "18.3.0",
    "@react-native-firebase/perf": "18.3.0",
    "@react-native-firebase/remote-config": "18.3.0",
    "@react-native-firebase/storage": "18.3.0",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.6.1",
    "@shopify/flash-list": "^1.6.3",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.2",
    "@types/react-geocode": "^0.2.1",
    "@types/react-native": "^0.70.5",
    "@types/react-native-vector-icons": "^6.4.12",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "geolib": "^3.3.4",
    "moment": "^2.29.4",
    "postcss": "^8.4.21",
    "postcss-js": "^4.0.0",
    "posthog-react-native": "^2.9.0",
    "promise": "^8.3.0",
    "react": "18.1.0",
    "react-dom": "^18.3.1",
    "react-geocode": "^0.2.3",
    "react-native": "0.70.14",
    "react-native-autolink": "^4.1.0",
    "react-native-background-fetch": "^4.1.8",
    "react-native-config": "^1.4.11",
    "react-native-device-info": "^10.3.0",
    "react-native-document-picker": "^9.0.1",
    "react-native-dynamic-vector-icons": "^1.3.0",
    "react-native-file-access": "^3.0.3",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "~2.10.0",
    "react-native-gifted-chat": "^2.4.0",
    "react-native-haptic-feedback": "^2.2.0",
    "react-native-image-crop-picker": "^0.40.0",
    "react-native-linear-gradient": "^2.8.2",
    "react-native-maps": "^1.8.0",
    "react-native-mmkv-storage": "0.8.0",
    "react-native-pager-view": "^6.2.0",
    "react-native-pell-rich-editor": "^1.8.8",
    "react-native-permissions": "^3.8.0",
    "react-native-reanimated": "^2.10.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-svg": "^14.1.0",
    "react-native-ui-lib": "^7.32.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-wallet-manager": "^0.0.5",
    "react-native-web": "^0.19.12",
    "react-native-webview": "^13.6.2",
    "react-redux": "^7.2.5",
    "reanimated-color-picker": "^2.3.0",
    "redux": "^4.1.1",
    "typescript": "^4.8.4",
    "uuid": "^9.0.1",
    "validator": "^13.11.0"
  },
  "reactNativePermissionsIOS": [
    "LocationAccuracy",
    "LocationAlways",
    "LocationWhenInUse",
    "Notifications",
    "PhotoLibrary"
  ],
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@react-native/metro-config": "^0.73.3",
    "@types/validator": "^13.11.8",
    "babel-jest": "^26.6.3",
    "babel-loader": "^9.2.1",
    "babel-plugin-module-resolver": "^5.0.2",
    "babel-plugin-react-native-web": "^0.19.12",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "clean-webpack-plugin": "^4.0.0",
    "eslint": "^7.32.0",
    "html-webpack-plugin": "^5.6.0",
    "jest": "^26.6.3",
    "metro-config": "^0.80.3",
    "metro-react-native-babel-preset": "0.72.4",
    "pod-install": "0.1.38",
    "react-native-svg-transformer": "^1.3.0",
    "react-test-renderer": "18.1.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

[adids1221]

Hi, @theobouwman have you tried to add react-native-fs to the compileNodeModules ?
I haven't managed to reproduce it on our webDemo yet, if you have a snippet of the usage of DynamicFonts that recreates the error please paste it here.