0
270
Views¿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 answers
Answer question0
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.