Fullcalendar 错误：请在尝试导入插件之前导入顶级 fullcalendar 库（Create-React-App & Craco.config.js）

Question

Below code works fine if the lines are commented out but if I uncomment the lines below in the code I am getting the error shown below in the image. I couldn't find any similar examples online related the issue.

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
// import listGridPlugin from "@fullcalendar/list"; // Throwing an error if this line is uncommented 
// import interactionPlugin from "@fullcalendar/interacti1on"; // Throwing an error if this line is uncommented 

const DemoApp = () => {
  return (
    <div>
      <div className="calendar">
        <FullCalendar
          plugins={[
            dayGridPlugin,
            timeGridPlugin,
            // interactionPlugin, // Throwing an error if this line is uncommented 
            // listGridPlugin, // Throwing an error if this line is uncommented 
          ]}
          headerToolbar={{
            left: "today prev,next prevYear,nextYear",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
          }}
          initialView="dayGridMonth"
          events={[
            { title: "event 1", date: "2020-06-01" },
            { title: "event 2", date: "2020-06-04" },
            { title: "event 2", date: "2020-06-10" },
            { title: "event 2", date: "2020-06-17" },
          ]}
        />
      </div>
    </div>
  );
};

export default DemoApp;

I have created my app using create-react-app template and I am using craco.config.js (used this for the purposes of Ant design ) shown below. I am struggling to override the webpack settings as suggested the fullcalendar documentation. When I downloaded the fullcalendar examples for react it works perfectly fine with webpack-config.js file. As I am using create-react-app template with craco.config.js I am not sure how to load css-loader settings in craco.config.js file.

Any suggestions or advice would be of great help.

Thank you very much for your time in advance.

package.json file

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

craco.config.js file

const CracoLessPlugin = require('craco-less');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const packageMeta = require('./package.json');

module.exports = {
  // webpack: {
  //   module: {
  //     rules: [
  //       {
  //         test: /\.(js|jsx)$/,
  //         exclude: /node_modules/,
  //         use: 'babel-loader', // will use .babelrc
  //       },
  //       {
  //         test: /\.css$/,
  //         use: ['style-loader', 'css-loader'],
  //       },
  //     ],
  //   },
  //   plugins: [
  //     { plugin: HtmlWebpackPlugin, options: { title: packageMeta.title } },
  //   ],
  // },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // modifyVars: { '@primary-color': '#0092ff' },
            modifyVars: { '@primary-color': '#3476cc' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

Answer 1

Found the answer. FullCalendar works absolutely fine with create-react-app template with craco.config.js and there is no need to override any webpack settings in the craco.config.js file.

Steps followed to resolve the issue. Created a new project with create-react-app template and installed fullcalendar packages and it worked fine. So, I deleted all fullcalendar npm packages in the project and started from scratch again, when I re-installed all packages everything working aboslutely fine. Something might have got corrupted previously but is working now.

Thank you everyone if you have looked into it.