The esm version of the vue3-sfc-loader in the nodejs environment

[jbruwes]

Since the 0.9.2 version the exprorts fields have been changed in the package.json in favor of the node version:

"main": "./dist/vue3-sfc-loader.js" => "main": "./dist/vue3-sfc-loader-node.js", "module": "./dist/vue3-sfc-loader.esm.js" => "module": "./dist/vue3-sfc-loader-node.mjs", "import": "./dist/vue3-sfc-loader.esm.js" => "import": "./dist/vue3-sfc-loader-node.mjs" "require": "./dist/vue3-sfc-loader.js" => "require": "./dist/vue3-sfc-loader-node.js"

This led to the fact that the ESM version is unreachable.

import { loadModule } from "vue3-sfc-loader" - loads a node version; import { loadModule } from "vue3-sfc-loader/dist/vue3-sfc-loader.esm" - gives an error

I dare to propose, that the simple solution of the problem is just added one string to the package.json file:

"exports": { ".": { "import": "./dist/vue3-sfc-loader-node.mjs", "require": "./dist/vue3-sfc-loader-node.js" }, "./esm": "./dist/vue3-sfc-loader.esm.js" },

Consider your attention on the line "./esm": "./dist/vue3-sfc-loader.esm.js", please.

This line allow to include esm version of the vue3-sfc-loader, like that:

import { loadModule } from "vue3-sfc-loader/esm";

Please review the ability of including the line "./esm": "./dist/vue3-sfc-loader.esm.js" in the package.json file.

Thank you in advance!

[jbruwes]

Or even if it's possible:

"exports": { ".": { "import": "./dist/vue3-sfc-loader-node.mjs", "require": "./dist/vue3-sfc-loader-node.js" }, "./esm": "./dist/vue3-sfc-loader.esm.js", "./umd": "./dist/vue3-sfc-loader.js", },

[FranckFreiburger]

The following export should work with all combinations I want to support:

nodejs for server-side compilation/caching (https://nodejs.org/api/packages.html#conditional-exports) vitejs (https://vitejs.dev/config/shared-options.html#resolve-conditions) webpack (https://webpack.js.org/guides/package-exports/#conditions) jsdelivr CDN (https://www.jsdelivr.com/documentation#id-configuring-a-default-file-in-packagejson)

  "browser": "./dist/vue3-sfc-loader.js",
  "main": "./dist/vue3-sfc-loader.js",
  "module": "./dist/vue3-sfc-loader.esm.js",
  "types": "./dist/types/vue3-esm/index.d.ts",
  "exports": {
    ".": {
      "node": {
        "import": "./dist/vue3-sfc-loader-node.mjs",
        "require": "./dist/vue3-sfc-loader-node.js"
      },
      "import": "./dist/vue3-sfc-loader.esm.js",
      "require": "./dist/vue3-sfc-loader.js"
    },
    "./vue2": {
      "node": {
        "import": "./dist/vue2-sfc-loader-node.mjs",
        "require": "./dist/vue2-sfc-loader-node.js"
      },
      "import": "./dist/vue2-sfc-loader.esm.js",
      "require": "./dist/vue2-sfc-loader.js"
    },
    "./dist/*": "./dist/*",
    "./package.json": "./package.json"
  },

[FranckFreiburger]

for the record, you said earlier:

I opened a new issue for the topic, please take a look: https://github.com/FranckFreiburger/vue3-sfc-loader/issues/179

As for the context, I'll try to explain.

Suppose, that you have a nodejs environment on your PC. Let's go step by step:

1. Import your absolutly brilliant library and develop the vite+vue software (node)
2. Buid the software (vite build). Literally, vite package all files in the assets directory (node)
3. Deploy the software to the static hosting without nodejs environment
4. Open the software in an appropriate browser (browser)

In a few words, before the version 0.9.2 the vite had packaged esm version of the vue3-sfc-loader in the step 2, and in the step 4 a user obtained esm version of the vue3-sfc-loader.

Since the version 0.9.2, the vite is has packaged the node version of the vue3-sfc-loader and a user get errors in the step 4.

[jbruwes]

Franck, your solution is even better. Absolutely perfect!

[FranckFreiburger]

closed by https://github.com/FranckFreiburger/vue3-sfc-loader/commit/55b8d727c33028c513a2ee02829b1489a06f1fe1