preactjs / preact-compat Goto Github PK

The onchange event on my select box triggers twice.
By debugging it, I could find that in this line, there are 2 values being passed to multihook function and both the values are same i.e. onchange

@developit Can you please help?
If the above is the case and it's a bug, I'll be more than happy to contribute 😄

Hi! Thakes for the great (and tiny) library!
I found one more needed React-lib module, not existing in preact-compat:

ERROR in .//react-maskedinput/lib/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactInputSelection' in C:~~~\node_modules\react-maskedinput\lib
@ .//react-maskedinput/lib/index.js 9:15-55

Migrating this from preactjs/preact#79.

Original issue reported by @chrisdavies:

In React, the onChange event is normalized across browsers (at least as far back as IE9) so that it fires any time the content of an input changes (e.g. when the user types, backspaces, deletes, etc). Is there a similarly normalized event in preact?

JSFiddle Demo

Summary: preact-compat needs to more faithfully replicate React's event normalization behavior. This issue tracks progress on that.

• onChange fired as a "live" input event
• onChange fired for checkbox clicks
• onChange normalized for <select> inputs

While migration somehow I need to add this

import { h } from 'preact';

to avoid Uncaught ReferenceError: h is not defined
Is it normal?

And also I need to manually add proptypes to avoid error after that too.
Not sure this is expected behavior.

You can find the code here.
And I can reproduce by just comment out

//import { h } from 'preact';

here

Thanks

I am running preact-compat in production on AWS which uses Node 2.1.1

Running into the following error:

error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
error peerinvalid Peer [email protected] wants preact@*

The * doesn't pick up beta releases.

The only thing I could find to accept all current versions of preact is:
* || >3.0.0-beta0 || >5.0.0-beta0 || >5.0.1-beta.0 || >5.1.0-beta.0

Any thoughts?

React#cloneElement does not clone vnode children because they are stored externally from the attributesproperty.

Since reactjs stores the childrenon props, they get cloned. Only if extra children are provided to the React#cloneElementcall do they get overridden.

ReactJS has a function forceUpdate(), to use with 3rd-party modules, that need update a component without changing the React state.

preact does not have this function. When we need to force an update, we've got an error :(

PS.: Using this.setState({}) instead this.forceUpdate() works fine on React and Preact 😄 Thanks @developit for the tip! =)

I'm trying to run a --preact build while testing nwb's Webpack 2 upgrade and getting the following error:

ERROR  in vendor.db2641fb.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [./~/preact-compat/src/index.js:31,0][ve
ndor.db2641fb.js:1557,24]

jsnext:main and module are pointing to src/index.js, which contains some untranspiled ES6 (which UglifyJS can't currently handle) - it's my understanding that the current approach which needs to be used with these package.json configs is to create a build which transpiles everything except ES6 module syntax back to ES5 and point to that.

I tried it with webpack2 and received following error:

SyntaxError: Unexpected token: punc ()) [./~/preact-compat/src/index.js:31,0][vendor__6dea1.js:53,24]

Took a look inside the bundled code and I spotted an un-transpiled es6's fat arrow.

Also, I am new to webpack 2 and it's tree-shaking, but is it because of this tree-shaking that it pointed to /~/preact-compat/src/index.js instead of /~/preact-compat/dist/preact-compat.js?

I tried with [email protected] or sooner versions and it worked as expected.

Hi! When i trying to work with https://github.com/gajus/react-css-modules in my component webpack compiles it without any errors. But in browser console I receive this error

Error appears in this string (blue)

My component code looks like this:

With ES6 class component I receive same error.

Using react-css-modules decorator changes nothing.
Have you any idea how to fix or bypass this error. Thx!

Preact 3.x dropped support for Component._render(), which broke refs in preact-compat.

Hi,

In v15.3.0, React has introduced PureComponent which is like Component with react-addons-pure-render-mixin integrated.

I don't think preact-compat supports it at the moment, is it planned?

Thanks!

Hello, I would like to be able to use ReactCSSTransitionGroup with a Preact Component. Is this possible?

I've tried to set it up with Browserify and Aliasify to manage the aliases but it doesn't seem to be working.

I've set the aliases in my package.json like this:

"aliasify": {
    "aliases": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }

There must be something I'm missing. Would you have an idea?

React version:

• [email protected]

preact-compat version:

• [email protected]
• [email protected]

Error:

VM12394:328 Uncaught (in promise) DOMException: Failed to execute 'replaceChild' on 'Node': The new child element contains the parent.
    at Error (native)
    at renderComponent (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:328:71)
    at setComponentProps (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:281:103)
    at buildComponentFromVNode (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:362:13)
    at idiff (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:176:48)
    at innerDiffNode (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:231:21)
    at idiff (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:185:279)
    at diff (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:157:19)
    at renderComponent (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:323:32)
    at setComponentProps (eval at <anonymous> (http://localhost:5000/vendor.032262c576e185ee7774db6908b8649d.js:3238:1), <anonymous>:281:103)

Code:

const ChatWindow = props => {
  const emote = props.is_emote_open ? <EmoteSelector {...props} /> : null
  const options = props.is_options_open ? <ChatOptions {...props} /> : null
  return (
    <aside className={styles.root} >
      <ChatWindowHeader {...props} />
      <MessageWindow {...props} />
      <ComposeMessage {...props} />
      {emote}
      {options}
    </aside>
  )
}

ChatWindowHeader contains a button to control showing {options} or not. But it will cause DOMException in preact-compat version but works well in react version.

I'm trying to work through a proof of concept, converting https://github.com/kasprownik/react-forms-tutorial to use preact and preact-compat.

I've forked the project here https://github.com/ld0rman/react-forms-tutorial.

I've added:

• aliases for react and react-dom
• config so that preact.h is used to render JSX
• replaced React.PropTypes with your standalone proptypes
• removed the material-ui components because it doesn't seem to work and replaced with standard HTML

Lastly I've created a small utility to create components. (class is banned where I work :-D)

When I build and run the app the <form> is empty, it's this.props.children are undefined. I'm looking over my code but I'm not sure where I've gone wrong. Would really appreciate your expertise.

Hi,

I'm using preact-compat to implement a user survey. Each question has an associated "answer type" component that allows the user to enter an answer e.g. an input field, a range slider or some buttons.

If two questions follow each other that use the same answer component then the data from the last answer is not removed.

I've tried to use a unique key to force the replacement of the component but this causes two components to appear e.g. <AnswerInput key={uniqueQuestionId} />.

Here's a test case on Codepen. If you enter some text in the input and click increment, on every other click, I see 2 instances of the component:

The same example using React doesn't pass the key through as props but entering text and clicking "Increment" clears the text box.

Is there a better approach to this?

I'm trying to convert an existing React application based on Material-UI http://www.material-ui.com/ and receive the following errors during the build process:

ERROR in .//react-addons-transition-group/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactTransitionGroup' in c:\code\TDC\preact\node_modules\react-addons-transition-group
@ .//react-addons-transition-group/index.js 1:17-58

ERROR in .//react-addons-create-fragment/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactFragment' in c:\code\TDC\preact\node_modules\react-addons-create-fragment
@ .//react-addons-create-fragment/index.js 1:17-51

Is this something that is common working with controls built for React?

I am attempting to use React DnD with Preact Compat but running into an issue of the DragDropContext component rendering as <undefined></undefined>.

My node environment is currently set to v5.5.0. I am using JSPM as my package manager. Once I switched over to React it did work as planned.

I have put together a mocked project that replicates the problem. The repo can be found here. https://github.com/adjohnston/preact-dnd.

Here's a breakdown of the files themselves, plus a screenshot of the issue from the browser.

Index

import React, { createClass } from 'react'
import { render } from 'react-dom'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import DragArea from 'js/drag-area'

const App = createClass({
  render() {
    return (
      <div>
        <p>
          The component below will not be rendered correctly. Instead it will render as: <pre><code>&lt;undefined>&lt;/undefined></code></pre>
        </p>

        <DragArea />
      </div>
    )
  }
})

render(<App />, document.querySelector('#app'))

Drag Area

import React, { createClass } from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import Card from './card'

const DragArea = createClass({
  render() {
    return (
      <div>
        <Card />
        <Card />
      </div>
    )
  }
})

export default DragDropContext(HTML5Backend)(DragArea)

Card

import React, { createClass } from 'react'
import { DragSource } from 'react-dnd'

const type = 'card'

const cardSource = {
  beginDrag() {
    return {}
  }
}

const collect = connect => {
  connectDragSource: connect.dragSource()
}

const Card = createClass({
  render() {
    return this.props.connectDragSource(
      <div>
        Card
      </div>
    )
  }
})

export default DragSource(type, cardSource, collect)(Card)

Any help in solving the issue would be greatly appreciated.

preact-compat doesn't seem to work with the React bindings to A-Frame: https://github.com/ngokevin/aframe-react

This code is supposed to render a sphere in the scene, wait 1500 seconds, and then increase the sphere's radius to 2:

import 'aframe';
import { Scene, Entity } from 'aframe-react';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = { radius: 0.5 };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ radius: 2 });
        }, 1500);
    }
    render() {
        return (
            <div id="app">
                <Scene>
                    <a-sphere position="0 1.5 -15"
                             color="red"
                             radius={this.state.radius}/>;
                </Scene>
            </div>
        );
    }
}

In React this works fine, but Preact just clears the scene entirely. This same issue seems to cause hot-reloading not to work in Preact.

To address preactjs/preact#53

Hi!

I've tried to add preact-compat to my app and it failed with this error.
It happens when I use this construct:

<Posts {...this.props.posts} />

I was able to resolve it by replacing with:

<Posts items={this.props.posts.items}
    isLoading={this.props.posts.isLoading} />

P.S. I wasn't able to reproduce this issue with some minimal code snippet
but it happens in my boilerplate app:

https://github.com/slmgc/preact-baobab-template/blob/dev/src/controllers/posts.js#L15

Hi, I'm trying to use this in node for using react components and then server-side rendering the preact components. Is that possible?

Hello! How are you? My name is Gabriel, I'm a front-end developer in a spanish speaker social network from Argentina that serves content to +60M unique users per month.

We're currently re-developing our entire application using react and its whole ecosystem. (webpack, redux, react-router, es6 and stuff) as a SPA.

In the few past months we've been developing a beauty rich text editing tool based on draft-js, it's an awesome library for the job.

And also we're currently trying to lower the size of our bundle.js generated and saw that the 25% size of ours it's only react.

The truth is that we want to switch to preact and preact-compat and everything works fine (react components, containers, redux, react-router and stuff). Everything but draft-js.
I tried to reproduce the error in a webpack bin: http://www.webpackbin.com/Vyc5O3_TZ

You can try there toggling the comments made (the switch from react to preact-compat) or you can paste the code and use an alias on a real webpack environment.

The editor doesn't work at all, but we really want to use preact in our project.

If you need any help and you want to solve this issue so we can use it, please let me know, it'd be really good for us.

Thanks in advance, best regards, Gabriel.

https://facebook.github.io/react/docs/top-level-api.html#reactdom.render

ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.

That's not what happens with preact-compat

<div id="root">
   Hello
</div>

import ReactDOM from 'preact-compat';

ReactDOM.render(<span>Hello</span>, document.getElementById('root'));

results in

<div id="root">
   Hello<span>Hello</span>
</div>

after set alias in webpack config

alias['react'] = 'preact-compat'
alias['react-dom'] = 'react-compat'

ERROR in .//react-slick/lib/mixins/helpers.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactTransitionEvents'
react-slick/lib/mixins
@ .//react-slick/lib/mixins/helpers.js 17:37-79

It's occur when I try to add precat-compat and preact@beta on https://github.com/lvarayut/relay-fullstack

Maybe this not support yet?

Hi, I'm currently trying to migrate for preact. My current project is using react-bootstrap library, and the Dropdown component of it fails with this issue:

error: Cannot read property 'focusNext' of undefined(…)

Where parent of focusNext is reference to this.refs.menu which is undefined.
My code looks like this:

       <Dropdown>
                    <Dropdown.Toggle ref="toggle">
                     some
                    </Dropdown.Toggle>

                    <Dropdown.Menu ref="menu">
                        <MenuItem eventKey="4">Separated link</MenuItem>
                    </Dropdown.Menu>

                </Dropdown>```


Would be very helpful if you guide me on fixing it. 

Thanks!

PS: 
Versions: 
"preact": "5.7.0",
"preact-compat": "2.3.0",

Just curious.

e.g.

function MyComponent(props) {
  const styles = MyComponent.styles;
  return <div className={css(styles.foo)}>Foo</div>;
}
MyComponent.styles = StyleSheet.create({
  foo: { color: 'red' }
});

I haven't looked at it closely, but this might be same issue as #14

When I try preact-compat with https://github.com/freddyrangel/playing-with-react-and-d3/tree/master/finished I got

ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount' in /Users/katopz/git/playing-with-react-and-d3/finished/src
 @ ./src/index.jsx 1:338-369

Maybe it's not support?

I was attempting a PR to soften the proptypes errors into warnings as we discussed on twitter but noticed this issue. I will look into it, but thought it worth logging in the interim.

I'm looking into the issue but I was curious if anyone has this working with react-router as well. Somehow route matching is broken (after using aliasify). I'll post back if I figure out what's up.

When using React-bootstrap component Dropdown it goes to children and from the property bsRole it distinguishes menu component and toggle component - see https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Dropdown.js#L310.

When this is evaluated by React, child components have bsRole property populated and Dropdown registers subcomponents properly.

When Preact evaluates the same code, child nodes do not have properties populated and therefore subcomponent registration (toggle and menu) does not work.

This seems to be related to how Preact is optimized so not sure if this behavior can be changed?

To replicate the issue you can just create-react-app with following App.js:

import React, { Component } from 'react';
import './App.css';
import Dropdown from 'react-bootstrap/lib/Dropdown';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Dropdown className="" id="dropdown-test">
          <Dropdown.Toggle useAnchor={true}
                           // bsRole="toggle"
                           className="">Dropdown test</Dropdown.Toggle>
          <Dropdown.Menu
            className="menu-item-dropdown"
            // bsRole="menu"
          >
            <li>First item</li>
            <li>Second item</li>
          </Dropdown.Menu>
        </Dropdown>
      </div>
    );
  }
}

export default App;

The following errors are thrown during build:

ERROR in ./~/proptypes/index.js
Module build failed: ReferenceError: [BABEL] ./~/node_modules/proptypes/index.js: Using removed Babel 5 option: ./~/node_modules/proptypes/.babelrc.loose - Specify the `loose` option for the relevant plugin you are using or use a preset that sets the option.
    at Logger.error (./~/node_modules/babel-core/lib/transformation/file/logger.js:39:11)
    at OptionManager.mergeOptions (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:20)
    at OptionManager.addConfig (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:207:10)
    at OptionManager.findConfigs (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:16)
    at OptionManager.init (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:461:12)
    at File.initOptions (./~/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (./~/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (./~/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at transpile (./~/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (./~/node_modules/babel-loader/index.js:88:12)
 @ ./~/preact-compat/dist/preact-compat.js 6:132-152 6:243-308

ERROR in ./~/preact-svg/dist/preact-svg.js
Module build failed: ReferenceError: [BABEL] ./~/node_modules/preact-svg/dist/preact-svg.js: Using removed Babel 5 option: ./~/node_modules/preact-svg/.babelrc.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
    at Logger.error (./~/node_modules/babel-core/lib/transformation/file/logger.js:39:11)
    at OptionManager.mergeOptions (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:20)
    at OptionManager.addConfig (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:207:10)
    at OptionManager.findConfigs (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:16)
    at OptionManager.init (./~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:461:12)
    at File.initOptions (./~/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (./~/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (./~/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at transpile (./~/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (./~/node_modules/babel-loader/index.js:88:12)
 @ ./~/preact-compat/dist/preact-compat.js 6:154-175 6:243-308

It appears replaceState is confirmed as missing from preact-compat. Would be awesome to consider implementing it.

This is currently breaking a Preact port of a React Hacker News app I work on.

I'll try look at this one too.

I have a PR in the works.

Hi! I am having an error while running on prod. PropTypes.js:21 Uncaught TypeError: Cannot read property 'isRequired' of undefined.

I am using my boilerplate similar to https://github.com/erikras/react-redux-universal-hot-example.
The build worked nicely with a difference of 100kb between react and preact :D. I think you are doing a really good job with that an the compatibility.

The readme instructions right now are missing for browserify. There's a section: https://github.com/developit/preact-compat#usage-with-browserify but it yada-yadas over huge sections.

1. How do you order your Browserify transforms? You need to babelify it first so aliasify can parse the code, but you have to aliasify it first so browserify doesn't complain about missing packages
2. You can install react too so babel can run, but then your bundle size is the same.

Hi,

whenever I try to update react-virtualized data, it throws an error

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

VM7842:1 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at eval (eval at evaluate (:117:21), <anonymous>:1:9)
    at Object.removeResizeListener (http://l.housing.com:4000/searchView.js:4972:7)
    at AutoSizer.componentWillUnmount (http://l.housing.com:4000/searchView.js:2366:35)
    at unmountComponent (http://l.housing.com:4000/vendor.js:4244:55)
    at unmountComponent (http://l.housing.com:4000/vendor.js:4247:20)
    at recollectNodeTree (http://l.housing.com:4000/vendor.js:4112:24)
    at removeOrphanedChildren (http://l.housing.com:4000/vendor.js:4108:63)
    at innerDiffNode (http://l.housing.com:4000/vendor.js:4105:32)
    at idiff (http://l.housing.com:4000/vendor.js:4055:279)
    at innerDiffNode (http://l.housing.com:4000/vendor.js:4101:21)

. I set up a plunker of react-virtualized with preact and its working fine on first render. This is mainly an issue with preact-compat I guess.

cc: @bvaughn - in case anything can be done from your side. This error doesn't occur if I don't change the height of the container.

I'm trying apply preact-compat to redux-undo example by alias which seem to working fine. only on thing that's not. Let's get in to the code.

Here's working via React but not Preact compat

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a href="#"
       onClick={e => {
         e.preventDefault()
         onClick()
       }}
    >
      {children}
    </a>
  )
}

It'll appear blank (not render?) when click on category link like this

Here's working both

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (<span>
    <a href="#"
       onClick={e => {
         e.preventDefault()
         onClick()
       }}
    >
      {children}
    </a>
  </span>)
}

The different is I've to add return (<span>...</span>) to make it render properly for some reason.
Any hint? Or maybe just live with it?

Thanks

I finally managed to include preact-compat with modules: true (jsnext: true) and I noticed that there's almost no gain in the gzip bundle (33 bytes). Nothing gets tree-shaken.

I looked into the code and there's a way to fix this. If you move createClass into it's own file, I can use rollup-plugin-alias to replace that file with an empty function (I'm not using createClass in my code).

Kinda like this

import PropTypes from 'proptypes';
import { ... } from 'preact';
import createClass from './createClass';

//...

export default {
    ...,
    createClass,
        ...
};

I tried doing it in a PR but I didn't know exactly how to decouple createClass from currentComponent.

I reckon a good chunk of preact-compat has to do with providing createClass, what do you think?

React camelCases all but the data-* and aria-* html attributes, including on SVG elements: https://facebook.github.io/react/docs/dom-differences.html.

preact-compat nor preact-svg do not translate any React camelCased attributes to htmls kebab-case. This isn't a problem with normal html elements, as there are only a couple, accept-charset for <form> elements and http-equiv for the <meta> elements. It's unlikely preact/React would be used in the meta tag, but http-equiv in form might be used. Could be something to look into.

However, the bigger issue is svg which has lots of kebab-cased attributes based on CSS properties (e.g. strokeWidth => stroke-width). React svg code simply won't style properly as-is without transforming these to dash-case.

The react-google-recaptcha module doesn't work with preact and preact-compat

I've added an example at https://github.com/cameronbraid/preact-compat-react-google-recaptcha with usage instructions.

Issues are as follows :

a) the async loading of the recaptcha script takes a long time - there is a cancelled attempt to download https://www.google.com/recaptcha/api2/anchor... then on the second attempt it succeeds and the recaptcha box is shown

b) once the captcha box is shown, any calls to setState causes the recaptcha box to dissapear - try entering something into the textbox, or complete the captcha

I couldn't get this to work in webpackbin/codepen etc... none of them allow the webpack resolve.alias for react and react-dom to preact-compat

Cheers

Cameron

I tried to convert a a very simple react App with preact-compat. I am getting following error while doing so.

Uncaught TypeError: PropTypes.instanceOf is not a function

I have uploaded the repo for ref.

It is complaining about PropTypes used for Redbox component used within webpack. So it seems to be at a conflict with Webpack. BTW I am using webpack 2.1.0-beta.4. Is there something that I am missing at my end.

How using preact-compat without exports or require served directly from a cdn?
I have try to embed

<script src="https://npmcdn.com/[email protected]/dist/preact.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>

but i get this errors
exports is not defined and require is not defined.
preacts.js works without exports and require but not preact-compat

As described in preactjs/preact#168 - it would be nice to have support for Enzyme.

Hi,

I am using preact-compat w/ webpack alias to replace ReactJS in my project. In dev mode all work fine, but with the minified production ready I have the follow error in the console:

Uncaught TypeError: Cannot read property 'isRequired' of undefined

Here there is a screenshot with more context:

Do you have any idea with can be wrong ?!

Btw, I am using the default uglify config for the webpack plugin.

Thx!

I'm at and trying preact 6.0.2, preact-compat 3.0.1 with https://github.com/justinjung04/universal-boilerplate and found that when I click Go to page and click Go to home I will get an error

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Maybe a bug?