pngwn / svelte-adapter

Use Svelte components with Vue and React
301 stars 10 forks source link

Cannot find .svelte imports #27

Open Krossmaskinen opened 2 years ago

Krossmaskinen commented 2 years ago

When I try to import something with a .svelte ending I get this message:

Cannot find module './svelte-components/Button.svelte' or its corresponding type declarations

I installed a fresh app with create-react-app (react 18.x.x), installed svelte-adapter (0.5.0), and just added a basic button component like this:

// Button.svelte

<script>
  function logHello() {
    console.log('Hello');
  }
</script>

<button on:click={logHello}>Svelte Button</button>

and import it in my App.tsx like this:

import React from "react";
import toReact from "svelte-adapter/react";
import Button from "./svelte-components/Button.svelte";

function App() {
  const SvelteInReact = toReact(Button, {}, "div");

  return (
    <div className="App">
      <SvelteInReact />
    </div>
  );
}

export default App;

I've also tried installing @tsconfig/svelte (3.0.0) and adding the following to my tsconfig.json

"extends": "@tsconfig/svelte/tsconfig.json"

But I still get the same error. The codesandbox example imports and renders an installed library component from svelte-easy-crop, so it's not really the same as importing your own components.

When I update the codesandbox example with my own code, adding a Button.svelte and renders it, I get the same as in issue #15: Uncaught TypeError: Component is not a constructor