react-rails When using `prerender` and React functional component error for `Element Type`

When using `prerender` and React functional component error for `Element Type`

Open bessfernandez opened this issue 5 years ago • 2 comments

Steps to reproduce

Configure webpacker to use TypeScript (default setup)
Create React Functional Component and add to slim template = react_component("HelloWorld", { name: 'my name'}, { prerender: true } )
Render component

FYI Functional component is:

import * as React from "react";

interface Props {
  name: string;
}

const HelloWorld: React.FunctionComponent<Props> = ({
  name = "Default name"
}) => {
  return (
    <h3>
      Hello from React and{" "}{name}!
    </h3>
  );
};

export default HelloWorld;

Expected behavior

Should display component rendered server side. Without prerender the component renders as expected.

Actual behavior

Rails Error that Element Type is invalid

<ExecJS::ProgramError: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.>" when prerendering HelloWorld with {"name":"my name"}

System configuration

Webpacker 4.2.2
React-Rails 2.6.1
Rect-UJS version ^2.6.1
Ruby Version 2.4.9
Rails Version 4.2.11

When attempting to render a React Functional component in a slim template prerendering doesn't work. Without prerender set to true the component renders as expected. Not sure if this might be a problem with TypeScript, using a React functional component, using slim instead of erb, or another library issue.