Skip to content

Commit

Permalink
[@mantine/core] Fix cjs builds unable to resolve third-party dependen…
Browse files Browse the repository at this point in the history
…cies with certain TypeScript settings (#5741)

Something with regards to this changed in 7.3.0 release, and as a result
commonjs artifacts don't seem to use (or even have) `_interopDefaultLegacy`
when needed.

One way this manifests is that using `<Textarea autosize />` in node
environment (for instance a remix.run app) crashes with

```
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
```

This is due to [`react-textarea-autosize`](https://github.com/Andarist/react-textarea-autosize)
that `Textarea` uses under the hood always exports itself as
```
exports['default'] = index;
```

And current commonjs of Textarea looking like

```
'use client';
'use strict';

var React = require('react');
var TextareaAutosize = require('react-textarea-autosize');

....

  const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};
  return /* @__PURE__ */ React.createElement(
    InputBase.InputBase,
    {
      component: shouldAutosize ? TextareaAutosize : "textarea",

```

...we end up getting `{ default: Component }` passed to
`React.createElement` and boom.

Setting [`interop: 'auto'`](https://rollupjs.org/configuration-options/#output-interop)
changes the behaviour to follow the way TypeScript handles these, and
the compiled code with it looks like:

```
'use client';
'use strict';

var React = require('react');
var TextareaAutosize = require('react-textarea-autosize');

...

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);

...

  const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};
  return /* @__PURE__ */ React__default.default.createElement(
    InputBase.InputBase,
    {
      component: shouldAutosize ? TextareaAutosize__default.default : "textarea",

```

And now `<Textarea autosize />` doesn't crash anymore.
  • Loading branch information
kblcuk authored Feb 9, 2024
1 parent 215d1f8 commit 90c3f9e
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions scripts/build/rollup/create-package-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export async function createPackageConfig(packagePath: string): Promise<RollupOp
dir: path.resolve(packagePath, 'cjs'),
preserveModules: true,
sourcemap: true,
interop: 'auto',
},
],
external: ROLLUP_EXTERNALS,
Expand Down

0 comments on commit 90c3f9e

Please sign in to comment.