brace import error

[alexvdvalk]

I'm trying to implement this with Sveltekit and getting this import error in my console:

The requested module '/node_modules/brace/index.js?v=0b95d140' does not provide an export named 'Anchor'

Here is my code component, adjusted for Sveltekit.

<script lang="ts">
	import { browser } from '$app/env';
	import { onMount } from 'svelte';

	let AceEditor;
	onMount(async () => {
		if (browser) {
			AceEditor = (await import('svelte-ace')).default;
			console.log('Ace', AceEditor);
			import('brace/mode/json');
			import('brace/theme/chrome');
		}
	});
	let text = '';
</script>

{#if AceEditor}
	<AceEditor
		on:selectionChange={(obj) => console.log(obj.detail)}
		on:paste={(obj) => console.log(obj.detail)}
		on:input={(obj) => console.log(obj.detail)}
		on:focus={() => console.log('focus')}
		on:documentChange={(obj) => console.log(`document change : ${obj.detail}`)}
		on:cut={() => console.log('cut')}
		on:cursorChange={() => console.log('cursor change')}
		on:copy={() => console.log('copy')}
		on:init={(editor) => console.log(editor.detail)}
		on:commandKey={(obj) => console.log(obj.detail)}
		on:changeMode={(obj) => console.log(`change mode : ${obj.detail}`)}
		on:blur={() => console.log('blur')}
		width="100%"
		height="300px"
		lang="json"
		theme="chrome"
		value={text}
	/>
{/if}

[alexvdvalk]

I got this working in SvelteKit by lazy loading the AceEditor component:

<script lang='ts'>
	import { onMount } from 'svelte';
	let ace;
	onMount(async () => {
		ace = (await import('svelte-ace')).AceEditor;
		import('brace/mode/json');
		import('brace/theme/chrome');
	});
</script>

<svelte:component
	this={ace}
	on:selectionChange={(obj) => console.log(obj.detail)}
	on:paste={(obj) => console.log(obj.detail)}
	on:input={(obj) => console.log(obj.detail)}
	on:focus={() => console.log('focus')}
	on:documentChange={(obj) => console.log(`document change : ${obj.detail}`)}
	on:cut={() => console.log('cut')}
	on:cursorChange={() => console.log('cursor change')}
	on:copy={() => console.log('copy')}
	on:init={(editor) => console.log(editor.detail)}
	on:commandKey={(obj) => console.log(obj.detail)}
	on:changeMode={(obj) => console.log(`change mode : ${obj.detail}`)}
	on:blur={() => console.log('blur')}
	width="100%"
	height="300px"
	lang="json"
	theme="chrome"
/>

[mwarnerdotme]

I'm having the same issue with SvelteKit, but your lazy-loading solution doesn't seem to work for me for some reason. Currently using svelte-ace version 1.0.20, but every version from 1.0.12 to 1.0.21 offers the same result.

Do you mind helping me work through this? Currently, I'm just importing onMount, declaring ace, and running the three import statements in the onMount - just like you have. I've commented out my svelte:component for now and I can't seem to get rid of this does not provide an export named 'Anchor' error.

[alexvdvalk]

I was still new to lazy loading components when i logged this. I managed to get this working by installing brace separately and take the following code:

<script lang="ts">
	import { browser } from '$app/env';
	import { onMount } from 'svelte';

	let AceEditor;
	let ace;

	onMount(async () => {
		if (browser) {
			ace= await import ('brace');
			import('brace/mode/json');
			import('brace/theme/chrome');
			import('brace/theme/monokai');
			AceEditor = (await import('svelte-ace')).AceEditor;
		}
	});
	let text = 'Hello World';
</script>

<svelte:component
	this={AceEditor}
	on:selectionChange={(obj) => console.log(obj.detail)}
	on:paste={(obj) => console.log(obj.detail)}
	on:input={(obj) => console.log(obj.detail)}
	on:focus={() => console.log('focus')}
	on:documentChange={(obj) => console.log(`document change : ${obj.detail}`)}
	on:cut={() => console.log('cut')}
	on:cursorChange={() => console.log('cursor change')}
	on:copy={() => console.log('copy')}
	on:init={(editor) => console.log(editor.detail)}
	on:commandKey={(obj) => console.log(obj.detail)}
	on:changeMode={(obj) => console.log(`change mode : ${obj.detail}`)}
	on:blur={() => console.log('blur')}
	width="100%"
	height="300px"
	lang="json"
	theme="monokai"
	value={text}
/>

[alexvdvalk]

Make sure you set the height otherwise it defaults to 0 (basically hidden)

[bostondevin]

I'm getting this error: error: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package
when npm install svelte-ace - doing nothing else it won't build...