WEBPACK_IMPORTED_MODULE_13___default(...) 不是函数 [英] WEBPACK_IMPORTED_MODULE_13___default(...) is not a function

问题描述

上下文:我正在使用 TypeScript 和 Webpack 构建一个小型库(这里我们称之为 myLibrary).我构建了它，将它导入到反应应用程序中，但反应应用程序崩溃了.

Context : I am building a small library (let's call it myLibrary here) using TypeScript and Webpack. I built it, imported it in a react application but the react application crash.

图书馆方面

我的主要入口点 (index.ts) 具有这样的默认导出:

My main entry point (index.ts) has a default export as such :

import wrapper from "./wrapper";

export default wrapper;

我的包装文件公开了一个默认导出，它是一个函数 (wrapper.ts) :

And my wrapper file exposes a default export which is a function (wrapper.ts) :

const create = () => {
  // Some functions
  return {
    init,
    close,
    getBase,
    setBase
  }
}
export default create;

库轻松通过所有单元测试.

The library pass all the unit tests easily.

React 应用端

在 React 应用程序中构建和导入我的库后，我没有 Typescript 错误，但我的 React 应用程序崩溃并显示以下消息:

After building and when importing my library in a React application, I have no Typescript error but my React app crashes with the following message :

TypeError: myLibrary__WEBPACK_IMPORTED_MODULE_13___default(...) is not a function

在这样调用我的库之后:

After calling my library like that :

import createAPI from "myLibrary";
const api = createAPI(); // Crash here even though I should have a nice object containing my functions

这真的很奇怪，因为 TS 真的很好地编译为 JS，没有任何警告.

It's really strange as TS really compiled nicely to JS without any warnings.

我使用命令webpack --config webpack.config.js 构建的库 wepback 配置 (4.43.0):

My library wepback config (4.43.0) which I use to build with command webpack --config webpack.config.js:

const path = require('path');

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
}

我的库 TS 配置 (3.7.3) :

My library TS config (3.7.3) :

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es5",
    "module": "CommonJS",
    "lib": ["dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "preserve",
    "declaration": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true
  },
  "include": ["src"]
}

任何帮助将不胜感激:)

Any help would be greatly appreciated :)

将默认导出更新为命名导出后:

EDIT : After updating default export to named export :

import { createAPI } from "myLibrary";
const api = createAPI();

我遇到了一个新错误

TypeError: Object(...) is not a function

当我尝试 console.log(typeof createAPI); 我得到一个未定义的，这应该是不可能的，因为我的测试正在通过并且 TS 没有抱怨.

And when I try to console.log(typeof createAPI); I got an undefined, which should not be possible as my tests are passing and TS doesn't complain.

推荐答案

在你的库的 webpack 配置中指出库名 &它的模块类型:

In your webpack config of the library to point out library name & its module type:

output: {
  path: './dist',
  filename: 'index.js',
  library: 'scorm-wrapper',
  libraryTarget: 'umd'
},

这篇关于WEBPACK_IMPORTED_MODULE_13___default(...) 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！