hot-loader / react-dom Goto Github PK

patch-package could be used for distributing the changed react-dom.

Roughly, we need to

• ship patch files for different react-dom versions
• hoist them to the application root
• let patch-package find them and apply the patch

Please release a version with stable react-dom 16.8.0 :)

Current npm package 16.13.0 contains patched version of react-dom in CJS format only. There is actually also umd/react-dom.development.js file, but it contains unpatched version - there is difference in createFiberFromTypeAndProps function when compared with CJS version (it's missing type = hotResolveType(type);) and without that the application loading fails with AppContainer should be patched.

Having UMD build of @hot-loader/react-dom, or a script for applying the patch to the UMD build of react-dom, would make the hot reloading work in applications which load react and react-dom externally.

PS: the patch.js script referenced from README currently works only if applied to CJS version, probably because react-dom UMD build has extra indentation and the patch uses string.replace without regexps.

It seems that there is no available version for react-dom 16.12.0 (released 2 months ago).

patch.js is mentioned in the Readme but not found in the source

After adding the configurations from the README.md, with Webpack hot module replacement does not work anymore. I have to refresh the page myself to reload the components.

Hi,

I keep getting the following error when running the following code:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons...

-- render.js

import 'react-hot-loader';
import React from 'react';
import ReactDom from 'react-dom';
import App from './components';

export function render(root) {
  ReactDom.render(<App />, root);
}

-- components/index.jsx

import { hot } from 'react-hot-loader/root';
import React, { useState } from 'react';

const App = () => {
  const [state, setState] = useState(0);
  return <div>hey</div>;
};

export default hot(App);

I'm using React 16.9.0
ReactDOM 16.9.0

React Hot Loader version: 4.12.13

1. node -v: v10.15.1

2. npm -v: 6.4.1

3. Operating system: macOS 10.14.6

4. Browser and version: Chrome 76.0.3809.132

Any chances to make it work with experimental react build?
Since exposeConcurrentModeAPIs flag is false there are no ReactDOM.createRoot method

We're currently using [email protected] due to requirements on the async supporting version of act to remove warnings in tests, yet the latest available version of @hot-loader/react-dom is for [email protected].

Is a version of this module planned for 16.9.0-alpha.0 anytime soon?

Thanks!

Why is this package referred to as "react-🔥-dom" when the package name is "@hot-loader/react-dom"? The emoji makes it harder to search for without copy pasting if you don't remember the real package name.

https://github.com/facebook/react/releases/tag/v16.10.0

See yarnpkg/yarn#7062. Maybe we should add a note to the readme indicating that the user shouldn't run yarn upgrade when using @hot-loader/react-dom with yarn's name resolution.

`import React, { useEffect } from 'react';

export default function (): JSX.Element {
useEffect(() => {
document.addEventListener('click', () => {
console.log('document: onClick');
});
}, []);
return (
<div onClick={() => console.log('root: onClick')}>
<div onClick={(event) => event.stopPropagation()}>

This is really annoying that this library is always behind important fixes.

The problem is well described in this issue facebook/react#14927 (comment)

When using @hot-loader/react-dom/server method renderToString in browser it throw an error

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client

My company has to audit our software for the FDA and our UI uses react-dom. I need to be able to trace back from an NPM version to a specific commit in the project, but there are no tags in the repo... where can I find out that information?

The readme states that React is MIT licensed. This library is still react. However, that's quite fuzzy and the lack of an actual MIT license file in this repository makes usage of the library dfficult or impossible in certain scenarios.

A regular license file would be awesome - it doesn't even need a version bump or re-publish.

This is needed so that React 18 could be upgraded.

Followup for:
gaearon/react-hot-loader#1255 (comment)

I can write the automation for that, i just want design review:

First, I have failed to find a CI that will let me run builds for NPM package webhooks,
And writing that support for lets say lambci ATM is a big investment.

So instead of a webhook, we can find a CI with cron jobs, that we can run on a very regular basis(10 minutes?), and query for versions instead of being notified.

Which CI should we use?
If i'm not mistaken, the most frequent Travis can run is only once at day.
So we need something else. i saw that circle CI can run every minute and supports realgar cron syntax.
I don't have any strong preference. it can be any other good CI

For simplicity i would like to ask collaborator access to this organisation, it will save me handling fork and more configurations.

The README contains only the obscure

There are just a few changed lines, see patch.js for details

This must be a joke, these "a few lines" (150+) are unreadable.

Can someone add a bulleted list of (at least some) improvements this extension introduces?

I am hard time finding release note. It will be helpful there is a release note some where. Usually I see these under releases tab. Although there is 0 release under this repo. May be we should start using this release tab in future.

HI. I'm trying to use Link component from react-router-dom in a library package created with lerna (Lerna manages app and library packages), and when i'm inserting it in render method, i'm getting this error from react-hot-loader.development.js

react-hot-loader.development.js:1243 Uncaught TypeError: Cannot read property '__reactstandin__key' of undefined
    at isProxyType (react-hot-loader.development.js:1243)
    at resolveProxy (react-hot-loader.development.js:1735)
    at resolveType (react-hot-loader.development.js:1756)
    at Object.React$$1.createElement (react-hot-loader.development.js:2847)
    at e.default (AppsList.js:655)
    at renderWithHooks (react-dom.development.js:13451)
    at mountIndeterminateComponent (react-dom.development.js:15607)
    at beginWork (react-dom.development.js:16240)
    at performUnitOfWork (react-dom.development.js:20281)
    at workLoop (react-dom.development.js:20322)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:198)
    at invokeGuardedCallback (react-dom.development.js:252)
    at replayUnitOfWork (react-dom.development.js:19505)
    at renderRoot (react-dom.development.js:20435)
    at performWorkOnRoot (react-dom.development.js:21359)
    at performWork (react-dom.development.js:21269)
    at performSyncWork (react-dom.development.js:21243)
    at interactiveUpdates$1 (react-dom.development.js:21528)
    at interactiveUpdates (react-dom.development.js:2270)
    at dispatchInteractiveEvent (react-dom.development.js:5087)

Warning componentWillMount. But I dont use componentWillMount. With 16.8.6 version good work.

I'm getting the following when I try npm i @hot-loader/[email protected] -S. What is holding up the support for it?

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @hot-loader/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Am I correct in thinking that this package is automatically published when new versions of react/react-dom are released?

Currently react is on version 17.0.1, but there is only a 17.0.0 version of @hot-loader/react-dom, and since the peer dependency on react is strict, you get a warning when installing this package (if using the latest react):

npm WARN @hot-loader/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

Is there a specific reason the peer dependency is so strict? Could this be loosened?

When using the alias with react-app-rewired, react-apollo starts complaining that 'react-dom/server' cannot be resolved.

Any ideas what can be done?

Thanks

Hi

any chance of a 16.13.1?
https://github.com/facebook/react/releases/tag/v16.13.1

thanks

That would make possible to maintain a single version of this package, and make things simpler.

Hi,
It would be nice if this could be made available as it removes quite a few unnecessary warnings.
https://github.com/facebook/react/releases/tag/v16.13.1

It would be great if there was a version published for the latest react-dom release of 16.14.0

This is NOT related to #35

We're using ProGet with NPM connector, and it handles "+" (plus sign) in versions differently than npmjs repository.

• http://proget.wtg.zone/npm/Registry/@hot-loader/react-dom/

  "versions": {"16.13.0+4.12.20": ...

• https://registry.npmjs.org/@hot-loader/react-dom/

  "versions": ... {"16.13.0": ...

As you can see, the original npmjs API removes +4.12.20.
While ProGet leaves it.

I have analyzed all 1 240 000 npm packages in our ProGet repository and this one is the only one that has "+" in the version number.

I understand that it's an issue with ProGet and not with this package, but they don't want to fix it.

The issue is being covered in more details here: forums.inedo.com/topic/2948/npm-connector-returns-plus-in-versions

Got below errors when using @hot-loader/react-dom 16.8.6

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

package.json

{
  ...
  "dependencies": {
    "@hot-loader/react-dom": "^16.8.6",
    "axios": "^0.18.0",
    "classnames": "^2.2.5",
    "connected-react-router": "^6.5.2",
    "core-js": "^3.1.4",
    "cross-fetch": "^3.0.4",
    "date-fns": "^1.30.1",
    "font-awesome": "^4.7.0",
    "history": "^4.9.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.22.1",
    "office-ui-fabric-react": "^7.21.0",
    "qs": "^6.5.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-flexbox-grid": "^2.1.2",
    "react-loadable": "^5.5.0",
    "react-motion": "^0.5.2",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "reactstrap": "^8.0.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    ...
	
    "react-hot-loader": "^4.0.0",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.1"
	
	...
  },
  "scripts": {
    ...
  }
}

I also add alias to webpack config:

alias: {
     'react-dom': '@hot-loader/react-dom'
}

Hi folks, how can we help in publishing a patch for 17.0.0-rc.1?
We want people to try them but they're blocked by the missing support.

See #21

It's time @Bnaya!

deps

    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "html-webpack-plugin": "^4.5.0",
    "react": "^16.13.1",
    "react-dom": "npm:@hot-loader/react-dom",
    "regenerator-runtime": "^0.13.7",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"

babel.config

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config

const html = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  plugins: [new html()],
  module: {
    rules: [{
      loader: "babel-loader",
      exclude: /node_modules/,
      test: /\.jsx?$/
    }]
  }
}

index.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import React, { lazy, Suspense } from 'react'
import { render } from 'react-dom'

const Lazy = lazy(() => import('./lazy'))

render(<Suspense fallback={null}><Lazy /></Suspense>, document.body)

error:

Updated all my deps and saw 2 scheduler packages in yarn.lock. It seems this package is using the older one:

 # yarn why scheduler
yarn why v1.19.1
[1/4] Why do we have the module "scheduler"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "@hot-loader#react-dom" depends on it
   - Hoisted from "@hot-loader#react-dom#scheduler"
info Disk size without dependencies: "212KB"
info Disk size with unique dependencies: "260KB"
info Disk size with transitive dependencies: "288KB"
info Number of shared dependencies: 3
=> Found "react-dom#[email protected]"
info This module exists because "react-dom" depends on it.
info Disk size without dependencies: "208KB"
info Disk size with unique dependencies: "256KB"
info Disk size with transitive dependencies: "284KB"
info Number of shared dependencies: 3
Done in 1.39s.

A new day, a new version :)

https://github.com/facebook/react/releases/tag/v16.8.5

This repo has not been updated for a while while the npm package recently has.

GotTypeError: Cannot set property 'getCurrentStack' of undefined in browser console when using @hot-loader/react-dom (with webpack alias)
react/react-dom: 16.8.4
@hot-loader/react-dom: 16.8.4 (16.8.6 has the same error)