There was an error when i used it on the web (registerTranslation)

[thienphuccr]

Current behaviour

import { registerTranslation, enGB } from 'react-native-paper-dates';
registerTranslation('en-GB', enGB);

Uncaught ReferenceError: require is not defined
at eval (index.js:2:28)
at ./node_modules/react-native-paper-dates/lib/module/index.js (react.native.web.bundle.js:11193:1)
at webpack_require (react.native.web.bundle.js:11277:33)
at fn (react.native.web.bundle.js:11488:21)
at eval (date-range.tsx:1:829)
at ./src/components/Date/date-range.tsx (react.native.web.bundle.js:9239:1)
at webpack_require (react.native.web.bundle.js:11277:33)
at fn (react.native.web.bundle.js:11488:21)
at eval (SaleOrder.tsx:1:3099)
at ./src/screens/SaleOrder.tsx (react.native.web.bundle.js:9419:1)

Webpack config

// node > 20.18

const path = require('path');

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

const appDirectory = path.resolve(__dirname);
const {presets} = require(`${appDirectory}/babel.config.js`);

const compileNodeModules = [
    '@react-native-async-storage/async-storage',
    '@react-navigation/drawer',
    '@react-navigation/native',
    '@react-navigation/stack',
    '@reduxjs/toolkit',
    'moment',
    'numeral',
    'process',
    'react',
    'react-native',
    'react-native-dotenv',
    'react-native-gesture-handler',
    'react-native-paper',
    'react-native-paper-dates',
    'react-native-paper-select',
    'react-native-reanimated',
    'react-native-safe-area-context',
    'react-native-swipe-list-view',
    'react-native-toast-message',
    'react-native-vector-icons',
    'react-native-web',
    'react-redux',
    'redux-persist',
    'react-native-screens',
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

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

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

const imageLoaderConfiguration = {
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024,
    },
  },
  generator: {
    filename: 'imgs/[name][hash][ext]',
  },
};

const ttfLoaderConfiguration = {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  loader: 'url-loader',
  include: [
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
  ],
};

module.exports = {
  target: ['web', 'es5'],
  entry: {
    app: path.join(__dirname, 'index.web.js'),
  },
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'react.native.web.bundle.js',
  },
  resolve: {
    extensions: ['.web.tsx', '.web.ts', '.web.js', '.tsx', '.ts', '.js', 'jsx'],
    alias: {
      'react-native$': 'react-native-web',
    },
    fallback: {
    },
  },
  devServer: {
    historyApiFallback: true,
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      svgLoaderConfiguration,
      ttfLoaderConfiguration,
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(true),
    }),
  ],
};

Your Environment

software	version
react-native	0.75.4
react-native-paper	^5.12.5
node	20.18.0
yarn	4.4.1
"react-native-web": "^0.19.12"

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[thienphuccr]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

import React from 'react';
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import moment from 'moment';
import { CalendarDate } from 'react-native-paper-dates/lib/typescript/Date/Calendar';
import { DatePickerModal } from 'react-native-paper-dates';
import { registerTranslation, enGB } from 'react-native-paper-dates';
import { TextInput } from 'react-native-paper';
import { theme } from '@assets/styles/theme';
registerTranslation('en-GB', enGB);

interface DateRangePickerProps {
  mode?: 'outlined' | 'flat';
  fontSize?: number;
  fromTime?: CalendarDate;
  toTime?: CalendarDate;
  onDateChange: (startDate: CalendarDate, endDate: CalendarDate) => void;
}

const DateRangePicker: React.FC<DateRangePickerProps> = ({
  mode = 'outlined',
  fontSize = 12,
  fromTime,
  toTime,
  onDateChange,
}) => {
  const [visible, setVisible] = useState(false);
  const [startDate, setStartDate] = useState<CalendarDate>(fromTime);
  const [endDate, setEndDate] = useState<CalendarDate>(toTime);

  const onDismiss = React.useCallback(() => {
    setVisible(false);
  }, [setVisible]);

  const onConfirm = React.useCallback(
    (rangeDate: { startDate: CalendarDate; endDate: CalendarDate }) => {
      setStartDate(rangeDate.startDate);
      setEndDate(rangeDate.endDate);
      setVisible(false);
      onDateChange(rangeDate.startDate, rangeDate.endDate);
    }, [onDateChange]);

  const formatDateRange = () => {
    if (startDate && endDate) {
      return `${moment(startDate).format('DD/MM/YY')} - ${moment(endDate).format('DD/MM/YY')}`;
    }
    return 'D/M/Y - D/M/Y';
  };

  return (
    <>
      <TextInput
        mode={mode}
        label={'Tìm theo ngày'}
        placeholder="Type something"
        value={formatDateRange()}
        style={[styles.textInput, { fontSize: fontSize }]}
        onFocus={() => setVisible(true)}
        editable={false}
        textColor={theme.colors['text-900']}
        right={
          <TextInput.Icon
            icon="chevron-down"
            size={20}
            style={styles.icon}
            onPress={() => setVisible(true)}
          />
        }
      />
      <DatePickerModal
        visible={visible}
        onDismiss={onDismiss}
        onConfirm={(rangeDate: any) => onConfirm(rangeDate)}
        startDate={startDate}
        endDate={endDate}
        label="Select a date range"
        saveLabel="Save"
        mode="range"
        locale="en-GB"
      />
    </>
  );
};

const styles = StyleSheet.create({
  textInput: {
    width: '100%',
  },
  icon: {
  },
});

export default DateRangePicker;

Here is my code, all libraries build, but react-native-paper-dates has this error, only this one. Thanks

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.