webstorm SyntaxError: Cannot use import statement outside a module

这个错误通常是因为你的 JavaScript 文件被当做 CommonJS 模块来处理，而 import 语句却是 ES6 模块中的语法。可以通过在项目根目录下创建一个名为 `.babelrc` 的文件，并添加以下配置来解决这个问题：

{
  "presets": ["@babel/preset-env"]
}

另外，你可以在 WebStorm 中启用对 ES6 模块语法的支持，方法是：打开 `Preferences/Settings → Languages and Frameworks → JavaScript`，将 `JavaScript language version` 的选项设置为 `ECMAScript 6`。

相关问题

webstorm 运行后SyntaxError: Cannot use import statement outside a module

这个错误发生的原因是，代码使用了 ES6 的 `import` 语法，但是 Node.js 不支持 ES6 的模块系统。解决办法是将代码转换成 CommonJS 或者使用 Babel 等工具进行代码转换。

可以在 package.json 中添加以下配置来解决该问题：

{
  "type": "module"
}

这样告诉 Node.js，我们使用的是 ES6 模块系统，Node.js 将会支持 ES6 的 import/export 语法。

怎么解决WebStorm报错：Cannot use import statement outside a module

WebStorm报错`Cannot use import statement outside a module`是因为当前文件被视为普通的脚本文件，而不是ES模块。要解决这个问题，你可以按照以下步骤进行操作：

1. 确保当前文件是一个ES模块。检查文件扩展名是否为.js，并确保在文件中使用了`import`语句来导入其他模块。

2. 将当前文件标记为ES模块。在WebStorm中，右键单击当前文件，选择"Mark as"（标记为）选项，然后选择"ECMAScript 6 module"（ECMAScript 6模块）。

3. 确保项目配置正确。在WebStorm的设置中，找到"Languages & Frameworks"（语言和框架）> "JavaScript"（JavaScript）> "JavaScript language version"（JavaScript语言版本），确保选择的是支持ES模块语法的版本，如ECMAScript 6或更高版本。

4. 确保你的项目已经启用了模块化。在项目的根目录下，确保存在一个`package.json`文件，并且其中的`type`字段被设置为`module`。如果没有`package.json`文件，可以手动创建一个，并添加相应的配置。

5. 确保你的代码在支持ES模块的环境中运行。如果你正在使用的是旧版的Node.js或浏览器，可能需要更新到支持ES模块的版本。

通过以上步骤，你应该能够解决WebStorm报错`Cannot use import statement outside a module`。如果问题仍然存在，请检查你的代码是否符合ES模块的语法规范，并确保相关的依赖模块已正确安装。