TypeScript导入nouislider时出现exports未定义错误求助

这个错误是因为TypeScript默认编译生成了CommonJS格式的代码，而浏览器环境不支持CommonJS的exports语法，以下是具体解决步骤：

• 修改tsconfig.json的模块配置
  打开你的tsconfig.json，调整compilerOptions里的模块相关设置，让编译产物变成浏览器支持的ES模块：

  {
    "compilerOptions": {
      "target": "ES6",
      "module": "ESNext",
      "moduleResolution": "NodeNext",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "outDir": "./dist",
      "strict": true
    }
  }
  

  其中esModuleInterop和allowSyntheticDefaultImports能让你正确导入nouislider这类非ES模块规范的库，避免类型报错。

• 调整导入语句
  根据nouislider的模块类型，选择合适的导入方式：

  // 若nouislider是默认导出
  import noUiSlider from 'nouislider';
  // 若为命名导出
  import * as noUiSlider from 'nouislider';
  

  同时确认本地的nouislider.d.ts文件的导出声明和实际模块一致，要是d.ts有问题，可以直接安装@types/nouislider包（执行npm install @types/nouislider --save-dev）替代自定义的d.ts。

• 修改脚本加载方式
  在HTML中加载编译后的script.js时，必须加上type="module"属性，告诉浏览器这是ES模块：

  <script type="module" src="./dist/script.js"></script>
  

• 确认依赖安装完整
  确保你已经通过npm install nouislider安装了nouislider的实际代码包，不能只存在类型定义文件（.d.ts），否则编译后的代码找不到实际模块。

内容的提问来源于stack exchange，提问作者bakerBite