SyntaxError: Named export 'Pane' not found.

[JeanJPNM]

I was testing this package with vitepress 1.0.0-alpha.22 and vue 3.

The package works as expected in dev mode, but during build, vite will not be able to load it:

import { Splitpanes, Pane } from "splitpanes";
                     ^^^^
SyntaxError: Named export 'Pane' not found. The requested module 'splitpanes' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'splitpanes';
const { Splitpanes, Pane } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async loadPage (file:///C:/devenv/projects/mlogjs/website/docs/.vitepress/.temp/Content.b885c01a.js:195:18)
    at async Object.go (file:///C:/devenv/projects/mlogjs/website/docs/.vitepress/.temp/Content.b885c01a.js:187:5)
    at async render (file:///C:/devenv/projects/mlogjs/website/docs/.vitepress/.temp/app.js:4169:3)
    at async renderPage (file:///C:/devenv/projects/mlogjs/node_modules/.pnpm/[email protected]/node_modules/vitepress/dist/node/serve-ed2c66fa.js:41374:19)
    at async Promise.all (index 1)
    at async build (file:///C:/devenv/projects/mlogjs/node_modules/.pnpm/[email protected]/node_modules/vitepress/dist/node/serve-ed2c66fa.js:42123:7)

This is likely related to intlify/vue-i18n#1131

[antoniandre]

Hi @JeanJPNM,

Thanks for the PR.
All the dependencies have been updated. Please let me know if this issue is solved when using Splitpanes 3.1.3
Please reopen if not solved. :)
Cheers.

[JeanJPNM]

It still doesn't work, looking at the package.json, I see that the esm imports are using the old name of the es module.

Updating it like this should fix the problem:

{
-   "module": "./dist/splitpanes.es.js",
+ "module": "./dist/splitpanes.mjs",
// ...
"exports": {
  // ...
  ".": {
-    "import": "./dist/splitpanes.es.js"
+    "import": "./dist/splitpanes.mjs"
  }
}

}

[JeanJPNM]

Also I can't reopen this issue.

[antoniandre]

You're right, the .es.js should be there and it was changed to mjs with the latest updates. Now it should be fixed in version 3.1.4.
Related to #179

[JeanJPNM]

The issue still persists, for vite to know that a javascript file is an es module it looks for a "type": "module" in the package.json (if it has one it causes all files to be treated as modules) or the file needs to have a .mjs extension to override the default cjs behavior.

[antoniandre]

Okay, I will serve it as an ES Module, I think it is time to move on anyway. :)
Please try the version 3.1.5 and let me know.

[JeanJPNM]

It works now, thanks!