Docusaurus访问文档时出现React已声明错误求助
问题
使用content-docs插件拆分文档到不同板块时,访问文档页面出现以下错误:
ERROR in ./docs/global/index.md Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: D:\Projects\ArmorUp-Wiki\docs\global\index.md: Identifier 'React' has already been declared. (36:205)
对应的Docusaurus配置文件如下:
// @ts-check // Note: type annotations allow type checking and IDEs autocompletion const lightCodeTheme = require('prism-react-renderer/themes/github'); const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'ArmorUP Wiki', tagline: 'Dinosaurs are cool', favicon: 'img/favicon.ico', url: 'https://wiki.armorup.ca', baseUrl: '/', organizationName: 'ArmorUP Network', projectName: 'ArmorUP Wiki', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', i18n: { defaultLocale: 'en', locales: ['en'], }, presets: [ [ 'classic', /** @type {import('@docusaurus/preset-classic').Options} */ ({ theme: { customCss: require.resolve('./src/css/custom.css'), }, }), ], ], plugins: [ [ 'content-docs', /** @type {import('@docusaurus/plugin-content-docs').Options} */ { id: 'global', path: 'docs/global', routeBasePath: '/global', sidebarPath: require.resolve('./sidebars/global.js'), }, ], [ 'content-docs', /** @type {import('@docusaurus/plugin-content-docs').Options} */ { id: 'lifesteal', path: 'docs/lifesteal', routeBasePath: '/lifesteal', sidebarPath: require.resolve('./sidebars/lifesteal.js'), }, ], ], themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ // Replace with your project's social card image: 'img/docusaurus-social-card.jpg', navbar: { title: 'ArmorUp', logo: { alt: 'ArmorUp', src: 'img/logo.svg', }, items: [ { to: "global", label: "Global", position: "left", }, { to: "lifesteal", label: "Lifesteal", position: "left", }, ], }, footer: { style: 'dark', links: [ { title: 'Wiki', items: [ { label: 'Global', to: 'global', }, { label: 'Lifesteal', to: 'lifesteal', }, ], }, { title: 'Community', items: [ { label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/docusaurus', }, { label: 'Discord', href: 'https://discordapp.com/invite/docusaurus', }, { label: 'Twitter', href: 'https://twitter.com/docusaurus', }, ], }, { title: 'More', items: [ { label: 'GitHub', href: 'https://github.com/facebook/docusaurus', }, ], }, ], copyright: `Copyright © ${new Date().getFullYear()} ArmorUp Network`, }, prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, }, }), }; module.exports = config;
疑问:是否是配置文件遗漏相关设置导致该错误?
解决方案
这个错误和配置文件无关,问题出在docs/global/index.md文件的第36行,内容里重复声明了React标识符。
具体修复步骤:
- 打开
docs/global/index.md,定位到第36行 - 检查该行内容:
- 如果是JSX代码块里手动写了
import React from 'react',直接删除这行(Docusaurus会自动全局注入React,无需手动导入) - 如果是代码示例里的变量名和
React重复,修改该变量名避免冲突
- 如果是JSX代码块里手动写了
- 保存文件后重启Docusaurus服务,错误即可消除
内容的提问来源于stack exchange,提问作者MrZCookie
相关产品推荐
相关产品推荐

