react-native-datetimepicker / datetimepicker

React Native date & time picker component for iOS, Android and Windows
MIT License
2.52k stars 411 forks source link

With Expo Next.js Unexpected token (9:12) datetimepicker.js #773

Open SSOURABH58 opened 1 year ago

SSOURABH58 commented 1 year ago

Error ☹️

Failed to compile

./node_modules/@react-native-community/datetimepicker/src/datetimepicker.js
Module parse failed: Unexpected token (9:12)
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
| import {Platform} from 'react-native';
| 
> import type {BaseProps} from './types';
| 
| export default function DateTimePicker(_props: BaseProps): null {

Git Repo with the issue : https://github.com/SSOURABH58/reactnative-nextjs-template

Code:

Path form root: pages\index.tsx

import DateTimePicker from "@react-native-community/datetimepicker";
.
.
.
{Platform.OS !== "web" ? (
          ShowDateTimePicker && (
            <DateTimePicker
              testID="dateTimePicker"
              value={new Date()}
              mode="date"
              is24Hour={true}
              display="default"
              onChange={(event, selectedDate) => {
                setShowDateTimePicker(false);
              }}
            />
          )
        ) : (
          <MyWebDatePicker />
        )}

path for MyWebDatePicker :components\customeWebComp\MyWebDatePicker.tsx

import { createElement, useState } from "react";

export const MyWebDatePicker = () => {
  const [date, setDate] = useState(new Date(Date.now()));

  return createElement("input", {
    type: "date",
    value: date.toISOString().split("T")[0],
    onChange: (event) => {
      setDate(new Date(event.target.value));
    },
    style: {
      height: 30,
      padding: 5,
      border: "2px solid #677788",
      borderRadius: 5,
      width: 250,
    },
  });
};

It is a basic expo next setup, I am trying to use the native date and time pickers for both mobile and web. It works fine with the expo, but getting the token issue in the next js

Please help If you have any Idea, maybe its more of a next issue but any help here will be greatly appreciated 😇

sofizambrano commented 1 year ago

Any updates on this? How did you solve it? 🙏

yumoraby commented 1 year ago

any updates on this issue?