使用yarn时query-string包报错：Cannot use import statement outside a module

问题根源 #

query-string从v8版本开始默认发布为ES模块（ESM），如果你的项目环境未配置为支持ES模块，或者仍在使用CommonJS（CJS）规范的环境，就会触发这个导入报错。重装包（不管用yarn还是npm）解决不了问题——因为你装的都是同版本的ES模块包，核心问题是环境兼容性，而非包本身的安装问题。

具体解决办法 #

1. 配置项目支持ES模块 #

如果是Node.js或自定义构建的项目：

• 在项目根目录的package.json中添加"type": "module"字段：

  {
    "type": "module"
  }
  

  注意：添加后项目里的CommonJS语法（比如require()）会失效，需要统一改成ES模块的import/export。

如果是Webpack构建的项目：

• 在webpack.config.js中确保resolve配置包含.mjs扩展名，同时把js文件的loader配置为支持ES模块：

  module.exports = {
    resolve: {
      extensions: ['.mjs', '.js', '.jsx', '.json']
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  };
  

2. 降级到兼容CommonJS的query-string版本 #

如果不想调整项目模块配置，可以直接安装v7.x版本的query-string（该版本仍为CommonJS规范）：

# npm
npm install query-string@7

# yarn
yarn add query-string@7

安装后原有的导入代码可以正常使用，无需修改。

3. 确认React项目的构建环境 #

如果你用的是Create React App（CRA），默认已经支持ES模块，出现这个报错大概率是安装的query-string版本与CRA的依赖版本不兼容，尝试清除缓存后重装：

# 清除npm缓存
npm cache clean --force

# 删除node_modules和lock文件
rm -rf node_modules package-lock.json

# 重装依赖
npm install

内容的提问来源于stack exchange，提问作者Ooi Teng Hao