react-rails icon indicating copy to clipboard operation
react-rails copied to clipboard

How to make prerender to ignore imported CSS.

Open 6temes opened this issue 4 years ago • 0 comments

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

6temes avatar Feb 08 '21 02:02 6temes