Skip to content

How to make prerender to ignore imported CSS. #1101

Open
@6temes

Description

@6temes

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions