Skip to content

Using dir attribute with surrounding content triggers "Cannot read properties of null (reading 'type')" #15126

Open
@lin-stephanie

Description

@lin-stephanie

Describe the bug

When adding a dir="auto" attribute to an HTML element in a Svelte component, everything seems fine if that element is the only element in the component. However, once there is any additional content before or after it—or if there are multiple elements each with dir="auto"—the compiler throws this error:

Error compiling component
Cannot read properties of null (reading 'type')

Examples of the issue in the Svelte Playground

  • This code does NOT error:

    <h1 dir="auto">Hello</h1>
  • This code does error:

    <h1 dir="auto">Hello</h1>
    <h1 dir="auto">Hello</h1>
  • Also errors:

    Hello
    <h1 dir="auto">Hello</h1>

    And:

    <h1 dir="auto">Hello</h1>
    Hello

I discovered this because in MDsveX-based project, whenever I set node.properties.dir = "auto" on certain nodes, the same compiler error occurs, even though removing dir="auto" fixes the issue. Here's the rehype-callouts plugin issue discussion where I initially encountered the error.

Reproduction

Logs

[vite] Internal server error: Cannot read properties of null (reading 'type')
  Plugin: vite-plugin-svelte
  File: /home/lin-stephanie/svelte-issue-15126/src/routes/App.svelte
      at MemberExpression (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:1204:42)
      at handle (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:74:2)
      at AssignmentExpression (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:891:3)
      at handle (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:74:2)
      at ArrowFunctionExpression (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:886:4)
      at handle (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:74:2)
      at CallExpression|NewExpression (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:759:4)
      at handle (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:74:2)
      at ExpressionStatement (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:1069:3)
      at handle (file:///home/lin-stephanie/svelte-issue-15126/node_modules/.pnpm/esrap@1.4.3/node_modules/esrap/src/handlers.js:74:2)

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    svelte: ^5.0.0 => 5.19.3

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions