0
272
Vistas¿Cuál es la forma correcta de importar una clase js en un componente Svelte?
Tengo un SomeClass.ts como:
class SomeClass { constructor () { console.log('created someclass') } } export default SomeClass Que compila a SomeClass.js
'use strict' exports.__esModule = true const SomeClass = /** @class */ (function () { function SomeClass () { console.log('created someclass') } return SomeClass }()) exports.default = SomeClass Y se importa a la etiqueta de script de App.svelte como:
<script> import SomeClass from "./SomeClass"; const instance = new SomeClass(); </script>Pero al ejecutar la aplicación me sale el error:
Uncaught SyntaxError: import not found: default
en la línea generada: import SomeClass from "/src/SomeClass.js?t=1655451078055";
Nota:
Simplemente usar la clase de sabor ES6 normal y export default MyClass en SomeClass.js funciona bien, pero también podría eliminar Typescript ...
Preproceso esbelto instalado
npm install -D svelte-preprocess
vite.config.js actualizado así:
import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' import sveltePreprocess from 'svelte-preprocess' // <--- added this // https://vitejs.dev/config/ export default defineConfig({ plugins: [svelte({ preprocess: sveltePreprocess() // <--- added this })] })¡Eliminé el .js compilado y ahora solo trabajo con el archivo Typescript directamente sin problemas!
1 Respuestas
Responde la pregunta0
La clase se compila con un sistema de módulos diferente (CommonJS) al que espera Svelte (módulo ES).
No recomendaría compilar la clase por separado, sino usar svelte-preprocess e importar/usar la fuente de TypeScript directamente en el componente, usando una etiqueta <script lang="ts"> . Luego, la clase debe compilarse junto con el código del componente.
Si la clase no se usa en ningún otro lugar, probablemente también podría cambiar la opción del module a "esnext" en el tsconfig.json correspondiente.