Vyhledávání na webu

reactjs - Rozdíly ve výchozím exportu mezi Typescriptem a Javascriptu ve Webpacku

Mám aplikaci v Reactu s stránkou, která importuje komponentu z jiného souboru.

// code from IconPage.tsx

import {AccountBalanceIcon} from './icons';

<AccountBalanceIcon />

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

Tohle funguje dobře, když je exportovaný soubor souborem TypeScript (.ts), avšak když přejmenuji soubor na .js, dostanu výrazně odlišné chování.

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

Tato chyba během kroku sestavení webpacku

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.

Ano, používám "type": "module" ve svém package.json, takže jsem přepracoval kód, aby se kompiloval, přidáním přípony .js.

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

Jakmile je toto hotovo, webpack se sestaví, ale v konzoli prohlížeče dostanu známou chybu Reactu, když pokazíte svůj import.

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)

Přejmenování souboru zpět na .ts (a dokonce i ponechání AccountBalance.js na místě) problém s běhovou chybou řeší.

Analýza

Důvod nesouladu je uveden v kódu sestavení.

Jako soubor zdrojového kódu JavaScript je výsledný kód, který webpack produkuje, následující.

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

A výstup TypeScriptu vypadá takto.

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

Poznamenejte, že zdrojový kód v TypeScriptu odkazuje na vlastnost .default importovaného modulu, zatímco zdrojový kód v JavaScriptu odkazuje na samotný modul.

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/],
};

Očekávám, že můj problém je ve skutečnosti spojen s některým z těchto konfiguračních souborů.

Otázka

Jak mohu zajistit, aby JavaScriptový soubor čistě exportoval komponentu Material-UI pro použití v projektech JS a TS?

Ptám se, protože soubor icons.ts v tomto příkladu je vlastně zjednodušení, aby se ukázal problém. Kód pro ikony je součástí větší knihovny komponent, která je balena a distribuována jako transpilační soubory JS.

Odpověď č. 1

místo toho:

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

zkus :

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

Související články