TypeError: f is null - When trying to use react-web-component with Create React App base application

Open TiagoRechau opened this issue 6 years ago • 1 comments

Hi,

I'm trying to use react-web-component with Create React App to test some stuff, but I'm getting stuck right in the beggining. Am I doing something wrong?

// general
import App from './App';
import ReactWebComponent from 'react-web-component';
import React from 'react';
// styles
import './index.css';

ReactWebComponent.create(<App />, 'my-component');

Here is the generated HTML

<html lang="en"><head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/logo192.png">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
</head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <my-component></my-component> <!-- Added by me afterwards directly on the browser -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>

</body></html>

Then I get the following error on the browser console

Thanks for your help

Jan 15 '20 10:01 TiagoRechau

It seems that was caused by using functional component as the passed component to ReactWebComponent.create(). Passing a class component it works fine.

Jan 15 '20 10:01 TiagoRechau