

railsでreact-railsを使用しています。  
viewファイルにてview helperのreact_componentの引数に`{prerender:
true}`を渡した際に問題なくサーバーサイドレンダリングが行われ画面が表示されますが、jsファイルでstyled-
componentsをimportすると以下のようなエラーが出ます。

[code]

    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.>" when prerendering hoge with {}
    ReactDOMServerRenderer.render ((execjs):56839:21)
    
[/code]

[code]

    // アプリ/app/views/zukan/species/index.html.slim
    = react_component("hoge", {}, { prerender: true })
    
[/code]

[code]

    // アプリ/app/javascript/components/hoge.js
    import React from "react";
    import styled from "styled-components";
    
    const hoge = () => {
      return (
        <>
          <p>hogehoge</p>
          <Fuga>fugafuga</Fuga>
        </>
      );
    }
    
    const Fuga = styled.div`
      background: red;
    `
    
    export default hoge
    
[/code]

エラー内容からimportの記述の仕方が間違っているかと思いましたが、`{prerender: false}`の場合はstyled-
componentsをimportしていても問題なく画面が表示されます。  
以下設定ファイルです。

[code]

    // アプリ/app/javascript/packs/application.js
    
    import Rails from "@rails/ujs"
    import Turbolinks from "turbolinks"
    import * as ActiveStorage from "@rails/activestorage"
    import "channels"
    
    Rails.start()
    Turbolinks.start()
    ActiveStorage.start()
    // Support component names relative to this directory:
    var componentRequireContext = require.context("components", true);
    var ReactRailsUJS = require("react_ujs");
    ReactRailsUJS.useContext(componentRequireContext);
    
[/code]

[code]

    // アプリ/app/javascript/packs/server_rendering.js
    var componentRequireContext = require.context("components", true);
    var ReactRailsUJS = require("react_ujs");
    ReactRailsUJS.useContext(componentRequireContext);
    
[/code]

[code]

    # アプリ/config/webpacker.yml
    
    default: &default
      source_path: app/javascript
      source_entry_path: packs
      public_root_path: public
      public_output_path: packs
      cache_path: tmp/cache/webpacker
      webpack_compile_output: true
    
      # Additional paths webpack should lookup modules
      # ['app/assets', 'engine/foo/app/assets']
      additional_paths: []
    
      # Reload manifest.json on all requests so we reload latest compiled packs
      cache_manifest: false
    
      # Extract and emit a css file
      extract_css: false
    
      static_assets_extensions:
        - .jpg
        - .jpeg
        - .png
        - .gif
        - .tiff
        - .ico
        - .svg
        - .eot
        - .otf
        - .ttf
        - .woff
        - .woff2
    
      extensions:
        - .jsx
        - .mjs
        - .js
        - .sass
        - .scss
        - .css
        - .module.sass
        - .module.scss
        - .module.css
        - .png
        - .svg
        - .gif
        - .jpeg
        - .jpg
    
    development:
      <<: *default
      compile: true
    
      # Reference: https://webpack.js.org/configuration/dev-server/
      dev_server:
        https: false
        host: localhost
        port: 3035
        public: localhost:3035
        hmr: false
        # Inline should be set to true if using HMR
        inline: true
        overlay: true
        compress: true
        disable_host_check: true
        use_local_ip: false
        quiet: false
        pretty: false
        headers:
          'Access-Control-Allow-Origin': '*'
        watch_options:
          ignored: '**/node_modules/**'
    
    
    test:
      <<: *default
      compile: true
    
      # Compile test packs to a separate directory
      public_output_path: packs-test
    
    production:
      <<: *default
    
      # Production depends on precompilation of packs prior to booting for performance.
      compile: false
    
      # Extract and emit a css file
      extract_css: true
    
      # Cache manifest.json for performance
      cache_manifest: true
    
    
[/code]

バージョンは以下の通りです。

Ruby 2.6.3  
Rails 6.0.3.4

どうしたらstyled-componentsを使用してもサーバーサイドレンダリングが行われるでしょうか？ご教示お願いいたします！  
また、さらに必要な情報などもあれば教えていただけると幸いです。


CC BY-SA 4.0
2022-01-31T06:49:36.663
86032
2022-02-01T01:10:13.217
2022-02-01T01:10:13.217
45015
45015
question
ruby-on-rails reactjs
react-railsでstyled-componentsをimportするとサーバーサイドレンダリング(prerender: true)が出来ない。