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

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.

@dignifiedquire

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

Something is freezing the exports of preact-compat.

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

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

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

This works :) thank you

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.

webpack 2.3.2
react-hot-loader v3

Had same issue, that fixed for me too

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

@garmjs

~~@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.

@developit

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

btw just realized with this hot reload is not working

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.

@developit

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

@garmjs

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

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?

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.

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)

@developit

@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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

developit commented on Mar 29, 2017

dignifiedquire commented on Mar 29, 2017

developit commented on Mar 29, 2017

dignifiedquire commented on Mar 29, 2017

developit commented on Mar 30, 2017

garmjs commented on Apr 6, 2017

developit commented on Apr 6, 2017

garmjs commented on Apr 6, 2017

garmjs commented on Apr 6, 2017

developit commented on Apr 6, 2017

garmjs commented on Apr 6, 2017

developit commented on Apr 7, 2017

dignifiedquire commented on Apr 24, 2017

developit commented on Apr 25, 2017

levibuzolic commented on Jul 12, 2017

dictions commented on Sep 28, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions