Issues with react-hot-loader@3.0.0-beta.6

[dignifiedquire]

I am trying to alias react to preact-compat in my dev environment but running into the following issue:

patch.dev.js:180 Uncaught TypeError: Cannot set property createElement of #<Object> which has only a getter

I am using the setup from https://github.com/preact-compat/react and aliasing with webpack.

[developit]

Hi there @dignifiedquire - are you using Webpack 1, or 2?

Something is freezing the exports of preact-compat.

[dignifiedquire]

I am using webpack@2.3.1, with the following babel config

"presets": [
    [
      "latest", {
        "es2015": {
          "modules": false
        }
      }
    ],
    "stage-2",
    "react"
  ],

[developit]

I know this isn't the most elegant solution, but can you try adding this alias?

{
  alias: {
    'preact-compat': 'preact-compat/dist/preact-compat'
  }
}

I think it's something to do with the CommonJS proxy module re-exporting an ES Module - Webpack seems to be freezing something... somewhere (can't seem to find where).

[dignifiedquire]

This works :) thank you

[developit]

Ok, that confirms it. Now I just need to figure out if it's Babel or Webpack doing the freezing. Other people will be running into this as libs switch over to shipping ES Modules.

[garmjs]

webpack 2.3.2
react-hot-loader v3

Had same issue, that fixed for me too

{
  alias: {
    'preact-compat': 'preact-compat/dist/preact-compat'
  }
}

[developit]

@garmjs which version of preact-compat was that with? whoop, nevermind was thinking of a different issue. I'm actually not sure what we can do about this since RHL is doing something very odd.

[garmjs]

@developit sorry forget to mention its preact-compat@3.14.3

[garmjs]

btw just realized with this hot reload is not working

[developit]

For sure - RHL is trying to patch a frozen exports object for some reason. Not sure what the best way to fix this would be, it's just a very odd behavior for RHL.

[garmjs]

@developit i'm having another issue with react-modal too, inputs are losing focus onChange, i don't know yet why need to check further and open an issue if needed.

[developit]

@garmjs might be a bubbling issue. If something up the DOM tree accidentally registered an onChange handler on a random element like a <div> it'll trigger when blurring descendants.

[dignifiedquire]

So interesting enough, I have come back to trying and move my app to preact, but now I get an issue where the app is constantly rerendering if I use hot module reloading. If I remove 'react-hot-loader/patch' from the webpack entry config it stops. Any ideas what this could be?

[developit]

Not sure, but RHL is on my list of things to figure out. I've never used it, all the apps I work on just use basic HMR, but I know people really want it. It's likely touching some internal stuff preact-compat doesn't emulate.

[levibuzolic]

This fix works except it then causes issues with using react-dom/server

ERROR in Error: Cannot find module "react-dom/server"
    at webpackMissingModule (webpack:///./html.js?:12:79)
    at Object.eval (webpack:///./html.js?:12:172)
    at eval (webpack:///./html.js?:114:30)
    at Object../html.js (index.js:2425:1)
    at __webpack_require__ (index.js:30:30)
    at index.js:73:18
    at index.js:76:10
    at webpackUniversalModuleDefinition (index.js:3:20)
    at index.js:10:3
    at ContextifyScript.Script.runInContext (vm.js:53:29)

[dictions]

@developit that suggestion works to fix that error, but then causes create-react-class alias to fail.

ERROR in ./src/components/Portal.jsx
Module not found: Error: Can't resolve 'create-react-class' in '/Users/ianwilliams/dev/tapwater/frontend/src/components'
 @ ./src/components/Portal.jsx 15:24-53
 @ ./src/components/DraftLink.jsx
 @ ./src/components/DraftContentInput.jsx
 @ ./src/components/DraftBody.jsx
 @ ./src/routes/Draft.jsx
 @ ./src/routes/App.jsx
 @ ./src/components/Root.jsx
 @ ./src/client.js
 @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server react-hot-loader/patch ./client.js