背景

最近项目更新了tocbot，结果发现报错了··

import tocbot from "tocbot" 提示no export？ - 图1

一脸懵逼，于是问了一下 AI，AI 给出了三种解释以及解决方法。

解决

你遇到的错误可能是因为 TypeScript 无法正确解析 tocbot 模块的导出方式。tocbot 模块使用了 CommonJS 的导出方式，而 TypeScript 默认使用 ES 模块的导入方式。

为了解决这个问题，你可以使用以下几种方法之一：

方法 1: 使用 require 导入

你可以使用 require 语法来导入 tocbot，这在 CommonJS 模块中是常见的做法。

  1. const tocbot = require('tocbot');

方法 2: 使用 esModuleInterop（测试无效！）

你可以在 tsconfig.json 中启用 esModuleInterop 选项，这样 TypeScript 会自动处理 CommonJS 模块的导入。

  1. {
  2.   "compilerOptions": {
  3.     "esModuleInterop": true
  4.   }
  5. }

然后你可以像这样导入 tocbot：

  1. import tocbot from 'tocbot';

方法 3: 使用 import * as（测试有效）

你也可以使用 import * as 语法来导入 tocbot，这在处理 CommonJS 模块时是常见的做法。

  1. import * as tocbot from 'tocbot';

示例代码

以下是一个完整的示例，展示了如何使用 tocbot 并配置其选项：

  1. // 方法 1: 使用 require 导入
  2. const tocbot = require('tocbot');
  4. // 方法 2: 使用 import 导入（需要启用 esModuleInterop）
  5. // import tocbot from 'tocbot';
  7. // 方法 3: 使用 import * as 导入
  8. // import * as tocbot from 'tocbot';
  10. // 初始化 tocbot
  11. tocbot.init({
  12.   tocSelector: '.js-toc',
  13.   contentSelector: '.js-toc-content',
  14.   headingSelector: 'h1, h2, h3',
  15.   ignoreSelector: '.toc-ignore',
  16.   hasInnerContainers: true,
  17.   linkClass: 'toc-link',
  18.   extraLinkClasses: 'extra-link-class',
  19.   activeLinkClass: 'is-active-link',
  20.   listClass: 'toc-list',
  21.   extraListClasses: 'extra-list-class',
  22.   isCollapsedClass: 'is-collapsed',
  23.   collapsibleClass: 'is-collapsible',
  24.   listItemClass: 'toc-list-item',
  25.   activeListItemClass: 'is-active-li',
  26.   collapseDepth: 6,
  27.   scrollSmooth: true,
  28.   scrollSmoothDuration: 420,
  29.   scrollSmoothOffset: -100,
  30.   headingsOffset: 100,
  31.   throttleTimeout: 50,
  32.   positionFixedSelector: '.js-toc',
  33.   positionFixedClass: 'is-position-fixed',
  34.   fixedSidebarOffset: 'auto',
  35.   includeHtml: true,
  36.   includeTitleTags: true,
  37.   onClick: (e: MouseEvent) => {
  38.     e.preventDefault();
  39.     console.log('Link clicked');
  40.   },
  41.   orderedList: false,
  42.   scrollContainer: null,
  43.   skipRendering: false,
  44.   headingLabelCallback: (headingLabel: string) => {
  45.     return headingLabel.length > 20 ? headingLabel.substring(0, 17) + '...' : headingLabel;
  46.   },
  47.   ignoreHiddenElements: true,
  48.   headingObjectCallback: (obj: object, node: HTMLElement) => {
  49.     if (node.classList.contains('exclude-from-toc')) {
  50.       return;
  51.     }
  52.     return obj;
  53.   },
  54.   basePath: '',
  55.   disableTocScrollSync: false,
  56.   tocScrollOffset: 20
  57. });
  59. // 销毁 tocbot
  60. // tocbot.destroy();
  62. // 刷新 tocbot
  63. // tocbot.refresh();

通过这些方法，你应该能够成功导入并使用 tocbot 模块。