自定义Pinia Store模块接入NuxtJS：静态文件生成报错

问题场景 #

开发了一个简单的Pinia Store模块，发布至公司私有GitLab包仓库后导入Nuxt项目，本地运行无异常，但执行npm run generate生成静态文件时，出现类似如下的错误，最终导致构建失败：

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

相关代码片段 #

Pinia Store源码 #

import { defineStore } from "pinia";

export const useMyStore = defineStore({
    id: 'myStore',
    state: () => {
        return {
            // properties
        };
    },
    actions: {
        myMethod() {
            // do something
        },
    },
});

Store包的package.json #

{
  "name": "@my-company/my-store",
  "version": "0.1.13",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d dist",
    "test": "vitest --run --config ./vitest.config.js --coverage"
  },
  "author": "My Company",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@vitest/coverage-c8": "^0.29.8",
    "@vue/composition-api": "^1.7.1",
    "jsdom": "^21.1.1",
    "pinia": "^2.0.33",
    "vitest": "^0.29.8"
  }
}

Nuxt页面报错写法 #

<script>
import { useMyStore } from "@my-company/my-store";

export default {
    name: "TestPage",
    data() {
        return {
            store: useMyStore(),
        };
    },
};
</script>

问题原因 #

1. 模块格式不兼容：Babel默认将ES模块转译为CommonJS格式，但包未明确声明模块类型，Nuxt静态生成时无法正确解析CommonJS的命名导出，触发报错。
2. 依赖配置错误：Pinia被放在devDependencies中，发布后使用项目无法自动安装该依赖，间接引发模块解析异常。
3. 使用方式违规：在选项式API的data钩子中直接调用组合式API的useMyStore，不符合Vue生命周期规则，导致模块加载时机异常。

解决方案 #

步骤1：修复私有包配置 #

• 修改package.json，声明模块类型并调整依赖位置：

{
  "name": "@my-company/my-store",
  "version": "0.1.13",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "build": "babel src -d dist",
    "test": "vitest --run --config ./vitest.config.js --coverage"
  },
  "author": "My Company",
  "license": "ISC",
  "dependencies": {
    "pinia": "^2.0.33"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@vitest/coverage-c8": "^0.29.8",
    "@vue/composition-api": "^1.7.1",
    "jsdom": "^21.1.1",
    "vitest": "^0.29.8"
  }
}

• 创建babel.config.json，配置Babel保留ES模块格式：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ]
}

• 删除中间转发的index.js，直接让main指向构建后的dist/index.js。

步骤2：修正Nuxt页面使用方式 #

在选项式API中通过setup钩子调用组合式API的Pinia Store：

<script>
import { useMyStore } from "@my-company/my-store";

export default {
    name: "TestPage",
    setup() {
        const store = useMyStore();
        return { store };
    }
};
</script>

若为Nuxt 2项目，需确保已安装并启用@nuxtjs/composition-api插件。

步骤3：重新发布并更新包 #

# 重新构建私有包
npm run build
# 发布至私有仓库
npm publish
# 在Nuxt项目中更新包版本
npm install @my-company/my-store@latest

验证 #

重新执行npm run generate，即可正常完成静态文件生成。

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