🔥🐞 Attempted import error: 'AgendaListProps' is not exported from './expandableCalendar/agendaList'.

Description

I’m trying to install react-native-calendars onto our React-Native for Web x NextJS platform. I have setup the next-transpile-modules 'module in our next.config.js which helped with the initial static Proptypes transpilation issue but now i am getting an export error.

Expected Behavior

Expecting the module to work 😉

Observed Behavior

Page fails to load with error

Error

./node_modules/react-native-calendars/src/index.ts
Attempted import error: 'AgendaListProps' is not exported from './expandableCalendar/agendaList'.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: └── react-native-calendars@1.1269.0

• npm ls react-native: └─┬ @react-native-community/cli@4.14.0 └── react-native@0.63.2 deduped

• npm ls next ├─┬ next-i18next@8.8.0 │ └── next@10.1.2 deduped ├─┬ next-router-mock@0.1.4 │ └── next@10.1.2 deduped └── next@10.1.2

• npm ls react ├─┬ @apollo/client@3.4.12 │ └── react@17.0.2 deduped ├─┬ @emotion/react@11.5.0 │ └── react@17.0.2 deduped ├─┬ @emotion/styled@11.3.0 │ └── react@17.0.2 deduped ├─┬ @fortawesome/react-fontawesome@0.1.15 │ └── react@17.0.2 deduped ├─┬ @maisonsport/common-ui@1.3.8 │ ├─┬ react-native@0.63.2 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native │ ├─┬ react-test-renderer@16.14.0 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├── react@17.0.2 deduped │ └─┬ styled-components@5.3.3 │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer ├─┬ @material-ui/unstyled@5.0.0-alpha.44 │ ├─┬ @material-ui/utils@5.0.0-beta.5 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └── react@17.0.2 deduped ├─┬ @mui/material@5.1.0 │ ├─┬ @mui/core@5.0.0-alpha.54 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├─┬ @mui/system@5.1.0 │ │ ├─┬ @mui/private-theming@5.1.0 │ │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ │ ├─┬ @mui/styled-engine@5.1.0 │ │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├─┬ @mui/utils@5.1.0 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├─┬ react-transition-group@4.4.2 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └── react@17.0.2 deduped ├─┬ @react-hook/window-size@3.0.7 │ ├─┬ @react-hook/debounce@3.0.0 │ │ ├─┬ @react-hook/latest@1.0.3 │ │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├─┬ @react-hook/event@1.2.3 │ │ ├─┬ @react-hook/passive-layout-effect@1.2.1 │ │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├─┬ @react-hook/throttle@2.2.0 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └── react@17.0.2 deduped ├─┬ @reduxjs/toolkit@1.6.1 │ └── react@17.0.2 deduped ├─┬ @rooks/use-window-size@4.11.2 │ └── react@17.0.2 deduped ├─┬ @stripe/react-stripe-js@1.4.1 │ └── react@17.0.2 deduped ├─┬ @testing-library/react@11.2.7 │ └── react@17.0.2 deduped ├─┬ next-i18next@8.8.0 │ ├─┬ react-i18next@11.12.0 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └── react@17.0.2 deduped ├─┬ next-router-mock@0.1.4 │ └── react@17.0.2 deduped ├─┬ next@10.1.2 │ ├─┬ @next/react-dev-overlay@10.1.2 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├── react@17.0.2 deduped │ ├─┬ styled-jsx@3.3.2 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └─┬ use-subscription@1.5.1 │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer ├─┬ pure-react-carousel@1.27.6 │ └── react@17.0.2 deduped ├─┬ react-cookie@4.1.1 │ └── react@17.0.2 deduped ├─┬ react-countup@5.2.0 │ └── react@17.0.2 deduped ├─┬ react-day-picker@7.4.10 │ └── react@17.0.2 deduped ├─┬ react-dom@17.0.2 │ └── react@17.0.2 deduped ├─┬ react-google-recaptcha@2.1.0 │ ├─┬ react-async-script@1.2.0 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └── react@17.0.2 deduped ├─┬ react-hook-form@6.15.8 │ └── react@17.0.2 deduped ├─┬ react-markdown@6.0.3 │ └── react@17.0.2 deduped ├─┬ react-native-web@0.15.7 │ └── react@17.0.2 deduped ├─┬ react-redux@7.2.5 │ └── react@17.0.2 deduped ├─┬ react-switch@6.0.0 │ └── react@17.0.2 deduped ├─┬ react-toastify@7.0.4 │ └── react@17.0.2 deduped ├─┬ react-use@17.3.1 │ ├─┬ nano-css@5.3.4 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ ├─┬ react-universal-interface@0.6.2 │ │ └── react@17.0.2 deduped invalid: “16.13.1” from node_modules/react-native, “^16.14.0” from node_modules/react-test-renderer │ └── react@17.0.2 deduped ├─┬ react-waypoint@10.1.0 │ └── react@17.0.2 deduped └── react@17.0.2

next.config.js

/* eslint-disable no-param-reassign */
const withTM = require('next-transpile-modules')([
  'styled-components/native',
  'react-native-calendars'
]);
const withImages = require('next-images');

const { i18n, react } = require('./next-i18next.config');

const pageHeaders = require('./next_config_util/page-headers');

module.exports = withTM(
  withImages({
    headers: async () => pageHeaders,
    rewrites: async () => ({
      beforeFiles: [
        {
          source: '/status',
          has: [
            {
              type: 'header',
              key: 'accept',
              value: '.*[+|/]json',
            },
          ],
          destination: '/api/status',
        },
      ],
    }),
    webpack: (config) => {
      config.module.rules.map((rule) => {
        if (rule.test !== undefined && rule.test.source.includes('|svg|')) {
          rule.test = new RegExp(rule.test.source.replace('|svg|', '|'));
        }

        return rule;
      });

      config.module.rules.push({
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: [{
                  removeViewBox: false,
                }],
              },
            },
          },
        ],
      });

      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        // Transform all direct `react-native` imports to `react-native-web`
        'react-native$': 'react-native-web',
      };
      config.resolve.extensions = [
        '.web.js',
        '.web.ts',
        '.web.tsx',
        ...config.resolve.extensions,
      ];
      return config;
    },
    crossOrigin: 'anonymous',
    distDir: 'build',
    i18n,
    react,
  }),
);

Also specify:

1. Device/emulator/simulator & OS version: Web

Screenshots

Thank you 😊

[yairopro]

Thanks for the 1.1276.0 update which includes the fix

[yairopro]

I’ve gone back to 1.1266.0 before the disaster