wix / react-native-calendars

React Native Calendar Components 🗓️ 📆
MIT License
9.54k stars 2.95k forks source link

Facing issue with integrating it with react-native-web and rollup #2276

Open vaibhav-neosoft opened 1 year ago

vaibhav-neosoft commented 1 year ago

**Failed to compile.

Module parse failed: Unexpected token (2:7) File was processed with these loaders:

My babel.config.js const path = require('path');


module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    ['module-resolver', {
      alias: {
        '^react-native$': 'react-native-web',
        'react-native/Libraries/Image/AssetRegistry$': 'react-native-web/dist/modules/AssetRegistry',
      },
    }],
    ['@babel/plugin-syntax-jsx'],
    ['@babel/plugin-proposal-class-properties'],
  ]
};

My rollup.config

import alias from '@rollup/plugin-alias';
import jsx from 'acorn-jsx';
import url from '@rollup/plugin-url';
import path, { resolve } from 'path';
import typescript from 'rollup-plugin-typescript2';
import json from '@rollup/plugin-json';
import pkg from './package.json';
import nodeResolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
    'react-native-web',
    'react-dom','react','react-native-calendars'
    ],
  plugins: [
    json(),
    nodeResolve({
      include: ['node_modules/react-native/**', 'node_modules/react/**','node_modules/react-native-svg/**',
      'node_modules/react-native-web/**',
      path.resolve(__dirname, './node_modules/react-native-calendars')
    ],
      jsnext: true,
      extensions: ['.ts','.tsx', '.jsx', '.js']
  }),

    typescript({ tsconfig: "./tsconfig.json" }),

    babel({
      test: [/\.js$/, /\.jsx$/, /\.ts$/],
      extensions: [".js", ".ts", ".jsx", ".tsx"],
      include: [
        path.resolve(__dirname, './node_modules/react-native-calendars'),
      ],

  }
  ),
  commonjs({ include: /node_modules/}),
  ]

};

Please help here

Thanks

AlexSirenko commented 1 year ago

Same for me

jhspaybar commented 7 months ago

Did either of you end up finding a solution? I’m running into this as well.

AhmedAbuelenin commented 5 months ago

Same here