I'm trying to nest one svelte ponent in another svelte ponent.

//index.js
import Parent from './Parent.svelte';

new Parent({
  target: document.querySelector('main')
})


// Parent.svelte
<script>
  import Child from "./Child.svelte";
</script>

<p>parent ponent</p>
<Child />


// Child.svelte
<p>child ponent</p>

I expect Child.svelte to be nested in Parent.svelte, but I get this error message instead

Cannot read property 'fragment' of undefined

by the way: I´m using parcel with parcel-plugin-svelte

I'm trying to nest one svelte ponent in another svelte ponent.

//index.js
import Parent from './Parent.svelte';

new Parent({
  target: document.querySelector('main')
})


// Parent.svelte
<script>
  import Child from "./Child.svelte";
</script>

<p>parent ponent</p>
<Child />


// Child.svelte
<p>child ponent</p>

I expect Child.svelte to be nested in Parent.svelte, but I get this error message instead

Cannot read property 'fragment' of undefined

by the way: I´m using parcel with parcel-plugin-svelte

• javascript
• parcel
• svelte

Share Improve this question Follow asked Jul 12, 2019 at 15:00 DanielDaniel 71722 gold badges1212 silver badges2727 bronze badges 5

• The <main> element probably doesn't exist by the time this is called. – Someone Commented Jul 12, 2019 at 15:10
• @Lewis the <main> element exists. it is hard-coded into the index.html file. This will run if I remove the nested child – Daniel Commented Jul 12, 2019 at 15:12
• when using REPL on their site your sample works to me. could your reproduce full set up in codesandbox or something similar? – skyboyer Commented Jul 14, 2019 at 15:56
• Same issue here when I try to add a child ponent. The issue goes away if I parcel build instead of parcel watch so I suspect parcel is doing something odd in dev builds – will-hart Commented Jul 15, 2019 at 0:43
• 1 Its a confirmed bug: github./DeMoorJasper/parcel-plugin-svelte/issues/… – will-hart Commented Jul 15, 2019 at 1:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I had a similar issue and need to change the way how react is imported

 import { React } from 'react'

need to change to

 import React from 'react'

This is a known bug with parcel-svelte-plugin. The workaround for now as per github issue #55 is to disable parcel hmr:

parcel --no-hmr