Skip to content

Duplicate comma & camelCase should be considered a "jsx" element, not a component. #51

@bfanger

Description

@bfanger
<script lang="ts">
  import { sveltify } from "svelte-preprocess-react";
  import App from "../../react-components/App";
  import Model from "../../react-components/Model";
  import InteractiveLight from "../../react-components/InteractiveLight";
  import { Environment } from "@react-three/drei";
  import { Canvas } from "@react-three/fiber";

  const react = sveltify({
    App,
    Canvas,
    Model,
    InteractiveLight,
    Environment,
  });
</script>

<react.Canvas>
  <react.Model wobble />
  <react.directionalLight intensity={2} position={[0, 2, 3]} />
  <react.Environment preset="sunset" />
  <react.InteractiveLight hover />
</react.Canvas>

Resulted in

Unexpected token
https://svelte.dev/e/js_parse_error
src/components/ReactApp/ReactApp.svelte:15:2
13 |      InteractiveLight,
 14 |      Environment,
 15 |    , directionalLight: directionalLight }, { ReactDOM: inject$$ReactDOM, createPortal: inject$$createPortal, renderToString: inject$$renderToString });
         ^
 16 |  ;</script>

This errors occurred because the directionalLight is injected into the sveltify object, but it didn't take into account the trailing comma, also it should have directionalLight: "directionalLight".

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions