Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] "componentWillMount" warning from React Helmet

See original GitHub issue

Reporting a bug?

Whenever you use the Head component (which is basically aliased to React Helmet), React prints this warning in the console:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Move code with side effects to componentDidMount, and set initial state in the constructor.

Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: SideEffect(NullComponent)

Digging in deeper, the component in question appears to be rendered by React Helmet, and there is an open issue in that repo about this: https://github.com/nfl/react-helmet/issues/465

This package doesn’t seem to be very actively maintained - there’s no maintainer comment on that issue from August 9, and the last commit on the master branch was May 2. Because of that, it might be valuable to move away from it, maybe to react-helmet-async as a couple others have mentioned in that thread. (and apparently has been discussed in this repo before too, in #788).

Environment

Run and copy the result of:

npx envinfo --system --npmPackages react* --binaries --npmGlobalPackages react* --browsers

here:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 62.83 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 77.0.3865.90
    Firefox Developer Edition: 70.0
    Safari: 13.0.2
  npmPackages:
    react: ^16.9.0 => 16.10.2
    react-dom: ^16.9.0 => 16.10.2
    react-static: ^7.2.0 => 7.2.2
    react-static-plugin-reach-router: ^7.2.0 => 7.2.2
    react-static-plugin-sitemap: ^7.2.0 => 7.2.2
    react-static-plugin-source-filesystem: ^7.2.0 => 7.2.2

of course include any other package versions here if relevant.

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

Start a new project with the “basic” template (npx react-static create)
In src/pages/about.js, add a <Head> component:

import React from 'react';
import {Head} from 'react-static';

export default () => {
  return (
    <div>
      <Head>
        <title>About Us</title>
      </Head>
      <p>React Static is a progressive static site generator for React.</p>
    </div>
  );
};

Navigate to the “About” page on the site and check the Console

Expected Behavior

There shouldn’t be any React warnings in the console - not only are they distracting, but they’re a sign that a future major release of React will break functionality.

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

agonzalezcrcommented, Feb 25, 2020

is there a way to get rid of this issue? Any suggestions or alternate packages?

1reaction

SleeplessBytecommented, Oct 15, 2019

We’ll move away from this package, but the warning is “moot”. It happens during pre-render, and then we strip the problematic code and replace it with our own already. We have indeed until 17.x to make the change 😃

Top Results From Across the Web

React warning: componentWillMount has been renamed ...

To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

react-helmet throws "Warning: componentWillMount has ...

I know it's using React 15 and thus the error. But is there an alternative library that is not using React 15 methods...

How to fix "componentWillMount has been renamed"

I was using the react-helmet package, and noticed an error in my console saying: Warning: componentWillMount has been renamed, ...

warning: componentwillmount has been renamed, and is not ...

I did run the suggested npx react-codemod rename-unsafe-lifecycles, but the warning did not go away, but only changed its wording to. react-dom.development.js: ...

what to use instead of componentwillmount, react native ...

Screenshot of componentWillMount() error: Warning: componentWillMount is deprecated ... for use" in React, the culprit may be the "react-helmet" package.