httptoolkit / react-reverse-portal

React reparenting :atom_symbol: Build an element once, move it anywhere
https://httptoolkit.com
Apache License 2.0
879 stars 29 forks source link

Web Module changed to UMD [ES5 Support] #10

Closed Grabauskas closed 3 years ago

Grabauskas commented 4 years ago

At this moment tsconfig.web.json is configured to not fully support ES5. It's configured with "module": "es6". I saw that this was not possible to implement in #5.

So, now web/index.js has output:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

I tried to change to UMD and it just works.

var React = require("react");
var ReactDOM = require("react-dom");
pimterry commented 4 years ago

Have you tested this in IE11, as mentioned in #5? Reading that description again I think the issue there was probably that React itself wasn't properly set up beforehand, but it would be good to check that does work now (and to document that, if we do go down this road).

I do have some concerns about UMD regardless, because it's tricky to use with webpack (every downstream user will need to use https://www.npmjs.com/package/umd-compat-loader). I think most users are probably using webpack or something similar, and aren't expecting UMD.

Could you tell me a little more about how your project is set up, and why this is useful to you? I'm open to changing the module output or adding new outputs to support your use case, if we can do so safely, but it would be good to understand it more first.

Grabauskas commented 4 years ago

Sorry, it's my fault. Now I see that Storybook throwing an exception and doesn't work.

Back to the problem. Imports are not supported in ES5, so basically it has a syntax error.

There is another solution to use "module": "CommonJS". But again, I tried that and it's the same, Storybook throwing an exception.

pimterry commented 4 years ago

@Grabauskas A little more information would be helpful. In what environment are you using react-reverse-portal where it's not working for you? Is this a react project without any bundler, or using a non-webpack bundler, or something else? Which browsers are you targeting?

I'm definitely open to improving support for more setups, we just need to define which environments we're talking about first.

CLAassistant commented 3 years ago

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

pimterry commented 3 years ago

Happy to continue this, just waiting on more detail about the use cases where it's necessary.