web-dev-qa-db-ja.com

インポート取得という名前のWebstormES6はシンボルエラーを解決できません

ES6という名前のインポート宣言を使用すると、Webstormでエラーが発生します。

import { nodes } from 'utils/dom';

「ノード」で「シンボルを解決できません」というエラーが発生します

また、次のように名前付きエクスポートとしてエクスポートしようとすると、次のようになります。

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

私もエラーが発生します。私はeslintをbabel-eslintパーサーと一緒に使用します。これはSublimeText 3では魅力として機能しますが、何らかの理由でWebstormでのエラーチェックに失敗します。

これは、Eslintwebstorm以外が他のコードチェックを行っているためだと思います。

それを抑制し、babel-eslintパーサーでeslintのみを使用する方法はありますか？

アドバイスをいただければ幸いです

javascriptfrontendwebstormecmascript-6babeljs
17
Vladimir Novick

「ノード」で「シンボルを解決できません」というエラーが発生します

utils/dom標準Nodeコードは、「 'utils'というモジュール内でdom.jsを検索する」ことを意味します。webpackのmoduleDirectoriesプロパティを使用してこの動作をオーバーライドしましたが、WebStormはオーバーライドしません。それが何であるかを知っています。WebStormが適切に解決するためにutils/dom、webstormプロジェクト構成のライブラリとしてutilsフォルダーを追加する必要があります。

export構文が正しくありません。 ES6のインポート/エクスポート構文はオブジェクトとは100％無関係であり、エクスポートの例では、オブジェクト構文を使用しています。 import { nodes }はnodesという名前のエクスポートを要求しています。あなたが持っているエクスポートを書くことができる複数の方法があります：

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

または、複数行が好きな場合は折りたたむこともできますvar/let/const

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

あるいは

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


export {write, node, nodes};
10
loganfsmyth

これが直接関連しているかどうかはわかりませんが、Webstormでインポートを解決する方法を知るには、Preferences > Directoriesに移動して設定することもできます。フォルダをResource Rootとして（またはフォルダを右/コンテキストクリックしてそのように設定します）

これは、たとえば、プロジェクト構造が次のような特定のサブディレクトリを解決するようにWebpackを構成した場合に実行する必要がある場合があります。

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

この場合、Webstormは、App.jsへのインポートが次のようになることを期待します。

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

一方、Webpackでは、解決するモジュールとしてsrcを追加した場合、次のことができますが、Webstormでは実行できません。現在理解しているので、リソースルートとして追加すると問題が解決します

import Header from 'components/header/Header'

参照： Webstormでのインポートのパスエイリアス

5
a darren