ピン留めされたアイテム

まとめ

webpack.config.js の resolve.alias に、tslib: 'tslib/tslib.es6.js' を設定すればOK。

webpack.config.js

module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      tslib: 'tslib/tslib.es6.js',
    },
  },

nbstsh

webpack5 で React + TS の project build しようとしたらエラー出た。

Uncaught (in promise) TypeError: Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default(...)' as it is undefined.

解決の道のりメモっていく。

nbstsh

どうやら Radix UI を入れたことが原因っぽいな....

    "@radix-ui/react-select": "^1.1.2",

nbstsh

調べると nuxt/bridge の issue が出てくるな...

nbstsh

この issue は関係なさそう
解決の糸口なし

nbstsh

これ関係ありそう

tslib/modules/index.js contains a import tslib from '../tslib.js';
but tslib/tslib.js doesn't contain a default export. It only contains named exports.
Becauses of this tslib is undefined in tslib/modules/index.js.
webpack 4 is unaffected because it doesn't support the exports field.
Node.js is unaffected because it doesn't support the __esModule flag.
But in combination they lead to this error.

nbstsh

"利用している Library が内部で tslib を使ってて、tslib から default export されているものを import しているが、webpack で bundle するとその default import されているものが undefined になっちゃてる"

みたいな感じなのか....? わからん....

nbstsh

これも @nuxt/bridge だけどとりあえずみる

nbstsh

If you're encountering this on Bridge, you can try this workaround:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
 alias: {
   tslib: 'tslib/tslib.es6.js'
 }
})

tslib に tslib にtslib/es6.js の alias 当てればいけるのか...?

nbstsh

いけた！！！

nuxt ではないので、webpack.config.js の resolve.alias を編集。

webpack.config.js

module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      tslib: 'tslib/tslib.es6.js',
    },
  },