Missing module '/src/config' when importing.

[Rimevel]

I'm working on a project using SvelteKit for reactivity and backend. When I try to import I get:

Cannot find module 'D:\Git\write\node_modules@livingdocs\editable.js\src\config' imported from D:\Git\write\node_modules@livingdocs\editable.js\src\core.js Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\Git\write\node_modules@livingdocs\editable.js\src\config' imported from D:\Git\write\node_modules@livingdocs\editable.js\src\core.js at finalizeResolution (internal/modules/esm/resolve.js:276:11) at moduleResolve (internal/modules/esm/resolve.js:699:10) at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11) at Loader.resolve (internal/modules/esm/loader.js:86:40) at Loader.getModuleJob (internal/modules/esm/loader.js:230:28) at ModuleWrap. (internal/modules/esm/module_job.js:56:40) at link (internal/modules/esm/module_job.js:55:36)

[Rimevel]

Also when running it through Vite i sometimes get: The requested module '/node_modules/.vite/@livingdocs_editable_js.js?t=1645129462300&v=b65e2d94' does not provide an export named 'default' SyntaxError: The requested module '/node_modules/.vite/@livingdocs_editable_js.js?t=1645129462300&v=b65e2d94' does not provide an export named 'default'

[marcbachmann]

I think that error is misleading. The issue is most likely rangy that only exports using UMD. https://github.com/livingdocsIO/editable.js/blob/master/src/core.js#L1

I've tried to migrate it somewhen to https://github.com/notjosh/rangy, but failed as not all modules were migrated back then. At some time we should try to migrate everything to the native range api. There aren't many reasons anymore to use that third party library.

Could you try importing dist/editable.js directly? Additionally to that we could generate a dist/editable.esm.js or something similar

[Rimevel]

If I do import the dist version I get this:

ReferenceError: self is not defined at file:///D:/Git/Slashwrite/node_modules/@livingdocs/editable.js/dist/editable.js:1:198 at ModuleJob.run (internal/modules/esm/module_job.js:152:23) at async Loader.import (internal/modules/esm/loader.js:166:24) at async nodeImport (D:\Git\Slashwrite\node_modules\vite\dist\node\chunks\dep-f5552faa.js:60169:21) at async eval (/src/lib/Content.svelte:7:31) at async instantiateModule (D:\Git\Slashwrite\node_modules\vite\dist\node\chunks\dep-f5552faa.js:60105:9)

[stepanorda]

Run into the same problems, and debugged it till this:

1. type=module in package.json
2. all imports should have .js at the end
3. future-detection.js shouldn't just have top-level assumptions that we are including this code in the browser. It should be a function or something that is run when you create an instance. That way it would be possible to use in meta frameworks that have SSR.

Thought it would be an easy fix, but doesn't look so.

[marcbachmann]

Thanks. I've created a PR to add extensions everwhere: #441

[marcbachmann]

1. type=module in package.json

This would break the pre-built files in dist. I think an exports config would be the way to go.

2. all imports should have .js at the end

This is released in v5.0.3

3. future-detection.js shouldn't just have top-level assumptions that we are including this code in the browser. It should be a function or something that is run when you create an instance. That way it would be possible to use in meta frameworks that have SSR.

This is not such common use case. You can just use a dynamic import using import('@livingdocs/editable') for now.

I'll close this issue for now as the original error should be resolved

[stepanorda]

Thanks for a very quick fix! For anyone searching, this works now in SvelteKit:

<script>
        let inputElement;
	import { browser } from '$app/environment';
	import { onMount } from 'svelte';
	onMount(async () => {
		if (browser) {
			const {Editable} = await import('@livingdocs/editable.js');
			const editable = new Editable();
			editable.add(inputElement);
		}
	})
</script>
<div bind:this={inputElement} contenteditable/>