react-rails
react-rails copied to clipboard
How to make prerender to ignore imported CSS.
Steps to reproduce
In a freshly created Rails 6.1.1 app, have a component that imports SCSS:
// app/javascript/components/MyHomePage/index.jsx
import React from 'react'
import PropTypes from 'prop-types'
import 'index.css' // Works when commenting out this line
const MyHomePage = ({ tagline }) => <>Tagline: {tagline}</>
MyHomePage.propTypes = {
tagline: PropTypes.string.isRequired,
}
export default MyHomePage
# app/javascript/components/MyHomePage/index.css
body {
background-color: #111111;
}
# app/views/my_controller/index.html.erb
<%= react_component 'MyHomePage', { tagline: 'Hi' }, { prerender: true } %>
Expected behavior
Should prerender the component without errors.
Actual behavior
It fails with this error:
React::ServerRendering::PrerenderError at /deals/a/files
Encountered error "#<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.>"
System configuration
Sprockets or Webpacker version: React-Rails version: 2.6.1 Rect_UJS version: Rails version: 6.1.1 Ruby version: 2.7.2