javascript - WEBPACK_IMPORTED_MODULE_13___default(...) er ikke en funksjon

Kontekst: Jeg bygger et lite bibliotek (la oss kalle det myLibrary her) ved hjelp av TypeScript og Webpack. Jeg bygde det, importerte det i en React-applikasjon, men React-applikasjonen krasjet.

Biblioteksiden

Mitt hovedinngangspunkt (index.ts) har en standardeksport som følger :

import wrapper from "./wrapper";

export default wrapper;

Og min wrapper-fil eksponerer en standardeksport som er en funksjon (wrapper.ts) :

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

Biblioteket består alle enhetstestene enkelt.

React-applikasjonsside

Etter å ha bygget og når jeg importerer biblioteket mitt i en React-applikasjon, får jeg ingen Typescript-feil, men React-appen min krasjer med følgende melding:

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

Etter å ha kalt biblioteket mitt slik :

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

Det er virkelig merkelig siden TS virkelig kompilerte fint til JS uten noen advarsler.

Mitt bibliotek webpack-konfigurasjon (4.43.0) som jeg bruker til å bygge med kommandoen 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" }
    ]
  }
}

Min bibliotek TS-konfigurasjon (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"]
}

All hjelp ville vært veldig mye verdsatt :)

REDIGER : Etter å ha oppdatert standardeksport til navngitt eksport :

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

Jeg fikk en ny feil

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

Og når jeg prøver å console.log(typeof createAPI); får jeg undefined, noe som ikke burde være mulig ettersom testene mine går gjennom og TS ikke klager.

Svar #1

I din webpack-konfigurasjon av biblioteket for å peke ut biblioteknavn og dets modultype:

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

Svar #2

Hvis du oppdaterte webpack til versjon 5.x.x, kan problemet være relatert til en feil i output.library-innstillingen

så hvis du har bibliotekinnstilling i webpack-utdata, prøv å fjerne den:

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'painterro.commonjs2.js',
  library: 'Painterro',  // ⏪ this is the issue
  libraryTarget: 'commonjs2',
 },

Les mer i utgaven Fix _webpack_imported_module er ikke en funksjon for webpack5

Relaterte artikler