Module not found: Error: Can't resolve './Date/Calendar' in ../node_modules/react-native-paper-dates/lib/module'

[adamlucia]

I'm having problems getting react-native-paper-dates to build in Webpack 5 (for the browser). I'm looking for some suggestions.

I'm getting a bunch of errors (33) like this:

ERROR in ./node_modules/@react-native/assets-registry/registry.js 13:7
Module parse failed: Unexpected token (13: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
| 'use strict';
| 
> export type AssetDestPathResolver = 'android' | 'generic';
| 
| export type PackagerAsset = {
 @ ./node_modules/react-native-svg/lib/module/lib/resolveAssetUri.js 3:0-70 11:18-30
 @ ./node_modules/react-native-svg/lib/module/web/utils/prepare.js 3:0-60 87:37-52
 @ ./node_modules/react-native-svg/lib/module/web/WebShape.js 5:0-42 22:18-25 73:35-42
 @ ./node_modules/react-native-svg/lib/module/elements.web.js 2:0-42 3:28-36 6:30-38 9:26-34 12:29-37 15:29-37 18:35-43 21:41-49 24:33-41 27:38-46 30:39-47 33:39-47 36:36-44 39:34-42 42:29-37 45:29-37 48:29-37 51:29-37 54:29-37 57:36-44 60:29-37 63:29-37 66:33-41 69:34-42 72:30-38 75:34-42 78:40-48 81:33-41 84:28-36 87:34-42 90:28-36 93:35-43 96:23-31 110:27-35 113:26-34 116:36-44 119:28-36 122:26-34 125:26-34 128:29-37 131:29-37 134:30-38 137:36-44 140:26-34 143:26-34 146:25-33 173:28-36 176:27-35 179:26-34 182:30-38 185:25-33
 @ ./node_modules/react-native-svg/lib/module/ReactNativeSVG.web.js 6:0-27 6:0-27 7:0-37 7:0-37
 @ ./node_modules/react-native-svg/lib/module/index.js 1:0-33 1:0-33 2:0-43 2:0-43
 @ ./src/components/ui/icon/index.tsx 1:1844-1871
 @ ./src/components/ConverterPricing.js 1:447-478
 @ ./src/views/MainContainer.js 1:872-913
 @ ./src/components/AppBody.js 1:887-920
 @ ./src/App.js 1:1187-1218
 @ ./src/index.js 1:209-225

ERROR in ./node_modules/react-native-paper-dates/lib/module/index.js 3:0-54
Module not found: Error: Can't resolve './Date/Calendar' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
Did you mean 'Calendar.js'?
BREAKING CHANGE: The request './Date/Calendar' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './Date/Calendar' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
  using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: ./Date/Calendar)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/Date/Calendar doesn't exist
 @ ./src/components/Dashboard/CashDrawer/CashDrawer.js 1:1066-1101
 @ ./src/components/Dashboard/Dashboard.js 1:441-475
 @ ./src/views/DashboardMainContainer.js 1:842-886
 @ ./src/components/AppBody.js 1:1308-1350
 @ ./src/App.js 1:1187-1218
 @ ./src/index.js 1:209-225

ERROR in ./node_modules/react-native-paper-dates/lib/module/index.js 4:0-68
Module not found: Error: Can't resolve './Date/DatePickerModal' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
Did you mean 'DatePickerModal.js'?
BREAKING CHANGE: The request './Date/DatePickerModal' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './Date/DatePickerModal' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
  using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: ./Date/DatePickerModal)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/Date/DatePickerModal doesn't exist
 @ ./src/components/Dashboard/CashDrawer/CashDrawer.js 1:1066-1101
 @ ./src/components/Dashboard/Dashboard.js 1:441-475
 @ ./src/views/DashboardMainContainer.js 1:842-886
 @ ./src/components/AppBody.js 1:1308-1350
 @ ./src/App.js 1:1187-1218
 @ ./src/index.js 1:209-225

ERROR in ./node_modules/react-native-paper-dates/lib/module/index.js 6:0-82
Module not found: Error: Can't resolve './Date/DatePickerModalContent' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
Did you mean 'DatePickerModalContent.js'?
BREAKING CHANGE: The request './Date/DatePickerModalContent' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './Date/DatePickerModalContent' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
  using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: ./Date/DatePickerModalContent)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/Date/DatePickerModalContent doesn't exist
 @ ./src/components/Dashboard/CashDrawer/CashDrawer.js 1:1066-1101
 @ ./src/components/Dashboard/Dashboard.js 1:441-475
 @ ./src/views/DashboardMainContainer.js 1:842-886
 @ ./src/components/AppBody.js 1:1308-1350
 @ ./src/App.js 1:1187-1218
 @ ./src/index.js 1:209-225

ERROR in ./node_modules/react-native-paper-dates/lib/module/index.js 7:0-68
Module not found: Error: Can't resolve './Time/TimePickerModal' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
Did you mean 'TimePickerModal.js'?
BREAKING CHANGE: The request './Time/TimePickerModal' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './Time/TimePickerModal' in '/Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module'
  using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/package.json (relative path: ./Time/TimePickerModal)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/noobles/Documents/Kanect/app/node_modules/react-native-paper-dates/lib/module/Time/TimePickerModal doesn't exist
 @ ./src/components/Dashboard/CashDrawer/CashDrawer.js 1:1066-1101
 @ ./src/components/Dashboard/Dashboard.js 1:441-475
 @ ./src/views/DashboardMainContainer.js 1:842-886
 @ ./src/components/AppBody.js 1:1308-1350
 @ ./src/App.js 1:1187-1218
 @ ./src/index.js 1:209-225

babel.config.js

module.exports = {
  sourceType: "unambiguous",
  presets: [
    'babel-preset-expo',
    'module:@react-native/babel-preset',
    ['@babel/preset-env', { 
      "loose": true,
      "shippedProposals": true,
      // 'useBuiltIns': 'usage'
    }],
    '@babel/preset-react',
    '@babel/preset-flow',
    '@babel/preset-typescript'
  ],

  plugins: [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ['@babel/plugin-proposal-private-methods', { "loose": true }],
    '@babel/plugin-proposal-object-rest-spread'
  ]
};

webpack.config.js

const path = require('path');
const webpack = require('webpack');
// const HtmlWebpackPlugin = require('html-webpack-plugin');

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const { babelPlugins, babelPresets } = require('./babel.config');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const appDirectory = path.resolve(__dirname, './');

const compileNodeModules = [
  // 'react-native-everywhere-image-picker',
  'react-native-webview',
  '@gluestack-ui',
  '@gluestack-ui/nativewind-utils',
  '@react-native-aria/interactions',
  'tailwind-variants',
  'react-native-css-interop',
  'react-native-highcharts',
  'react-native-web-webview',
  'react-native-vector-icons',
  'expo-modules-core',
  'react-native-web'
].map(moduleName => path.resolve(appDirectory, `node_modules/${moduleName}`));

 console.log("Modules being included: (compileNodeModules) ", compileNodeModules);

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$|\.jsx|\.ts$|\.tsx/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    // path.resolve(appDirectory, 'index.web.js'),
    path.resolve(__dirname, 'App.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    // path.resolve(appDirectory, 'node_modules/@react-native-async-storage/async-storage'), // Transpile async-storage
    // path.resolve(appDirectory, 'node_modules/react-native-web'), // Transpile react-native-web
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      targets: "defaults",
      cacheDirectory: false,
      babelrc: false,
      rootMode: 'upward',
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: babelPresets,
      // presets: ["module:@react-native/babel-preset"],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        ["module-resolver", {
          root: ["./"],
          extensions: [".js", ".ts", ".tsx", ".jsx"],
          alias: {
            "@/": "./src/",
            "tailwind.config": "./tailwind.config.js",
            "tailwind-variants/dist/config": "./node_modules/tailwind-variants/dist/config.d.ts",
            // '^react-native$': 'react-native-web',
            'react-native$': require.resolve('react-native-web'),
            // '@react-native-community/async-storage': 'react-native-web'
          }
        }],
        ...(babelPlugins || [])
      ],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

const reactNativeWebWebViewLoaderConfiguration = {
  test: /postMock.html$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  // mode: 'production',
  mode: 'development',
  cache: false,
  stats: {
    errorDetails: true,
    children: true
  },
  devtool: 'eval-source-map',
  target: 'web',
  optimization: {
    minimize: false
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
    new NodePolyfillPlugin({
      // additionalAliases: ['require'],
    }),
  ],

  entry: [
    // load any web API polyfills
    // 'regenerator-runtime/runtime',
    // your web-specific entry file
    path.resolve(appDirectory, 'src/index.js'),
  ],

  resolve: {
    mainFields: ['browser', 'module', 'main'], // Prioritize browser-compatible builds
    extensions: ['.web.js', '.ts', '.tsx', '.js', '.jsx'],
    // // modules: ['node_modules'],
    alias: {
      'react-native$': 'react-native-web',
      'react-native-web': path.resolve(__dirname, 'node_modules/react-native-web'),
      '@react-native-async-storage/async-storage': 'react-native-web',// "works" but is it right?
      '@': path.resolve(__dirname, 'src'),
    },
    modules: ['node_modules'],
    plugins: [
      new TsconfigPathsPlugin({ extensions: ['.web.js', '.ts', '.tsx', '.js', '.jsx'] }),
    ],
    fullySpecified: false,
    fallback: {
      fs: false, // Disable fs module
      path: require.resolve('path-browserify'),
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer/'),
      events: require.resolve('events/'), // Add fallback for events
    }
  },
  
  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '',
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      reactNativeWebWebViewLoaderConfiguration,
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
      {
        test: /\.json$/,
        type: 'json',
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [{loader: '@svgr/webpack', options: {native: true}}],
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        type: 'asset/resource'
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    devMiddleware: {
      writeToDisk: true,
    },
    allowedHosts: 'dev.kanectrecycling.com',
    // For local development
    // allowedHosts: 'all',
  }
};

[adamlucia]

It seems that Webpack now requires extensions in imports to meet the ESM standard. paper-dates does not use extensions. What are my options?

[RichardLindhout]

use metro web bundler in expo. Or maybe we should update bob-builder to support this. But not sure if other react native libraries support it?