webpack-dev-server：'URLSearchParams‘(导入为'URLSearchParams')在'url’中找不到。

Question

webpack-serve命令不会编译，因为它不停地说：“URLSearchParams”(导入为“URLSearchParams”)没有出现在“url”中。

我正在使用阿波罗服务器来使用GraphQL。

我做了以下工作：

• 尝试将UrlSearchParams和url添加到webpack.config回退。
• 已安装@type/节点
• 已安装@type/graphql
• 使用TypeScript根据阿波罗文档设置巴黎世阿波罗服务器

webpack将在我删除以下内容时进行编译：

const {url} = await startStandaloneServer(server,{
listen: {port: 55005}})

我所拥有的文件如下：

tsconfig

{
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2020"],
    "target": "es2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"],
  
  },
  "files": ["src/server.ts"]
}

package.json

{
    "name": "cooker-rogue",
    "type": "module",
    "scripts": {
        "start": "npm run compile && node ./dist/server.js",
        "compile": "tsc"
    },
    "dependencies": {
        "@apollo/client": "^3.7.1",
        "@apollo/server": "^4.1.1",
        "crypto-browserify": "^3.12.0",
        "ejs": "^3.1.8",
        "express": "^4.18.2",
        "graphql": "^16.6.0",
        "gzip": "^0.1.0",
        "https-browserify": "^1.0.0",
        "install": "^0.13.0",
        "node-fetch-cache": "^3.0.5",
        "os-browserify": "^0.3.0",
        "path-browserify": "^1.0.1",
        "postgres": "^3.3.2",
        "stream-browserify": "^3.0.0",
        "stream-http": "^3.2.0",
        "ts-node": "^10.9.1",
        "typeorm": "^0.3.10",
        "url": "^0.11.0",
        "util": "^0.12.5",
        "vue": "^3.2.45",
        "vue-apollo": "^3.1.0",
        "vue-router": "^4.1.6",
        "zlib": "^1.0.5"
    },
    "devDependencies": {
        "@types/graphql": "^14.5.0",
        "@types/node": "^18.11.9",
        "@webpack-cli/generators": "^3.0.0",
        "css-loader": "^6.7.2",
        "prettier": "^2.7.1",
        "style-loader": "^3.3.1",
        "ts-loader": "^9.4.1",
        "typescript": "^4.9.3",
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.0",
        "webpack-dev-server": "^4.11.1"
    }
}

webpack.config

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = "style-loader";

const config = {
  entry: "./src/index.ts",
  experiments:{
    topLevelAwait:true,
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts",".jsx", ".js", "..."],
    fallback:{
      
      "util": require.resolve("util/"),
      "http": require.resolve("stream-http"),
      "os": require.resolve("os-browserify/browser"),
      "https": require.resolve("https-browserify"),
      "path": require.resolve("path-browserify"),
      "stream": require.resolve("stream-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      async_hooks: false,
      './zlib_bindings':false,
      fs:false,
      net:false,
      'URLSearchParams':false,
      'url':false,
      URLSearchParams:false,
      url:false,
    },
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
  }
  return config;
};

index.ts

import { ApolloServer } from "@apollo/server";
import {startStandaloneServer} from "@apollo/server/standalone";
import { URLSearchParams } from "url";


const typeDefs = `
    type Book{
        title:String,
        author:String,
    }

    type Query{
        books:[Book]
    }
`
//use this instead of db for now!
const books = [
    {
      title: 'The Awakening',
      author: 'Kate Chopin',
    },
    {
      title: 'City of Glass',
      author: 'Paul Auster',
    },
  ];


export const resolvers = {
    Query: {
        books: () => books,
    }
}





const server = new ApolloServer(
    {
        typeDefs,
        resolvers,
    }
)

const {url} = await startStandaloneServer(server,{
    listen: {port: 55005}
})


console.log(`Apollo server launched on  ${url}`);

最后，我得到以下错误堆栈：

WARNING in ./src/index.ts 34:4-19
export 'URLSearchParams' (imported as 'URLSearchParams') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)   

ERROR in ./node_modules/@apollo/server/dist/esm/runHttpQuery.js 95:37-52
export 'URLSearchParams' (imported as 'URLSearchParams') was not found in 'url' (possible exports: Url, format, parse, resolve, resolveObject)   
 @ ./node_modules/@apollo/server/dist/esm/ApolloServer.js 17:0-76 517:24-43 565:51-69
 @ ./node_modules/@apollo/server/dist/esm/index.js 1:0-49 1:0-49
 @ ./src/index.ts 1:0-46 31:19-31

webpack 5.75.0 compiled with 1 error and 1 warning in 5127 ms

任何帮助都将不胜感激。

Answer 1

您正在导入url包，但它不导出URLSearchParams。你甚至不用afaict这个函数。

移除线：

import { URLSearchParams } from "url";