react-native-calendars icon indicating copy to clipboard operation
react-native-calendars copied to clipboard

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

Open vaibhav-neosoft opened this issue 1 year ago ā€¢ 3 comments

**Failed to compile.

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

  • ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | export {default as Calendar} from './calendar';

export type {CalendarProps} from './calendar'; | export {default as CalendarList} from './calendar-list'; | export {default as NewCalendarList} from './calendar-list/new';**

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

vaibhav-neosoft avatar Jul 09 '23 12:07 vaibhav-neosoft

Same for me

AlexSirenko avatar Jul 26 '23 11:07 AlexSirenko

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

jhspaybar avatar Mar 04 '24 14:03 jhspaybar

Same here

AhmedAbuelenin avatar May 28 '24 16:05 AhmedAbuelenin