摘要-提取和webpack -提取不是一个函数。

Question

问题

TypeError: fetch is not a function
    at DigestClient.fetch (webpack-internal:///./node_modules/digest-fetch/digest-fetch-src.js:48:24)
    at User.create (webpack-internal:///./node_modules/mongodb-atlas-api-client/src/user.js:53:26)
    at Function.createOrgDBUser (webpack-internal:///./src/OrgUtils.ts:87:51)
    at Function.createOrg (webpack-internal:///./src/apis/OrgAPI.ts:373:39)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async APIResponse.processHandlerFunction (webpack-internal:///./node_modules/apilove/lib/APIResponse.ts:27:31)

这就是我试图使用mongodb-atlas-api-client@2.3.1为集合创建索引时遇到的错误。我在本地和都看到了这个错误。

atlasClient.user.create({...})

我使用webpack来捆绑我的api，所以我认为问题在于我是如何捆绑的，但是在我的研究中，我还没有想出一个解决方案。

digest-fetch由mongodb-atlas-api-client使用，在没有本机fetch函数的情况下使用node-fetch。然而，我相信我的webpack配置和digest-fetch导入库的方式是导致这个问题的原因。

下面的代码行来自node-modules/digest-fetch/digest-fetch-src.js:8

if (typeof(fetch) !== 'function' && canRequire) var fetch = require('node-fetch')

如果我把它改到下面，一切都很好。换句话说，它是在导入模块，而不是从node-fetch导出的主要获取函数。

if (typeof(fetch) !== 'function' && canRequire) var fetch = require('node-fetch').default

node-fetch/package.json描述了三个入口点。

"main": "lib/index.js",
"browser": "./browser.js",
"module": "lib/index.mjs",

我认为正在发生的事情是，我的webpack配置告诉webpack使用.mjs模块入口点从node-fetch构建它的输出，后者实现了export default fetch;。

我的webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const NodemonPlugin = require('nodemon-webpack-plugin')
const ZipPlugin = require('zip-webpack-plugin')

module.exports = (env, argv) => {
  const config = {
    target: 'node',
    watchOptions: {
      ignored: ['node_modules', '*.js', '*.js.map', '*.d.ts'],
    },
    entry: './src/APIHandler.ts',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: `APIHandler.js`,
      libraryTarget: 'commonjs',
    },
    optimization: {
      minimize: false,
      // minimizer: [new TerserPlugin({})],
    },
    resolve: {
      extensions: ['.ts', '.json', '.mjs', '.js'],
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              allowTsInNodeModules: true,
            },
          },
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new CopyPlugin([
        { from: path.join(__dirname, 'src/certs'), to: path.resolve(__dirname, 'dist', 'certs') },
      ]),
      new NodemonPlugin(),
    ],
  }

  // eslint-disable-next-line no-console
  console.log({ mode: argv.mode })

  if (argv.mode === 'development') {
    config.devtool = 'eval-cheap-module-source-map'
  }

  if (argv.mode === 'production') {
    config.plugins.push(
      new ZipPlugin({
        filename: 'handler',
      })
    )
  }

  return config
}

FWIW，这是当前安装在我的node_modules中的每个库的版本。我在本地使用node v12.22.7。

"digest-fetch": "1.2.1",
"mongodb-atlas-api-client": "2.31.0",
"node-fetch": "2.6.7",
"webpack": "4.46.0"

问题

我遗漏了什么？我需要对我的webpack.config.js做什么更改才能正确地解决从node-fetch导出的主模块的需求

注意到：在我的研究中，我发现其他人也有这个问题，但是没有解决办法对我有帮助。

Answer 1

解决办法很简单。我将mainFields添加到webpack配置的resolve属性中。

resolve: {
  extensions: ['.ts', '.json', '.mjs', '.js'],
  mainFields: ['main', 'module'],
}

这告诉webpack首先使用模块的main属性的package.json，如果找不到它，则返回到module属性。

有关更多信息，请参见webpack文献。