javascript - react - Webstorm ES6 con nombre de importación que no puede resolver error de símbolo

jshint react

Question

Tengo un error en Webstorm cuando uso la declaración de importación denominada ES6:

import { nodes } from ''utils/dom'';

Recibo el error "no se puede resolver el símbolo" en "nodos"

También cuando trato de exportar como nombre exportar así:

export {
  write: document.write.bind(document),
  node: document.querySelector.bind(document),
  nodes: document.querySelectorAll.bind(document)
};

También me dan errores. Uso eslint con el analizador babel-eslint. La cosa es que esto funciona en Sublime Text 3 como un encanto, pero por alguna razón falla la comprobación de errores en Webstorm.

Supongo que esto se debe a que, excepto Esstint webstorm, está haciendo otra comprobación de código.

¿Alguna idea de cómo puedo suprimir eso y usar solo eslint con el analizador babel-eslint?

Cualquier consejo será apreciado

Answer 1

Recibo el error "no se puede resolver el símbolo" en "nodos"

es porque utils/dom en el código estándar de nodo significa "encontrar dom.js dentro de un módulo llamado ''utils''. Usted ha anulado este comportamiento usando la propiedad moduleDirectories de moduleDirectories , pero WebStorm no sabe qué es eso. Para que WebStorm resuelva los utils/dom correctamente utils/dom , deberá agregar la carpeta utils como una biblioteca en la configuración del proyecto de su tormenta web.

Su sintaxis de export es incorrecta. La sintaxis de importación / exportación de ES6 es 100% no relacionada con los objetos, y en su ejemplo de exportación, está usando la sintaxis de objetos. import { nodes } está solicitando una exportación llamada nodes . Hay varias formas de escribir las exportaciones que tiene:

export const write = document.write.bind(document);
export const node = document.querySelector.bind(document);
export const nodes = document.querySelectorAll.bind(document);

o alternativamente, podría colapsarlos si desea multilínea var/let/const

export const write = document.write.bind(document),
    node = document.querySelector.bind(document),
    nodes = document.querySelectorAll.bind(document);

o incluso

const write = document.write.bind(document);
const node = document.querySelector.bind(document);
const nodes = document.querySelectorAll.bind(document);


export {write, node, nodes};

Answer 2

Es difícil decir si esto está directamente relacionado, pero para que Webstorm sepa cómo resolver sus importaciones, también puede ir a Preferences > Directories y configurar carpetas como Resource Root (o haga clic con el botón derecho / contextual en una carpeta y configurarlo de esa manera)

Es posible que esto deba hacerse, por ejemplo, cuando ha configurado Webpack para resolver ciertos subdirectorios, donde la estructura de su proyecto puede ser:

/
  /docs
  /src
    /containers
      /app
        App.js
    /components
      /header
        Header.js

En cuyo caso, Webstorm esperaría que una importación en App.js pareciera a la siguiente:

import Header from ''../../../components/header/Header''

Mientras que con Webpack, si ha agregado src como un módulo para resolver, puede hacer lo siguiente, que Webstorm no entiende actualmente, por lo tanto, agregarlo como una raíz de recursos resuelve el problema

import Header from ''components/header/Header''

Referencia: alias de ruta para importaciones en Webstorm