WebStorm配置ES6语言版本后import/export报错，require可正常使用

嘿，我刚上手WebStorm的时候也碰到过一模一样的问题！别慌，这大概率不是你设置的ES6语言版本出了问题，而是模块系统的配置或者项目的模块类型没匹配上，给你几个实用的排查和解决步骤：

• 检查package.json的模块类型配置
  Node.js默认会把.js文件当作CommonJS模块处理，这时候用import/export就会报错，而require能正常运行。如果你的项目要使用ES模块，需要在项目根目录的package.json里添加"type": "module"字段：

  {
    "name": "your-project-name",
    "type": "module",
    // 其他项目配置...
  }
  

  要是你不想全局设置成ES模块，也可以把需要用import的文件后缀改成.mjs，WebStorm和Node.js都会自动识别它为ES模块。

• 确认WebStorm的模块系统设置
  虽然你已经配置了ES6语言版本，但还要检查模块系统的选项：

  1. 打开设置：Windows/Linux点File > Settings，Mac点WebStorm > Settings
  2. 找到Languages & Frameworks > JavaScript
  3. 在Module system下拉菜单里选择ES modules（不要选CommonJS）
  4. 点击Apply后重启WebStorm

• 确保文件被正确识别为JavaScript类型
  有时候WebStorm会把.js文件误标记为Plain Text或者其他类型，导致语法检查出错。右键目标文件，选择Mark as JavaScript，让IDE正确识别文件类型。

• 验证Node.js版本兼容性
  ES模块的稳定支持从Node.js 14.13.0或12.20.0开始，如果你的Node.js版本太低，升级到较新的LTS版本就能解决兼容性问题。

按照这几步操作下来，应该就能顺利使用import/export了，我当时就是加了package.json的type字段就搞定了😉

内容的提问来源于stack exchange，提问作者devashish-patel