Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@ROYH

【ECMAScript】importでSyntaxError

ECMAScriptの記法を学習していたところ、外部モジュールのimportで詰まったので解決策を残しておきます。

実行環境

  • Node.js : v12.12.0
  • IDE: WebStorm(2019.3.1)

ディレクトリ / ファイル

index.jsからadd.jsで定義した関数を使うだけの簡単なものです。

.
├── add.js
└── index.js
index.js
import { add } from "./add.js";

console.log(add(10, 15));
add.js
export function add(a, b){
    return a + b;
}

なぜかimportの箇所SyntaxErrorとなる

実行時、エラーが出力されたので調べてみたところ、以下の対応が必要とのこと。

  • 実行時オプションに --experimental-modules を指定する
  • ファイル拡張子を変更する(js -> mjs) or package.json を作成する

今回は拡張子は変えず package.json ファイルを作成して対応。

(node:13761) ExperimentalWarning: The ESM module loader is experimental.
(node:13761) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
import { add } from "./add";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:892:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

エラー対応後

.
├── add.js
├── index.js
└── package.json
package.json
{
  "type": "module"
}

Node parameters--experimental-modules を追加
webstorm.png

実行してみる

正常に実行できたようです。

/Users/xxxxx/.nodebrew/current/bin/node --experimental-modules /Users/xxxxx/WebstormProjects/untitled/index.js
(node:13854) ExperimentalWarning: The ESM module loader is experimental.
25

Process finished with exit code 0

参考

[Node.js の ESModules]
http://var.blog.jp/archives/80335431.html

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
19
Help us understand the problem. What is going on with this article?