Language-tools: El atributo `lang` de la etiqueta de estilo activa una advertencia de Svelte Beta

Esto también me pasa a mí, en cuanto deshabilito cualquier idioma o detalle que señale el idioma del estilo importado a través de src="./xxx.scss" el sistema deja de quejarse al principio de la página.

Dado que sucede con scss, estoy muy seguro de que es un problema de node-sass como este .

¿Podría abrir Salida-> Svelte en VSCode (ver en la parte inferior, también dónde está su terminal), reproducir el error y pegar aquí cuál es la salida?

Posiblemente relacionado: # 32

nada hecho con Node-sass local y globalmente ha cambiado el resultado incluso después de varias recargas.

Esta es la salida de Svelte (observe que tengo 3.20.1 porque un error en la versión actualizada no me permite actualizar el proyecto, también se informó)

loading config for /PATH/TO/PROJECT/src/Button.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/node_modules/@smui/common/H6.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler

El SCSS de linting podría estar relacionado y también solía tener eso cuando tenía SCSS en línea, pero solo como nota al margen, esto no es un error, es una advertencia, en la parte superior del archivo. No es necesario analizar SCSS.

Creo que es algo relacionado con este htmlxparser.ts

@dummdidumm Verifiqué ese resultado antes de publicar este error y no vi ningún error reportado por Svelte Beta. Intentaré de nuevo hoy cuando pueda y publicar los registros.

Dado que sucede con scss, estoy muy seguro de que es un problema de node-sass como este.

Soy escéptico de que ese sea el caso, pero investigaré y veré qué encuentro.

De la salida de @Egnus puedo inferir que se encontró el svelte.config.js . Si la configuración no se encuentra pero es necesaria (debido a que lang / type está configurado en script / style ), un mensaje de No svelte.config.js found but one is needed aparecería en el registro.
Tampoco tiene nada que ver con el htmlxparser de svelte2tsx , porque allí no se realiza ningún preprocesamiento. Aquí falla al intentar obtener diagnósticos del compilador esbelto.

Aquí está el registro que obtuve cuando verifiqué la salida de Svelte (rutas anónimas; barras como estaban cuando se mostraban en VS Code):

Initialize language server at c:/PATH/TO/PROJECT/
Initialize new ts service at  
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler

Casi idéntico a la salida de VS Code de Initializing new ts service at . No estoy seguro de que sea importante, pero me llama la atención la alternancia de barras entre los mensajes.

También verifiqué que node-sass fuera compatible con mi versión de Windows y Node.js. node-sass v4.14.1 (la última versión a la fecha) es compatible con mi versión de node, v13.7.

¿Podrías comprobarlo una vez más? Envié una actualización con más registros en esa área y también actualicé un poco el mensaje de error que enfrenta el usuario.

¿Te refieres al compromiso anterior? Si es así, lo había verificado después de que se fusionó la confirmación y había instalado la nueva actualización antes de verificar.

La extensión se publica todas las noches, la última vez hace unas 8 horas, por lo que su registro de hace 14 horas probablemente tenga la versión "antigua".

Ah, ya veo. Recibiré el nuevo registro la próxima vez que pueda.

También lo comprobaré en unas horas o antes.

Mmmm interesante, tenías razón:

Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (/PATH/TO/PROJECT/node_modules/svelte-preprocess/dist/utils.js:1:2844)

Verificaré por qué svelte.config.js no lo está usando y volveré

Ok, entonces parece que svelte-preprocess no encuentra node-sass ni global ni local por VSCode. Mientras que el mismo Rollup Config importa lo siguiente svelte.config.js .

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['x', 'y', 'z'],
    },
    typescript: {
      extensions: ['x', 'y', 'z'],
      includePaths: ['x', 'y', 'z'],
    },
  }),
  // ...other svelte options
};

// The following alternative should make SCSS to work but nothing else will. Why the auto preprocess does not work here?

// import sass from 'node-sass';
// module.exports = {
//   preprocess: {
//     style: async ({ content, attributes }) => {
//       if (attributes.type !== 'text/scss') {
//         return;
//       }

//       const result = await sass.renderSync({
//         data: content,
//         sourceMap: 'style.css.map',
//         omitSourceMapUrl: true,
//       });

//       return {
//         code: result.css.toString('utf8'),
//         map: result.map.toString('utf8'),
//       };
//     },
//   },
// };

¿Podría ser un problema de Svelte Beta? No tengo idea de cómo decir la ruta de node-sass al VSCode en este punto, además de escribir el preproceso yo mismo.

Recibo esto en el maestro y no creo que ni siquiera tenga instalado node-sass en mi computadora. Mecanografiado está funcionando (!!!) Solo hay una advertencia de pelusa bastante molesta.

.
├── home.svelte
├── node_modules
│   ├── <strong i="6">@types</strong>
│   ├── detect-indent
│   ├── min-indent
│   ├── strip-indent
│   └── svelte-preprocess
├── package-lock.json
├── package.json
└── svelte.config.js

home.svelte

<script lang="typescript">
  export let title: string = "10";
</script>

<style>
  h2 {
    background: blue;
  }
</style>

<html lang="en">
  <h2>{parseInt(title, 10)}</h2>
</html>

svelte.config.js

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess(),
}

Feliz de probar algo más para ayudar a reducir esto.

También me gustaría ❤️ eliminar svelte.config.js y tener algunas configuraciones comunes incorporadas. Feliz de abrir un PR para que esto suceda. Editar , _think_ https://github.com/sveltejs/language-tools/pull/87 hice que esto sucediera 👏

mm Tengo curiosidad

¡Ajá! ¡Gracias por la anotación!

De acuerdo, esto expone que solo estaba jugando y aún no lo probé en una aplicación real 😆

Hay dos dependencias implícitas que son obvias en retrospectiva, pero la advertencia lo lleva por mal camino:

1. Error: no se puede encontrar el módulo 'svelte / package.json'
2. Error: [svelte-preprocess] Error al transformar 'mecanografiado'. No se puede encontrar el módulo 'mecanografiado'

Creo que sería genial ofrecer un Typecript alternativo y Svelte para que la gente juegue rápidamente, similar a cómo funciona VSCode con Typescript.

Con respecto a hornear esto, también pensé en esto, pero creo que la comunidad esbelta ya podría estar demasiado acostumbrada a los preprocesadores personalizados. Si tuviéramos todo esto dentro del complemento, esto significaría agregar e instalar dependencias como node-sass, less, babel, .. esto hincha el complemento.

Volviendo al problema específico, hay dos problemas:

1. La resolución del módulo se estropea a veces. Por qué es algo que debe investigarse. También vale la pena señalar que configuraciones como pnp de yarn no funcionan.
2. node-sass es muy sensible a la versión de nodo que se utiliza. Para mí, siempre es suficiente configurar el entorno de ejecución en la configuración beta esbelta para el ejecutable de mi nodo que también es utilizado por el resto de la aplicación. Si no lo hace, se utiliza la versión del nodo de VSCode y es posible que no coincida.

@dummdidumm Lo siento por su opinión, pero personalmente creo que Typecript ha alcanzado un cierto nivel de popularidad en el que merece un soporte de primera clase. La mayoría de las bases de código nuevas están comenzando con Typecript y las antiguas se están actualizando. Esto impide que mucha gente pruebe Svelte: https://news.ycombinator.com/item?id=21376557

Personalmente, me saltaría el soporte de babel de primera clase y vería cuántas personas se quejan: hay tanta variabilidad en la configuración y puede abrir una lata de soporte de gusanos.

Tampoco creo que haya ninguna solución CSS que haya alcanzado un apoyo tan unánime. Además, dado que Svelte ya ofrece una excelente solución CSS de alcance, no creo que sea tan necesario como javascript escrito.

¡Ajá! ¡Gracias por la anotación!

De acuerdo, esto expone que solo estaba jugando y aún no lo probé en una aplicación real 😆

Hay dos dependencias implícitas que son obvias en retrospectiva, pero la advertencia lo lleva por mal camino:

1. Error: Cannot find module 'svelte/package.json'

2. Error: [svelte-preprocess] Error transforming 'typescript'. Cannot find module 'typescript'

Creo que sería genial ofrecer un Typecript alternativo y Svelte para que la gente juegue rápidamente, similar a cómo funciona VSCode con Typescript.

Lo de package.json es interesante, necesito comprobarlo. Debería recurrir a la versión esbelta incorporada del complemento. Aparte de eso, esto funciona hoy ya solo para mecanografiado. Necesita eliminar svelte.config.js por completo. Entonces se usa un respaldo que debería poder manejar el mecanografiado, pero no más. Esto no está documentado porque en este momento hay demasiada fluctuación en esa área.

¡Sí, esto es asombroso! Eliminé svelte.config.js y agregué svelte y typescript dependencias. ¡Funciona a las mil maravillas!

También gracias a @egnus por enseñar a pescar a un hombre.

sí, eliminar svelte.config.js resolvió el problema

@dummdidumm Comprobó y obtuvo el mismo informe de error que Egnus:

Initialize language server at  c:/PATH/TO/PROJECT/
Initialize new ts service at  
Trying to load config for c:/PATH/TO/PROJECT/src/App.svelte
Found config at  c:\PATH\TO\PROJECT\svelte.config.js
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (c:\PATH\TO\PROJECT\node_modules\svelte-preprocess\dist\utils.js:1:2844)

También experimenté con la eliminación del archivo svelte.config.js , pero no funcionó para mi caso. Sin embargo, por lo que entiendo de la discusión, parece que solo estaba destinado a solucionar situaciones en las que solo se estaba utilizando el preprocesador de mecanografiado.

La pregunta que esto plantea es si Svelte está buscando node-sass o sass para estar en la ruta del sistema en lugar de node_modules ? Si bien tengo node-sass instalado localmente para el proyecto, no lo tengo instalado globalmente.

El error "No se puede encontrar ninguno de los módulos: ..." puede aparecer cuando no se encuentra el paquete, porque la resolución del módulo no lo encontró, o porque lo encontró pero las versiones del nodo no coincidían y node-sass arroja un error. svelte-preprocess traga ambos errores y simplemente emite "No se puede encontrar ninguno de los módulos: ..."

Intenté esto y el problema con el que me encuentro se puede solucionar configurando svelte.language-server.runtime como sugirió @dummdidumm .
@JoeBobMiles puede intentar requerir node-sass en un archivo js y ejecutar el archivo con el nodo para ver si hay algún error.

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles durante este montón de pruebas, no solo eliminé svelte.config.js sino que también instalé sass como DevDependency (solo tenía node-sass), e instalé node-sass globalmente.

Con esto ya hecho antes, sin éxito, cuando eliminé el archivo JS, Svelte Beta funcionó, pero realmente no sé cuál de estos otros detalles lo he afectado y no puedo probarlo en este momento.
Háganos saber si alguno de estos cambios adicionales podría resolver el problema. Además, reinicie las herramientas de lenguaje y la ventana vscode con cada intento.

@ jasonlyu123 Gracias por el consejo. Usando su fragmento de código, no recibí ningún error, así que supongo que node-sass está funcionando. (Aunque al escribir esto me di cuenta de que, dado que Webpack se compilaba sin problemas, esa verificación puede haber sido redundante).

Sin embargo, parece que node-sass fue el problema. Después de instalar sass (y solo instalar sass ), Svelte Beta dejó de informar advertencias. Eliminé node-sass de mi proyecto y las advertencias no volvieron a aparecer. Parece que Svelte Beta solo estaba buscando sass lugar de sass o node-sass .

Además, jugué cambiando el lang de scss a sass y noté un comportamiento extraño con la pelusa. Si bien Svelte Beta ya no se queja, al linter CSS de VS Code parece no gustarle ver la sintaxis Sass basada en sangría dentro de una etiqueta de estilo:

Aunque creo que es más un problema de VS Code que un problema de Svelte Beta.

Lamentablemente, SASS no es compatible a partir de ahora. Usamos https://github.com/microsoft/vscode-css-languageservice/tree/master/src para el linting, etc. y esa biblioteca no es compatible con SASS.

Aunque sus errores parecen corregidos mediante soluciones alternativas, aún quiero dejar esto abierto en caso de que alguien más se encuentre con este problema, y ​​también para llegar al fondo de este problema.

Un poco de retroalimentación sobre el tema. Encontré el mismo problema y lo resolví configurando "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" .

Creo que esto se debe a que el tiempo de ejecución de nodo predeterminado en la extensión de vscode Code Helper (Renderer) es una creación electrónica personalizada, que tiene problemas para resolver bibliotecas nativas como node-sass.

ps aux salida:

/Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Renderer).app/Contents/MacOS/Code Helper (Renderer) --inspect=6009 /Users/username/.vscode/extensions/svelte.svelte-vscode-99.0.39/node_modules/svelte-language-server/bin/server.js --node-ipc --clientProcessId=72991

Necesito documentar esto en alguna parte. O mejor, de forma predeterminada, intente ubicar un binario de nodo normal para el usuario dentro de la extensión como exec('/usr/bin/env which node') (aunque no estoy seguro de cómo hacer lo mismo en Windows).

Está documentado y la advertencia en el IDE también lo insinúa.

Las advertencias serán mejores en la próxima versión de prod, ya se pueden probar todas las noches. Espero que esto reduzca el problema en el futuro. Dado que este problema ya tiene demasiadas cosas sucediendo en paralelo de las cuales la mayoría, si no todas, se resuelven, voy a cerrar esto. Si ocurre un problema relacionado con SCSS, abra un nuevo problema.