Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bind:this in loop raise error #101

Closed
Bakino opened this issue Jun 22, 2019 · 1 comment
Closed

bind:this in loop raise error #101

Bakino opened this issue Jun 22, 2019 · 1 comment

Comments

@Bakino
Copy link

Bakino commented Jun 22, 2019

In svelte 3 it should be possible to use bind:this in a loop (cf sveltejs/svelte#368)

but I get a compilation error when I bind a component in the loop

I get the error :

ERROR in ./src/Main.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: TypeError: TypeError: Cannot read property 'name' of null
    at preprocess.then.catch.err (/home/oli/Documents/bakino/work/svelte_bug/node_modules/svelte-loader/index.js:180:12)
    at <anonymous>
 @ ./src/app.js 1:0-34 14:15-19

Here is a sample code to reproduce :
Component Todo.svelte

<script>
   export let todo
</script>
<div>
   I am a todo {todo.name}
</div>

Component Main.svelte

<script>
    import Todo from './Todo.svelte' ;

    export let data = { todos: [] } ;
    let todos = [] ;
</script>
<div>
    <h1>A todo list</h1>
    {#each data.todos as todo, i}
        <div>
            <!-- the bind:this={todos[i]} generate the error, remove it and no more error -->
            <Todo todo={todo} bind:this={todos[i]}></Todo>
        </div>
    {/each}
</div>

app.js

import Main from "./Main.svelte" ;

let container = document.createElement("div") ;

let data = {
    todos: [
        {name : "first"},
        {name : "second"},
        {name : "third"},
        {name : "fourth"},
    ]
}

let view = new Main({
    target: container ,
    props: {
        data: data,
    }
});

webpack config

module.exports = {
    resolve: {
        // see below for an explanation
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    //compile controller JS
    entry: './src/app.js',
    mode: "development",//MODE,
    devtool: "source-map", // Default development sourcemap
    module: {
        rules: [
            {
                test: /\.svelte$/,
                exclude: /node_modules/,
                use: 'svelte-loader',
            }
        ]
    },
    resolve: {
        extensions: [".js", ".json"]
    },
    output: {
        filename: '[name]_bundle.js',
    }
} ;
@PixievoltNo1
Copy link

Looks like sveltejs/svelte#2333.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants