reactjs - Webpack forskelle i standardeksport mellem Typescript og Javascript

Jeg har en React-applikation med en side, der importerer en komponent fra en anden fil.

// code from IconPage.tsx

import {AccountBalanceIcon} from './icons';

<AccountBalanceIcon />

// Code from ./icons.ts
export { default as AccountBalanceIcon } from "@material-ui/icons/AccountBalance";

Dette fungerer fint, når den eksporterende fil er en typescript (.ts) fil, men når jeg omdøber filen til .js, får jeg en markant anderledes adfærd.

// Code from ./icons.js
export { default as AccountBalanceIcon } from "@material-ui/icons/AccountBalance";

Dette fejl under Webpacks byggeproces

Module not found: Error: Can't resolve '@material-ui/icons/AccountBalance' in '.../src/pages'
Did you mean 'AccountBalance.js'?
BREAKING CHANGE: The request '@material-ui/icons/AccountBalance' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Ja, jeg bruger "type": "module" i min package.json, så jeg refaktorere koden, så den kompilere ved at tilføje .js-udvidelsen.

// Code from ./icons.js
export { default as AccountBalanceIcon } from "@material-ui/icons/AccountBalance.js";

Når dette er gjort, bygger webpack, men jeg får den velkendte React-fejl i browserkonsollen, når du roder med din import-sætning.

react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `IconPage`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
    at createFiberFromElement (react-dom.development.js:25086:1)
    at createChild (react-dom.development.js:13446:1)

At omdøbe filen tilbage til .ts (og endda beholde AccountBalance.js på plads), løser runtime-fejlen.

Analyse

Årsagen til uoverensstemmelsen vises i bygge-koden.

Som en JavaScript-kildefil er den resulterende kode, som webpack producerer, som følger.

    __webpack_require__.d(__webpack_exports__, {
        "AccountBalanceIcon": () =>
            (_material_ui_icons_AccountBalance_js__WEBPACK_IMPORTED_MODULE_0__)
    });

Og typescript-udgangen ser sådan ud.

    __webpack_require__.d(__webpack_exports__, {
        "AccountBalanceIcon": () =>
           (_material_ui_icons_AccountBalance_js__WEBPACK_IMPORTED_MODULE_0__["default"])
    });

Bemærk, at TypeScript-kilden henviser til den importerede modules .default-egenskab, mens JavaScript-kildekoden henviser til selve modulet.

tsc --showConfig

{
    "compilerOptions": {
        "target": "es2017",
        "jsx": "react",
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "allowJs": true,
        "outDir": "./dist",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./test/**/*"
    ]
}

webpack.config.js

import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

const pathResolve = (path) => new URL(path, import.meta.url).pathname;

export default {
  mode: process.env.NODE_ENV === "production" ? "production" : "development",
  devtool: "inline-source-map",
  entry: "./src/index.tsx",
  output: {
    path: pathResolve("dist"),
    filename: "bundle.js",
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000,
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, exclude: /node_modules/, loader: "ts-loader"},
      { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
      { test: /\.css$/, use: ['style-loader', 'css-loader']},
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: pathResolve("./public/index.html"),
      filename: "index.html"
    }),
    new MiniCssExtractPlugin({filename: "app.css"}),
  ],
  ignoreWarnings: [/Failed to parse source map/],
};

Jeg forventer, at mit problem faktisk er relateret til en af disse konfigurationsfiler.

Spørgsmål

Hvordan kan jeg få JavaScript-filen til at eksportere Material-UI-komponenten rent, så JS- og TS-projekter kan bruge eksporten?

Jeg spørger, fordi filen icons.ts i dette eksempel faktisk er en forenkling for at vise problemet. Koden til ikonerne er en del af et større komponentbibliotek, som pakkes og distribueres som transpilerede JS-filer.

Svar #1

i stedet for dette:

export { default as AccountBalanceIcon } from "@material-ui/icons/AccountBalance";

prøv :

export { AccountBalance as AccountBalanceIcon } from "@material-ui/icons";

Relaterede artikler