由于antd和较少的配置(NPM)，Gatsby运行开发出现了错误。

Question

我遇到问题时，在本地启动开发服务器时，安装antd，更少，较少-加载程序，盖茨比插件-少。gatsby-plugin

版本：-

• "gatsby-plugin-less"："^6.20.0"，
• “减”："^2.7.1"，
• "less-loader"："^3.0.0"，
• "gatsby-plugin-antd"："^2.2.0"，
• "antd"："^3.26.11"，

我在控制台中遇到javascript的错误，这里是gatsby.config.js文件供参考

module.exports = {
  // plugins: ["gatsby-plugin-chakra-ui"],
  plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-antd`,
      options: {
        javascriptEnabled: true,
        style: true,
      },
    },
    {
      resolve: `less-loader`,
      options: {
        javascriptEnabled: true,
      }
    },
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        lessOptions: {
          modifyVars: {
            "primary-color": "#00648D",
            "font-family": "Arial",
            "layout-body-background": "#66ff79",
            "table-row-hover-bg": "#E6F0FF",
            "primary-1": "#E6F0FF",
          },
        },
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /static/,
        },
      },
    },
    {
      resolve: `gatsby-plugin-s3`,
      options: {
        bucketName: "APP_S3_BUCKET",
        protocol: "https",
        hostname: APP_HOSTNAME,
        generateRoutingRules: false,
      },
    },
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/post/*`] },
    },
    "@chakra-ui/gatsby-plugin",
  ],
}

当试图运行服务器时，服务器崩溃时会出现以下错误

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in D:\SMAI\LeadRescoringDashboardV2\node_modules\antd\es\style\color\bezierEasing.less (line 110, column 0)
    at processResult (D:\SMAI\LeadRescoringDashboardV2\node_modules\webpack\lib\NormalModule.js:758:19)
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\webpack\lib\NormalModule.js:860:5
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\loader-runner\lib\LoaderRunner.js:400:11
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (D:\SMAI\LeadRescoringDashboardV2\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at D:\SMAI\LeadRescoringDashboardV2\node_modules\gatsby-plugin-less\node_modules\less-loader\dist\index.js:62:5
 @ ./node_modules/antd/es/tabs/style/index.js 2:0-22
 @ ./src/components/Labeler/index.js 10:0-28
 @ ./src/pages/post/postId.js?export=head 14:0-47 81:38-45
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 118:11-120:5
 @ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2

ERROR in ./node_modules/antd/es/tag/style/index.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/gatsby-plugin-less/node_modules/less-loader/dist/cjs.js):

Answer 1

我认为你的结构相互矛盾。例如，我不认为这是一个有效的语法或有效的盖茨比插件：

{
  resolve: `less-loader`,
  options: {
    javascriptEnabled: true,
  }
},

移除它并保留配置的其余部分如下：

   {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
      },
    },

上面的片段应该能做到这一点。