Vue3项目导入timecode模块显示undefined问题求助

问题概述 #

将vue-cli降级至4.5.19后代码可正常运行，推测问题与vue-cli或其依赖相关。

使用vue-cli创建Vue.js项目，通过npm install timecode --save安装timecode包后，在Vue组件中导入的模块为空对象，调用方法时报错。该包基于CommonJS编写，在普通Node.js项目中可正常使用，怀疑问题与webpack配置相关。

环境信息 #

• @vue/cli v5.0.8
• npm v8.11.0
• node v16.16.0

项目配置与代码 #

package.json #

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "timecode": "^0.0.4",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0"
  }
}

vue.config.js #

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

babel.config.js #

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

main.js #

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue #

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
</style>

HelloWorld.vue（报错代码） #

<template></template>

<script setup>
import timecode from "timecode";
console.log(timecode); // 输出：{ }
const timeCode = timecode.Timecode; // 结果为undefined
const tc = timeCode.init({ framerate: "29.97", timecode: "01:00:00:00" }); // 报错：Cannot read properties of undefined (reading 'init')
tc.add(4);
tc.add("00:02:03:00");

console.log(tc.toString());
</script>

<style>
</style>

控制台报错信息 #

app.js:167 Uncaught TypeError: Cannot read properties of undefined (reading 'init')
at setup (HelloWorld.vue?e90b:7:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7186:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:7140:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5493:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5468:1)
at patch (runtime-core.esm-bundler.js?d2dd:5058:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5607:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5714:1)

普通Node.js项目中正常使用示例 #

index.js #

const timecode = require("timecode").Timecode; // 正常工作
const tc = timecode.init({ framerate: "29.97", timecode: "01:00:00:00" });
tc.add(4)
tc.add("00:02:03:00");
tc.toString(); 

package.json #

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "timecode": "^0.0.4"
  }
}

解决方案 #

方案1：降级Vue CLI版本 #

将@vue/cli降级至4.5.19版本后，模块可正常导入使用，推测问题根源在于Vue CLI 5及其依赖（如webpack 5）对CommonJS模块的处理方式与旧版本不同。

执行以下步骤降级：

1. 卸载全局Vue CLI：

npm uninstall -g @vue/cli

2. 安装指定版本：

npm install -g @vue/cli@4.5.19

3. 更新项目内依赖：

npm install @vue/cli-service@4.5.19 @vue/cli-plugin-babel@4.5.19 --save-dev

方案2：不降级，调整导入方式或webpack配置 #

方式A：改用require导入

在HelloWorld.vue中修改导入逻辑，直接使用CommonJS的require语法：

<script setup>
const timecode = require("timecode").Timecode;
const tc = timecode.init({ framerate: "29.97", timecode: "01:00:00:00" });
tc.add(4);
tc.add("00:02:03:00");
console.log(tc.toString());
</script>

方式B：配置webpack兼容模块

修改vue.config.js，添加webpack规则强制解析该CommonJS模块：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    module: {
      rules: [
        {
          test: require.resolve('timecode'),
          use: 'imports-loader?wrapper=commonjs'
        }
      ]
    }
  }
})

然后安装imports-loader依赖：

npm install imports-loader --save-dev

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