webpack编译报错：'URLSearchParams'在'url'模块中未找到

核心原因 #

startStandaloneServer 内部依赖 Node.js 内置的 url 模块，但 Webpack 在打包时（尤其是目标环境为浏览器或未正确配置 Node 环境时）无法自动解析该模块的 URLSearchParams，导致编译报错。以下是针对性的解决方案：

方案1：修正 Webpack 配置，添加 Node 模块 Polyfill #

首先安装所需的 polyfill 包：

npm install url util querystring-es3 --save-dev

然后修改 webpack.config.js，补充 resolve.fallback 和全局提供插件：

const webpack = require('webpack');

module.exports = {
  // 其他现有配置...
  resolve: {
    fallback: {
      url: require.resolve('url/'),
      util: require.resolve('util/'),
      querystring: require.resolve('querystring-es3'),
    },
  },
  plugins: [
    // 全局注入 URLSearchParams 和 URL，确保依赖能找到
    new webpack.ProvidePlugin({
      URLSearchParams: ['url', 'URLSearchParams'],
      URL: ['url', 'URL'],
    }),
  ],
};

方案2：将 Webpack Target 设置为 Node #

如果你的服务是运行在 Node.js 环境（而非浏览器），直接将 Webpack 的编译目标设为 Node，让它自动识别内置模块：

module.exports = {
  target: 'node', // 关键配置
  // 其他现有配置...
};

此配置下 Webpack 不会尝试打包 Node.js 内置模块，直接运行时使用环境中的模块，从根源避免问题。

方案3：替换 startStandaloneServer 为 Express 手动启动 #

放弃使用 startStandaloneServer，改用 Express 手动搭建服务，绕开它带来的依赖问题：

import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';

async function bootstrap() {
  const app = express();
  const apolloServer = new ApolloServer({
    typeDefs: /* 你的 GraphQL 类型定义 */,
    resolvers: /* 你的解析器逻辑 */,
  });

  await apolloServer.start();

  // 挂载 GraphQL 中间件
  app.use(
    '/graphql',
    cors(),
    bodyParser.json(),
    expressMiddleware(apolloServer),
  );

  app.listen(4000, () => {
    console.log('🚀 GraphQL 服务运行在 http://localhost:4000/graphql');
  });
}

bootstrap();

需要额外安装依赖：npm install express cors body-parser --save

方案4：将 Node 内置模块设为 Webpack Externals #

告诉 Webpack 不要打包 url 这类 Node 内置模块，运行时直接使用环境提供的版本：

module.exports = {
  externals: {
    url: 'url',
    // 可添加其他需要排除的内置模块，如 'http' 'https' 等
  },
  // 其他现有配置...
};

内容的提问来源于stack exchange，提问作者C. Carley