🐛 [Bug]: Import opentiny error when sub-module define `type: module`

[gweesin]

Version

2.10.0

Vue Version

2.6.14

Link to minimal reproduction

https://github.com/gweesin/test-tiny-vue-in-vue2

you also can open it online by stackblitz:

https://stackblitz.com/github/gweesin/test-tiny-vue-in-vue2

Step to reproduce

1. pnpm add -S @opentiny/vue@2
2. import a component and use it

import { TimeLine } from "@opentiny/vue";

export default {
  render(h) {
    return h(TimeLine);
  },
};

What is expected

compile without error

What is actually happening

The problem is that sub-module (or alias component) defined type: module, so when import files, it must include suffix of files, but not.

The sub-module example

The import statement

actual:

import { isDate } from "@opentiny/vue-renderless/common/deps/date-util";

expect:

import { isDate } from "@opentiny/vue-renderless/common/deps/date-util.js";

Any additional comments (optional)

No response

[gweesin]

We could incorporate a webpack rule to address this issue:

rules: [
  // ...
  {
      test: /\.m?js/,
      resolve: {
          fullySpecified: false
      }
  }
  // ...
]

fullySpecified

[gweesin]

从脚手架层面处理可能不是很好的方案，esbuild 不支持生成带文件后缀的 import 语句，需要加插件处理或者不使用 type: "module" 属性

[gweesin]

目前看一些著名的开源项目主要采用的是后者的方案，加 esbuild 插件的话边界情况较多，不好处理

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

At present, some well-known open source projects mainly adopt the latter solution. If you add the esbuild plug-in, there will be more boundary conditions and it will be difficult to handle.