vite: TypeError: Cannot set properties of undefined (setting 'j')

[milahu]

TLDR: how to actually use this library? 0__o
... project template?

when i run the example json_schema_validation.svelte, i get the error

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/debug@4.3.2/node_modules/debug/src/browser.js?v=ab0664fe' does not provide an export named 'default'

from

svelte-jsoneditor/src/lib/components/modals/popup/AbsolutePopup.svelte

Line 4 in 8e5aecf

import createDebug from 'debug'

backtrace

// node_modules/debug/src/browser.js

module.exports = require('./common')(exports);

// node_modules/debug/src/common.js

function setup(env) {
        createDebug.debug = createDebug;
        // ...
        return createDebug;
}

module.exports = setup;

looks like a problem with vite and commonjs ...

reproduce

npm i -g pnpm
pnpx create-vite frontend --template svelte
cd frontend
pnpm install svelte-jsoneditor
cd src
curl -L -o App.svelte https://github.com/josdejong/svelte-jsoneditor/raw/main/src/routes/examples/json_schema_validation.svelte
sed -i 's/\$lib/svelte-jsoneditor/' App.svelte
cd ..
npm run dev

related

also pnpm does not run the prepare script when i install from git ...

npm rm svelte-jsoneditor
pnpm i https://github.com/josdejong/svelte-jsoneditor.git

stat node_modules/svelte-jsoneditor/dist
stat: cannot statx 'node_modules/svelte-jsoneditor/dist': No such file or directory

[milahu]

probably a bug in pnpm
after pnpm i svelte-jsoneditor i still had the git version in node_modules

clean install with the npm version svelte-jsoneditor

rm -rf node_modules
pnpm install

stat node_modules/svelte-jsoneditor/dist
  File: node_modules/svelte-jsoneditor/dist
  Size: 4096      	Blocks: 8          IO Block: 4096   directory

now getting

Uncaught TypeError: Cannot set properties of undefined (setting 'j')

from node_modules/.pnpm/debug@4.3.2/node_modules/debug/src/browser.js?v=c753326f

    module.exports = __require_for_vite_Aa8yeq.default || __require_for_vite_Aa8yeq(exports);
    const { formatters } = module.exports;
    formatters.j = function(v) {
      try {
        return JSON.stringify(v);
      } catch (error) {
        return "[UnexpectedJSONParseError]: " + error.message;
      }
    };

→ ideally use an esm version of the debug module
to avoid the buggy commonjs import

[milahu]

fixed by using rollup

https://github.com/milahu/svelte-jsoneditor-template

cost:
initial build takes 35 seconds (aka "one eternity")
incremental builds (modify App.svelte) take 15 seconds

30 sec + 10 sec with rollup config
{ treeshake: false, output: { sourcemap: false } }

[milahu]

also pnpm does not run the prepare script when i install from git ...

it does, but the prepare script is wrong

prepare should build the package = produce node_modules/svelte-jsoneditor/dist

[milahu]

prepare should build the package = produce node_modules/svelte-jsoneditor/dist

working vite template in https://github.com/milahu/svelte-jsoneditor-template
workaround in https://github.com/milahu/svelte-jsoneditor/tree/fix-install-from-git
related issue sveltejs/kit#2772

[josdejong]

Thanks @milahu for looking into this. I have to find some time to read your comments and understand the issue.

Is this related to the known issues that sveltekit+vite have with non-ES libraries (see sveltejs/kit#928)? For that I found a workaround described in the readme: https://github.com/josdejong/svelte-jsoneditor#sveltekit-setup

[milahu]

multiple issues

• a bug in pnpm which sometimes fails to re-install packages - out of scope here
• a bug in the debug module, so that the node version is imported, but we need the browser version, fixed in https://github.com/milahu/debug/commits/patch-1 - or we can wait ~10 years for an official ESM release of the debug package cos people are so good in keeping their promises /s
• installing sveltekit packages from git requires a workaround, cos sveltekit is designed to produce NPM packages ... which of course is a feature, not a bug : P

workaround described in the readme: https://github.com/josdejong/svelte-jsoneditor#sveltekit-setup

with the viteOptimizeDeps workaround, it broke even more in my case ^^

currently im not using this (svelte-jsoneditor)

[josdejong]

Wow that's quite a list 😅

Since SvelteKit is still in beta, and there are known issues with Vite and commonjs packages, I think it makes sense to wait until those issues are sorted out before putting a lot of effort into workarounds.

If specifically the debug library is problematic, we could see if we can replace it with an other, similar package.

[milahu]

putting a lot of effort into workarounds

the workarounds are working, so the only effort is copy-paste

it makes sense to wait

i would want my library to be usable not "perfect" ...

but hey, its your library ; )

[josdejong]

Yes, this will solve the issues you're having with your pnpm setup. But there are plenty of different setups and built tools and circumstances all having their own quirks, I want to be careful not ending up with a huge patchwork 😅.

If the debug library is the only issue here, I prefer looking into an alternative lightweight debugging library, or write it ourselves. Just something simple to be able to do logging without having to use console.log basically, with an automatic prefix for the component name that is logging a line :)

[milahu]

i have to admit, my sveltekit workaround requires posix shell ... give me two seconds

[milahu]

see svelte.prepare.mjs

[josdejong]

Thanks for sharing. So this is a prepare script that you can use if you are using pnpm?