Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

Overview

React Hot Loader

Build Status version Code Coverage MIT License

PRs Welcome Chat Backers on Open Collective Sponsors on Open Collective

Watch on GitHub Star on GitHub

Tweak React components in real time ⚛️ ⚡️

Watch Dan Abramov's talk on Hot Reloading with Time Travel.

Moving towards next step

React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It's time to make a next step.

React-Hot-Loader is expected to be replaced by React Fast Refresh. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.

Install

npm install react-hot-loader

Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal.

Getting started

  1. Add react-hot-loader/babel to your .babelrc:
// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}
  1. Mark your root component as hot-exported:
// App.js
import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);
  1. Make sure react-hot-loader is required before react and react-dom:
  • or import 'react-hot-loader' in your main file (before React)
  • or prepend your webpack entry point with react-hot-loader/patch, for example:
    // webpack.config.js
    module.exports = {
      entry: ['react-hot-loader/patch', './src'],
      // ...
    };
  1. If you need hooks support, use @hot-loader/react-dom

Hook support

Hooks would be auto updated on HMR if they should be. There is only one condition for it - a non zero dependencies list.

❄️ useState(initialState); // will never updated (preserve state)
❄️ useEffect(effect); // no need to update, updated on every render
❄️ useEffect(effect, []); // "on mount" hook. "Not changing the past"
🔥 useEffect(effect, [anyDep]); // would be updated

🔥 useEffect(effect, ["hot"]); // the simplest way to make hook reloadable

Plus

  • any hook would be reloaded on a function body change. Enabled by default, controlled by reloadHooksOnBodyChange option.
  • you may configure RHL to reload any hook by setting reloadLifeCycleHooks option to true.

To disable hooks reloading - set configuration option:

import { setConfig } from 'react-hot-loader';

setConfig({
  reloadHooks: false,
});

With this option set all useEffects, useCallbacks and useMemo would be updated on Hot Module Replacement.

Hooks reset

Hooks would be reset if their order changes. Adding, removing or moving around would cause a local tree remount.

Babel plugin is required for this operation. Without it changing hook order would throw an error which would be propagated till the nearest class-based component.

@hot-loader/react-dom

@hot-loader/react-dom replaces the "react-dom" package of the same version, but with additional patches to support hot reloading.

There are 2 ways to install it:

  • Use yarn name resolution, so @hot-loader/react-dom would be installed instead of react-dom
yarn add react-dom@npm:@hot-loader/react-dom
yarn add @hot-loader/react-dom
// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};

Old API

Note: There is also an old version of hot, used prior to version 4.5.4. Please use the new one, as it is much more resilient to js errors that you may make during development.

Meanwhile, not all the bundlers are compatible with new /root API, for example parcel is not.

React-Hot-Load will throw an error, asking you to use the old API, if such incompatibility would be detected. It is almost the same, but you have to pass module inside hot.

import { hot } from 'react-hot-loader';
const App = () => <div>Hello World!</div>;
export default hot(module)(App);
  1. Run webpack with Hot Module Replacement:
webpack-dev-server --hot

What about production?

The webpack patch, hot, Babel plugin, @hot-loader/react-dom etc. are all safe to use in production; they leave a minimal footprint, so there is no need to complicate your configuration based on the environment. Using the Babel plugin in production is even recommended because it switches to cleanup mode.

Just ensure that the production mode has been properly set, both as an environment variable and in your bundler. E.g. with webpack you would build your code by running something like:

NODE_ENV=production webpack --mode production

NODE_ENV=production is needed for the Babel plugin, while --mode production uses webpack.DefinePlugin to set process.env.NODE_ENV inside the compiled code itself, which is used by hot and @hot-loader/react-dom.

Make sure to watch your bundle size when implementing react-hot-loader to ensure that you did it correctly.

Limitations

  • (that's the goal) React-Hot-Loader would not change the past, only update the present - no lifecycle event would be called on component update. As a result, any code changes made to componentWillUnmount or componentDidMount would be ignored for already created components.
  • (that's the goal) React-Hot-Loader would not update any object, including component state.
  • (1%) React-Hot-Loader may not apply some changes made to a component's constructor. Unless an existing component is recreated, RHL would typically inject new data into that component, but there is no way to detect the actual change or the way it was applied, especially if the change was made to a function. This is because of the way React-Hot-Loader works - it knows what class functions are, not how they were created. See #1001 for details.

Recipes

Migrating from create-react-app

  1. Run npm run eject
  2. Install React Hot Loader (npm install --save-dev react-hot-loader)
  3. In config/webpack.config.dev.js, add 'react-hot-loader/babel' to Babel loader configuration. The loader should now look like:
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
      plugins: ['react-hot-loader/babel'],
    },
  }
  1. Mark your App (src/App.js) as hot-exported:
// ./containers/App.js
import React from 'react';
import { hot } from 'react-hot-loader';

const App = () => <div>Hello World!</div>;

export default hot(module)(App);

Migrating from create-react-app without ejecting

Users report, that it is possible to use react-app-rewire-hot-loader to setup React-hot-loader without ejecting.

TypeScript

As of version 4, React Hot Loader requires you to pass your code through Babel to transform it so that it can be hot-reloaded. This can be a pain point for TypeScript users, who usually do not need to integrate Babel as part of their build process.

Fortunately, it's simpler than it may seem! Babel will happily parse TypeScript syntax and can act as an alternative to the TypeScript compiler, so you can safely replace ts-loader or awesome-typescript-loader in your Webpack configuration with babel-loader. Babel won't typecheck your code, but you can use fork-ts-checker-webpack-plugin (and/or invoke tsc --noEmit) as part of your build process instead.

A sample configuration:

{
  // ...you'll probably need to configure the usual Webpack fields like "mode" and "entry", too.
  resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"] },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
            babelrc: false,
            presets: [
              [
                "@babel/preset-env",
                { targets: { browsers: "last 2 versions" } } // or whatever your project requires
              ],
              "@babel/preset-typescript",
              "@babel/preset-react"
            ],
            plugins: [
              // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
              ["@babel/plugin-proposal-decorators", { legacy: true }],
              ["@babel/plugin-proposal-class-properties", { loose: true }],
              "react-hot-loader/babel"
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin()
  ]
};

For a full example configuration of TypeScript with React Hot Loader and newest beta version of Babel, check here.

As an alternative to this approach, it's possible to chain Webpack loaders so that your code passes through Babel and then TypeScript (or TypeScript and then Babel), but this approach is not recommended as it is more complex and may be significantly less performant. Read more discussion here.

Parcel

Parcel supports Hot Module Reloading out of the box, just follow step 1 and 2 of Getting Started.

We also have a full example running Parcel + React Hot Loader.

Electron

You need something to mark your modules as hot in order to use React Hot Loader.

One way of doing this with Electron is to simply use webpack like any web-based project might do and the general guide above describes. See also this example Electron app.

A webpack-less way of doing it to use electron-compile (which is also used by electron-forge) - see this example. While it requires less configuration, something to keep in mind is that electron-compile's HMR will always reload all modules, regardless of what was actually edited.

Source Maps

If you use devtool: 'source-map' (or its equivalent), source maps will be emitted to hide hot reloading code.

Source maps slow down your project. Use devtool: 'eval' for best build performance.

Hot reloading code is just one line in the beginning and one line at the end of each module so you might not need source maps at all.

Linking

If you are using npm link or yarn link for development purposes, there is a chance you will get error Module not found: Error: Cannot resolve module 'react-hot-loader' or the linked package is not hot reloaded.

There are 2 ways to fix Module not found:

  • Use include in loader configuration to only opt-in your app's files to processing.
  • Alternatively if you are using webpack, override the module resolution in your config:
{
  resolve: {
    alias: {
      'react-hot-loader': path.resolve(path.join(__dirname, './node_modules/react-hot-loader')),
    }
  }
}

And to make your linked package to be hot reloaded, it will need to use the patched version of react and react-dom, if you're using webpack, add this options to the alias config

{
  resolve: {
    alias: {
      'react-hot-loader': path.resolve(path.join(__dirname, './node_modules/react-hot-loader')),
      // add these 2 lines below so linked package will reference the patched version of `react` and `react-dom`
      'react': path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom')),
      // or point react-dom above to './node_modules/@hot-loader/react-dom' if you are using it
    }
  }
}

Preact

React-hot-loader should work out of the box with preact-compat, but, in case of pure preact, you will need to configure it:

  • create configuration file (setupHotLoader.js)
import reactHotLoader from 'react-hot-loader';
import preact from 'preact';

reactHotLoader.preact(preact);
  • dont forget to import it

Preact limitations

  • HOCs and Decorators as not supported yet. For Preact React-Hot-Loader v4 behave as v3.

React Native

React Native supports hot reloading natively as of version 0.22.

Using React Hot Loader with React Native can cause unexpected issues (see #824) and is not recommended.

Webpack plugin

We recommend using the babel plugin, but there are some situations where you are unable to. If so, try the webpack plugin / webpack-loader (as seen in v3).

Remember - the webpack plugin is not compatible with class-based components. The babel plugin will inject special methods to every class, to make class members (like onClick) hot-updatable, while the webpack plugin would leave classes as is, without any instrumentation.

class MyComponent extends React.Component {
  onClick = () => this.setState(); // COULD NOT UPDATE
  variable = 1; // this is ok
  render() {} // this is ok
}

But webpack-loader could help with TypeScript or spreading "cold API" to all node_modules.

It is possible to enable this loader for all the files, but if you use babel plugin, you need to enable this loader for react-dom only. Place it after babel-loader, if babel-loader is present.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // would only land a "hot-patch" to react-dom
      {
        test: /\.js$/,
        include: /node_modules\/react-dom/,
        use: ['react-hot-loader/webpack'],
      },
    ],
  },
};

Webpack plugin will also land a "hot" patch to react-dom, making React-Hot-Loader more compliant to the principles.

If you are not using babel plugin you might need to apply webpack-loader to all the files.

{
  test: /\.jsx?$/,
  include: /node_modules/,
  use: ['react-hot-loader/webpack']
},

Code Splitting

If you want to use Code Splitting + React Hot Loader, the simplest solution is to pick a library compatible with this one:

If you use a not-yet-friendly library, like react-async-component, or are having problems with hot reloading failing to reload code-split components, you can manually mark the components below the code-split boundaries.

// AsyncHello.js
import { asyncComponent } from 'react-async-component';

// asyncComponent could not `hot-reload` itself.
const AsyncHello = asyncComponent({
  resolve: () => import('./Hello'),
});

export default AsyncHello;

Note that Hello is the component at the root of this particular code-split chunk.

// Hello.js
import { hot } from 'react-hot-loader/root';

const Hello = () => 'Hello';

export default hot(Hello); // <-- module will reload itself

Wrapping this root component with hot() will ensure that it is hot reloaded correctly.

Out-of-bound warning

You may see the following warning when code-split components are updated:

React-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.

This is because the hot reloading of code-split components happens asynchronously. If you had an App.js that implemented the AsyncHello component above and you modified AsyncHello, it would be bundled and reloaded at the same time as App.js. However, the core hot reloading logic is synchronous, meaning that it's possible for the hot reload to run before the updates to the split component have landed.

In this case, RHL uses a special tail update detection logic, where it notes that an an update to a split component has happened after the core hot reloading logic has already finished, and it triggers another update cycle to ensure that all changes are applied.

The warning is informational - it is a notice that this tail update logic is triggered, and does not indicate a problem in the configuration or useage of react-hot-loader.

If the tail update detection is not something you want or need, you can disable this behavior by setting setConfig({ trackTailUpdates:false }).

Checking Element types

Because React Hot Loader creates proxied versions of your components, comparing reference types of elements won't work:

const element = <Component />;
console.log(element.type === Component); // false

React Hot Loader exposes a function areComponentsEqual to make it possible:

import { areComponentsEqual } from 'react-hot-loader';
const element = <Component />;
areComponentsEqual(element.type, Component); // true

Another way - compare "rendered" element type

const element = <Component />;
console.log(element.type === <Component />.type); // true

// better - precache rendered type
const element = <Component />;
const ComponentType = <Component />.type;
console.log(element.type === ComponentType); // true

But you might have to provide all required props. See original issue. This is most reliable way to compare components, but it will not work with required props.

Another way - compare Component name.

Not all components have a name. In production displayName could not exists.

const element = <Component />;
console.log(element.displayName === 'Component'); // true

This is something we did not solve yet. Cold API could help keep original types.

Webpack ExtractTextPlugin

webpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development:

new ExtractTextPlugin({
  filename: 'styles/[name].[contenthash].css',
  disable: NODE_ENV !== 'production',
});

Disabling a type change ( ❄️ )

It is possible to disable React-Hot-Loader for a specific component, especially to enable common way to type comparison. See #991 for the idea behind ⛄️ , and #304 about "type comparison" problem.

import { cold } from 'react-hot-loader';

cold(SomeComponent) // this component will ignored by React-Hot-Loader
<SomeComponent />.type === SomeComponent // true

If you will update cold component React-Hot-Loader will complain (on error level), and then React will cold-replace Component with a internal state lose.

Reach-Hot-Loader: cold element got updated

Disabling a type change for all node_modules

You may cold all components from node_modules. This will not work for HOC(like Redux) or dynamically created Components, but might help in most of situations, when type changes are not welcomed, and modules are not expected to change.

import { setConfig, cold } from 'react-hot-loader';
setConfig({
  onComponentRegister: (type, name, file) => file.indexOf('node_modules') > 0 && cold(type),

  // some components are not visible as top level variables,
  // thus its not known where they were created
  onComponentCreate: (type, name) => name.indexOf('styled') > 0 && cold(type),
});

! To be able to "cold" components from 'node_modules' you have to apply babel to node_modules, while this folder is usually excluded. You may add one more babel-loader, with only one React-Hot-Loader plugin inside to solve this. Consider using webpack-loader for this.

React-Hooks

React hooks are not really supported by React-Hot-Loader. Mostly due to our internal processes of re-rendering React Tree, which is required to reconcile an updated application before React will try to rerender it, and fail to do that, obviously.

  • hooks should work for versions 4.6.0 and above (pureSFC is enabled by default).
  • hooks will produce errors on every hot-update without patches to react-dom.
  • hooks may loss the state without patches to react-dom.
  • hooks does not support adding new hooks on the fly
  • change in hooks for a mounted components will cause a runtime exception, and a retry button (at the nearest class component) will be shown. Pressing a retry button will basically remount tree branch.

To mitigate any hook-related issues (and disable their hot-reloadability) - cold them.

  • cold components using hooks.
import { setConfig, cold } from 'react-hot-loader';
setConfig({
  onComponentCreate: (type, name) =>
    (String(type).indexOf('useState') > 0 || String(type).indexOf('useEffect') > 0) && cold(type),
});

API

hot(Component, options)

Mark a component as hot.

Babel plugin

Right now babel plugin has only one option, enabled by default.

  • safetyNet - will help you properly setup ReactHotLoader.

You may disable it to get more control on the module execution order.

//.babelrc
{
    "plugins": [
        [
            "react-hot-loader/babel",
            {
            "safetyNet": false
            }
        ]
    ]
}

Important

!! Use hot only for module exports, not for module imports. !!

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

const App = () => 'Hello World!';

export default hot(App);

Keep in mind - by importing react-hot-loader/root you are setting up a boundary for update event propagation.

The higher(in module hierarchy) you have it - the more stuff would be updated on Hot Module Replacement.

To make RHL more reliable and safe, please place hot below (ie somewhere in imported modules):

  • react-dom
  • redux store creation
  • any data, you want to preserve between updates
  • big libraries

You may(but it's not required) place hot to the every route/page/feature/lazy chunk, thus make updates more scoped.

You don't need to wrap every component with hot, application work work fine with a single one.

(old)hot(module, options)(Component, options)

Mark a component as hot. The "new" hot is just hidding the first part - hot(module), giving you only the second (App). The "new" hot is using old API.

import { hot } from 'react-hot-loader';

const App = () => 'Hello World!';

export default hot(module)(App);

AppContainer

Mark application as hot reloadable. (Prefer using hot helper, see below for migration details).

This low-level approach lets you make **hot **imports__, not exports.

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './containers/App';

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root'),
  );
};

render(App);

// webpack Hot Module Replacement API
if (module.hot) {
  // keep in mind - here you are configuring HMR to accept CHILDREN MODULE
  // while `hot` would configure HMR for the CURRENT module
  module.hot.accept('./containers/App', () => {
    // if you are using harmony modules ({modules:false})
    render(App);
    // in all other cases - re-require App manually
    render(require('./containers/App'));
  });
}

areComponentsEqual(Component1, Component2)

Test if two components have the same type.

import { areComponentsEqual } from 'react-hot-loader';
import Component1 from './Component1';
import Component2 from './Component2';

areComponentsEqual(Component1, Component2); // true or false

setConfig(config)

Set a new configuration for React Hot Loader.

Available options are:

  • logLevel: specify log level, default to "error", available values are: ['debug', 'log', 'warn', 'error']
  • pureSFC: enable Stateless Functional Component. If disabled they will be converted to React Components. Default value: false.
  • ignoreSFC: skip "patch" for SFC. "Hot loading" could still work, with webpack-patch present
  • pureRender: do not amend render method of any component.
  • for the rest see index.d.ts.
// rhlConfig.js
import { setConfig } from 'react-hot-loader';

setConfig({ logLevel: 'debug' });

It is important to set configuration before any other action will take a place

// index.js
import './rhlConfig' // <-- extract configuration to a separate file, and import it in the beggining
import React from 'react'
....

Migrating from v3

AppContainer vs hot

Prior v4 the right way to setup React Hot Loader was to wrap your Application with AppContainer, set setup module acceptance by yourself. This approach is still valid but only for advanced use cases, prefer using hot helper.

React Hot Loader v3:

// App.js
import React from 'react';

const App = () => <div>Hello world!</div>;

export default App;
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './containers/App';

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root'),
  );
};

render(App);

// webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => {
    // if you are using harmony modules ({modules:false})
    render(App);
    // in all other cases - re-require App manually
    render(require('./containers/App'));
  });
}

React Hot Loader v4:

// App.js
import React from 'react';
import { hot } from 'react-hot-loader';

const App = () => <div>Hello world!</div>;

export default hot(module)(App);
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';

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

Patch is optional

Since 4.0 till 4.8

Code is automatically patched, you can safely remove react-hot-loader/patch from your webpack config, if react-hot-loader is required before React in any other way.

Error Boundary is inside every component

Since 4.5.4

On Hot Module Update we will inject componentDidCatch and a special render to every Class-based component you have, making Error Boundaries more local.

After update we will remove all sugar, keeping only Boundaries you've created.

You can provide your own errorReporter, via setConfig({errorReporter}) or opt-out from root ErrorBoundaries setting errorBoundary={false} prop on AppContainer or hot. However - this option affects only SFC behavior, and any ClassComponent would boundary itself.

import { setConfig } from 'react-hot-loader';
import ErrorBoundary from './ErrorBoundary';

// ErrorBoundary will be given error and errorInfo prop.
setConfig({ errorReporter: ErrorBoundary });

If errorReporter is not set - full screen error overlay would be shown.

Setting global Error Reporter

Global Error Reporter would, created a fixed overlay on top the page, would be used to display errors, not handled by errorReporter, and any HMR error.

You may change, or disable this global error overlay

// to disable
setConfig({ ErrorOverlay: () => null });

// to change
setConfig({ ErrorOverlay: MyErrorOverlay });

The UX of existing overlay is a subject to change, and we are open to any proposals.

Known limitations and side effects

Note about hot

hot accepts only React Component (Stateful or Stateless), resulting the HotExported variant of it. The hot function will setup current module to self-accept itself on reload, and will ignore all the changes, made for non-React components. You may mark as many modules as you want. But HotExportedComponent should be the only used export of a hot-module.

Note: Please note how often we have used exported keyword. hot is for exports.

Note: Does nothing in production mode, just passes App through.

New Components keep executing the old code

There is no way to hot-update constructor code, as result even new components will be born as the first ones, and then grow into the last ones. As of today, this issue cannot be solved.

Troubleshooting

If it doesn't work, in 99% of cases it's a configuration issue. A missing option, a wrong path or port. webpack is very strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out examples, bit by bit.

If something doesn't work, in 99% of cases it's an issue with your code. The Component didn't get registered, due to HOC or Decorator around it, which is making it invisible to the Babel plugin or webpack loader.

We're also gathering Troubleshooting Recipes so send a PR if you have a lesson to share!

Switch into debug mode

Debug mode adds additional warnings and can tells you why React Hot Loader is not working properly in your application.

import { setConfig } from 'react-hot-loader';
setConfig({ logLevel: 'debug' });

Contributors

This project exists thanks to all the people who contribute. Contribute. contributors

Backers

Thank you to all our backers! 🙏 Become a backer backers

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor

License

MIT

Comments
  • React Hot Loader 3

    React Hot Loader 3

    Work in progress. (We are skipping 2 because the approach is way too different from 2 alpha which went nowhere).

    Some info here: https://github.com/gaearon/react-hot-boilerplate/pull/61

    opened by gaearon 78
  • [React Hooks] Incompatibility with react-hot-loader

    [React Hooks] Incompatibility with react-hot-loader

    Description

    The new react hooks API does not work with react-hot-loader. Using the example in my app with export default hot(module)(App); at the bottom of app.js, the following error occurs:

    Expected behavior

    Should work.

    Actual behavior

    Uncaught Error: Hooks can only be called inside the body of a function component.
    

    Reproducible Demo

    Dunno of a demo is needed, just ping me if you need one.

    bug discussion 
    opened by bkniffler 76
  • Element type comparing

    Element type comparing

    It seems like with react-hot-loader@3 it's not possible to check element type for imported components:

    const element = <ImportedComponent />
    console.log(element.type === ImportedComponent)
    

    Logs false for me. Is this a bug or something that should not be supported?

    enhancement 
    opened by Mistereo 76
  • Support React 16.3

    Support React 16.3

    Currently, we rely on componentWillReceiveProps to perform sync update and sync forceUpdate. So - this method does not exist anymore.

    We have 2 options: 1 - rely on subrender, ie async updates. It is a dev mode, nobody cares about double rendering on rare hot updates. Thus remove AppContainer completely. This will also solve 2 - find another way. But I don't see any.

    enhancement WIP 
    opened by theKashey 46
  • Get this working properly with React Router

    Get this working properly with React Router

    There is a hacky workaround in https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-211504531 but it’s way too hacky. We should either implement this in https://github.com/reactjs/react-router/issues/2182, or include some sort of hacky workaround right in this project so at least it’s on us. Special casing React Router doesn’t sound very great but it’s hugely popular and we can’t just not support it.

    • [x] Document hacky workaround
    • [x] Add hacky workaround so it works out of the box (3.0.0-alpha.12)
    • [x] Figure out proper support out of the box
    • [ ] Check how it works with HOCs (http://stackoverflow.com/q/36617240/458193)
    • [ ] Check Relay integration (https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-211539886)
    enhancement 
    opened by gaearon 46
  • Hot reload not working with webpack2 and react-hot-loader3

    Hot reload not working with webpack2 and react-hot-loader3

    I updated my small project to webpack2 and switched to react-hot-loader3 but now everytime I try to change a react component I just get the following output:

    [HMR] Waiting for update signal from WDS...
    app-7a88884….js:39514 [WDS] Hot Module Replacement enabled.
    2app-7a88884….js:39514 [WDS] App updated. Recompiling...
    app-7a88884….js:39514 [WDS] App hot update...
    app-7a88884….js:39656 [HMR] Checking for updates on the server...
    app-7a88884….js:39621 Ignored an update to unaccepted module 530 -> 535 -> 514 -> 1290
    app-7a88884….js:96157 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
    app-7a88884….js:96159 [HMR]  - 530
    app-7a88884….js:96164 [HMR] Nothing hot updated.
    app-7a88884….js:39637 [HMR] App is up to date.
    

    Right now it does not even try do a full reload anymore. The Source code can be found here: https://gitlab.fkrauthan.de/simply-sailing/west-coast-sailing-club

    Just run npm install in the web-ui folder and after that run npm start webpack:development

    The file I try to change is in web-ui/src/common/modules/static/components/HomePage.js

    opened by fkrauthan 45
  • Babel 7 Support

    Babel 7 Support

    Hi - I don't know if there is a plan to support babel 7, I'm sure it's quite a lot of work but it currently errors when I try it with webpack 4 I get ReferenceError: [BABEL] app/app.js: Unknown option: .visitor..

    When using babel-upgrade --write I get the following changes:

         "reload"
       ],
       "devDependencies": {
    -    "babel-cli": "^6.7.5",
    -    "babel-core": "^6.26.3",
    +    "@babel/cli": "7.0.0-beta.54",
    +    "@babel/core": "7.0.0-beta.54",
    +    "@babel/plugin-external-helpers": "7.0.0-beta.54",
    +    "@babel/plugin-proposal-class-properties": "7.0.0-beta.54",
    +    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.54",
    +    "@babel/preset-env": "7.0.0-beta.54",
    +    "@babel/preset-flow": "7.0.0-beta.54",
    +    "@babel/preset-react": "7.0.0-beta.54",
    +    "babel-core": "^7.0.0-bridge.0",
         "babel-eslint": "^8.2.3",
         "babel-jest": "^22.4.3",
         "babel-plugin-dynamic-import-node": "^1.2.0",
    -    "babel-plugin-external-helpers": "^6.22.0",
    -    "babel-plugin-transform-class-properties": "^6.24.1",
    -    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    -    "babel-preset-env": "^1.6.0",
    -    "babel-preset-react": "^6.5.0",
         "codecov": "^3.0.1",
         "conventional-github-releaser": "^2.0.2",
         "create-react-class": "^15.6.3",
    @@ -81,7 +83,7 @@
         "recompose": "^0.27.0",
         "rimraf": "^2.5.2",
         "rollup": "^0.58.2",
    -    "rollup-plugin-babel": "^3.0.4",
    +    "rollup-plugin-babel": "^4.0.0-beta.2",
         "rollup-plugin-commonjs": "^9.1.3",
         "rollup-plugin-json": "^2.3.0",
         "rollup-plugin-node-resolve": "^3.3.0",
    @@ -93,6 +95,7 @@
         "react": "^15.0.0 || ^16.0.0"
       },
       "dependencies": {
    +    "@babel/preset-flow": "7.0.0-beta.54",
         "fast-levenshtein": "^2.0.6",
         "global": "^4.3.0",
         "hoist-non-react-statics": "^2.5.0",
    
    

    When running npm build I cannot get past the following error (haven't had a lot of time to investigate yet) but certainly, we might need to update a variety of things to properly handle the API changes.

    [!] (babel plugin) Error: Cannot find module 'babel-plugin-external-helpers' from '/home/sam/src/github.com/gaearon/react-hot-loader'
    - Did you mean "@babel/external-helpers"?
    src/index.dev.js
    Error: Cannot find module 'babel-plugin-external-helpers' from '/home/sam/src/github.com/gaearon/react-hot-loader'
    - Did you mean "@babel/external-helpers"?
        at Function.module.exports [as sync] (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/resolve/lib/sync.js:43:15)
        at resolveStandardizedName (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
        at resolvePlugin (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
        at loadPlugin (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
        at createDescriptor (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:114:9)
        at items.map (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
        at Array.map (<anonymous>)
        at createDescriptors (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
        at createPluginDescriptors (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:65:10)
        at alias (/home/sam/src/github.com/gaearon/react-hot-loader/node_modules/@babel/core/lib/config/config-descriptors.js:57:49)
    
    

    Would be really great if we could begin moving towards babel 7 support. I don't know what it would entail yet - and if all the deps have a working version for that, but certainly it'll only be more important so let me know what your thoughts are.

    opened by SamMorrowDrums 42
  • Support decorators

    Support decorators

    (This may or may not be something you want to address with v3; if not, please just close this)

    Our project uses decorators to connect components to the redux store. I think this is fairly common. For example, you see it a lot in erikras/react-redux-universal-hot-example, which uses Babel 6 and the "transform-decorators-legacy" Babel plugin, since Babel has decided to postpone decorator support until its more mature. For example:

    https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/containers/Chat/Chat.js#L4

    This worked fine with v2, but with v3 components that are decorated like this seem to lose their internal state when they're hot-reloaded.

    If you want to look at this, let me know and I'll put together a sample repo that shows the problem. Thanks so much for your work on this! It's great to see all the activity on this project right now.

    best, Zach

    enhancement 
    opened by zdavis 42
  • Hot loader bundled in production

    Hot loader bundled in production

    Description

    All the assets from react-hot-loader seems to bundle in production builds. I might have misinterpreted it but they should be omitted right?

    Expected behavior

    Production build without ´redbox-react´, react-proxy etc

    Actual behavior

    ´redbox-react´, react-proxy get bundled in production build image

    Environment

    React Hot Loader version: v3.0.0-beta.7

    Run these commands in the project folder and fill in their results:

    1. node -v: 8.1.0
    2. npm -v: 5.0.3

    Then, specify:

    1. Operating system: MacOS
    2. Browser and version: Chrome 59

    Reproducible Demo

    https://github.com/alexandernanberg/minimal-react-boilerplate

    In webpack.config.js add webpack-bundle-analyzer again, which is currently out commented

    Run yarn build and look at the outout from the bundle analyzer

    opened by alexandernanberg 34
  • Reloading entire tree vs changed component

    Reloading entire tree vs changed component

    If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

    Description

    What you are reporting: reloads entire tree vs changed component

    Expected behavior

    What you think should happen: like prior version should only reload changed component

    Actual behavior

    What actually happens: reloads entire tree

    as seen. when only when only EditorForm.js was changed

    [WDS] App updated. Recompiling...
    client:40 [WDS] App hot update...
    only-dev-server.js:59 [HMR] Checking for updates on the server...
    log-apply-result.js:20 [HMR] Updated modules:
    log-apply-result.js:22 [HMR]  - ./app/availability/containers/EditorForm.js
    log-apply-result.js:22 [HMR]  - ./app/availability/components/Editor.js
    log-apply-result.js:22 [HMR]  - ./app/availability/index.js
    log-apply-result.js:22 [HMR]  - ./app/routes.js
    log-apply-result.js:22 [HMR]  - ./app/root.js
    only-dev-server.js:40 [HMR] App is up to date.
    

    Environment

    React Hot Loader version:

    Run these commands in the project folder and fill in their results:

    1. node -v: v6.9.3
    2. npm -v: v4.4.0

    Then, specify:

    1. Operating system: OSX
    2. Browser and version: Chome Latest

    Configs https://gist.github.com/th3fallen/dc19cac7c09482ec5ed28e743d05ccd6

    I feel like it's due to the router but in using the babel plugin i'd expect it know be able to sidestep that?

    bug 
    opened by th3fallen 34
  • "Can't make class hot reloadable due to being read-only”

    I'm getting the "Can't make class hot reloadable due to being read-only” warning on three of my components. ~~Considering that these are ordinary components, I am a bit confused by this error; it seems random.~~ Any ideas what could have gone wrong?

    Here is an example of one such component that is throwing the error. The other two components are reasonably similar to this one:

    import React, { Component } from 'react';
    import { View } from 'components/layout';
    import { RegisterForm } from './components';
    
    const viewConfig = {
      ...
    };
    
    export default class RegisterView extends Component {
      render() {
        return (
          <View {...viewConfig}>
            <RegisterForm />
          </View>
        );
      }
    }
    
    

    EDIT:

    Looks like this is connected to #72?

    opened by pburtchaell 34
  • chore(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/electron-typescript

    chore(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/electron-typescript

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/parcel

    chore(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/parcel

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump express from 4.17.1 to 4.18.2 in /examples/electron-typescript

    chore(deps): bump express from 4.17.1 to 4.18.2 in /examples/electron-typescript

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump qs from 6.5.2 to 6.5.3 in /examples/electron-typescript

    chore(deps): bump qs from 6.5.2 to 6.5.3 in /examples/electron-typescript

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump qs from 6.5.2 to 6.5.3 in /examples/parcel

    chore(deps): bump qs from 6.5.2 to 6.5.3 in /examples/parcel

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump express from 4.17.1 to 4.18.2 in /examples/typescript

    chore(deps): bump express from 4.17.1 to 4.18.2 in /examples/typescript

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v4.13.0)
⚡ Something like react server components, but web workers instead of a server

react-worker-components-plugin ⚡ something like react server components, but web workers instead of a server react-worker-components-plugin is a plugi

M. Bagher Abiat 101 Nov 14, 2022
Enable Fast Refresh for remote data in NextJS.

next-remote-refresh Utilize Fast Refresh for remote data in NextJS. ⚠️ This solution relies on undocumented APIs and may break in future NextJS update

Travis Arnold 153 Dec 23, 2022
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop Chat Loop is a highly scalable, low cost and high performant chat application built on AWS and React leveraging GraphQL subscriptions for re

Smile Gupta 24 Jun 20, 2022
A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere

@yomo/react-cursor-chat ?? Introduction A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real

YoMo 84 Nov 17, 2022
A simple project to refresh on the usage of js canvas and getContext('2d') to create four interactive squares on the canvas when hovered changes color.

A simple project to refresh on the usage of js canvas and getContext('2d') to create four interactive squares on the canvas when hovered changes color. Can also be clicked to work on mobile devices.

DandaIT04 1 Jan 1, 2022
Application that show the survey results for backend frameworks to the user in real time.

.Net5 Hangfire and SignalR Survey Application Application that show the survey results for backend frameworks to the user in real time. The hangfire j

Cihat Girgin 4 Dec 17, 2021
Real-time covid data in Brazil states.

Brazil Covid Data Brazil Covid Data is a web application that allows you to see information about the pandemics on your state just by hovering it on t

Caio Lima 5 Feb 15, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
Migrating from 🅰️ to ⚛️ ? 👉 Use React components in Angular, and vice versa

ngx-react allows you to seamlessy use ⚛️ React and ??️ Angular components together. ?? This package will be the a perfect match to migrate from Angula

Olivier Guimbal 9 Apr 14, 2022
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Levy Mateus Macedo 2 Mar 29, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
Real state property listing app using next.js , chakra.ui, SCSS

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

null 1 Dec 19, 2021
Space Traveller hub is a web application that works with the real live data from the SpaceX API

Space Traveller hub is a web application that works with the real live data from the SpaceX API. It's a web application for a company that provides commercial and scientific space travel services.

Roland MWEZE 3 Feb 8, 2022
O Aluracord é um clone personalizado do discord com chat em tempo real.

Aluracord O Aluracord é um clone personalizado do Discord durante a Imersão React da Alura. Desde o início da imersão meu objetivo era ir além dela, e

Heitor Lisboa 11 Dec 15, 2022