Fullcalendar错误:请尝试导入顶级插件，然后再尝试导入插件(Create-React-App& Craco.config.js) [英] Fullcalendar Error: Please import the top-level fullcalendar lib before attempting to import a plugin (Create-React-App & Craco.config.js)

问题描述

如果注释掉了下面的行，下面的代码可以正常工作，但是如果我在代码中取消注释下面的行，则会收到下面图像中显示的错误.我在网上找不到与此问题相关的类似示例.

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;

我已经使用create-react-app模板创建了我的应用，并且正在使用craco.config.js(用于Ant设计的目的)，如下所示.我正在努力按照建议的全日历文档覆盖Webpack设置.当我下载fullcalendar示例进行响应时，它与webpack-config.js文件完美配合.当我在craco.config.js中使用create-react-app模板时，我不确定如何在craco.config.js文件中加载css-loader设置.

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文件

package.json file

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

craco.config.js文件

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,
          },
        },
      },
    },
  ],
};

推荐答案

找到了答案.FullCalendar可与带有craco.config.js的create-react-app模板完美配合，而无需覆盖craco.config.js文件中的任何webpack设置.

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.

按照步骤解决此问题.使用create-react-app模板创建了一个新项目，并安装了fullcalendar软件包，并且运行良好.因此，当我重新安装所有软件包时，我删除了项目中的所有fullcalendar npm软件包，并从头开始重新安装，一切正常.以前可能已经损坏了某些东西，但现在可以正常工作.

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.

感谢大家的关注.

这篇关于Fullcalendar错误:请尝试导入顶级插件，然后再尝试导入插件(Create-React-App& Craco.config.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！