Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set interop to 'auto' for cjs build #5741

Merged
merged 1 commit into from
Feb 9, 2024
Merged

Conversation

kblcuk
Copy link
Contributor

@kblcuk kblcuk commented Feb 7, 2024

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
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'
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.

Note that this is only a proposal, I'm happy with any fix as long as autosized
textareas work in commonjs setup. Besides, I'm not entirely sure whether
there are any unintended side-effects of this change (or what originally
in 7.3.0 release caused this problem).

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.
@rtivital rtivital merged commit 90c3f9e into mantinedev:master Feb 9, 2024
1 check passed
@rtivital
Copy link
Member

rtivital commented Feb 9, 2024

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants