Why are my JS UI Libraries not being loaded/imported?

[christopheragnus]

Help us help you! Have you looked for similar issues? Do you have reproduction steps? Contributing Guide

Steps to reproduce

1. Added react-rails + webpacker to my Rails project and followed installation guide on Readme
2. Run rails g react:component NewTeam to generate new component
3. yarn add antd to add Ant Design, a React UI library to package.json & node_modules.
4. Import components using ES6 object destructing: import { Button, Typography } from "antd";
5. Add to Rails views <%= react_component("NewTeam") %>

(Guidelines for creating a bug report are available here)

Expected behavior:

There are no Webpack compilation errors so the specified UI components should show up.

Actual behavior

The UI components do not show up but render the browser default buttons. Inspecting the source shows the correct class.

System configuration

Sprockets or Webpacker version: 4.0.2 React-Rails version: 2.5.0 Rect_UJS version: Rails version: 5.2.3 Ruby version: 2.5.1

---

My NewTeam.js js file:

import React, { Component } from "react";
import { Button, Typography } from "antd";
import PropTypes from "prop-types";

const { Title } = Typography;

class NewTeam extends Component {
  constructor() {
    super();
    this.state = {
      visible: false
    };
  }

  changeVisibility = () => {
    this.setState(prevState => ({
      visible: !prevState.visible
    }));
  };

  render() {
    const { visible } = this.state;
    return (
      <div>
        {visible ? (
          <div>
            <div class="content">
              <Title level={3}>Invite users</Title>
              <p>
                Invite users to create an account and join this team. Each user
                will be sent a confirmation email in which they can supply their
                own unique password.
              </p>
            </div>

            <div class="field">
              <div class="control">
                <label class="label">Name</label>
                <input type="text" class="input" />
              </div>
            </div>

            <div class="field">
              <div class="control">
                <label class="label">Email</label>
                <input type="text" class="input" />
              </div>
            </div>

            <input type="hidden" value="<%= current_user.id %>" />

            <div class="field">
              <div class="control">
                <button class="button is-small">Remove</button>
              </div>
            </div>

            <div class="field">
              <div class="control">
                <button class="button is-link">Add User</button>
              </div>
            </div>

            <Button type="primary" onClick={this.changeVisibility}>
              Invite New User
            </Button>
          </div>
        ) : (
          <Button type="primary" onClick={this.changeVisibility}>
            Invite New User
          </Button>
        )}
      </div>
    );
  }
}

export default NewTeam;

[BookOfGreg]

@christopheragnus Webpacker 4 has a new option called

# Extract and emit a css file
extract_css: true

It's false by default. Can you set it to true and see if that changes anything? If not I'll look into this in more detail later.

[edelgado]

@BookOfGreg in this scenario, is it possible to use a library-supplied component directly in a Rails view? E.g:

<%= react_component("Button") %>

Which comes from antd. I've tried creating a Webpacker pack .js file with:

import { Button } from "antd";

And using it in my view via the javascript_pack_tag view helper. But react_component cannot find the Button component: [react-rails] Cannot find component: 'Button' for element...

I'm trying to avoid creating a wrapper component in Rails just to expose the already-existing component.

[ksouthworth]

I'm also wondering how to do this...

@BookOfGreg in this scenario, is it possible to use a library-supplied component directly in a Rails view? E.g:

<%= react_component("Button") %>

Which comes from antd. I've tried creating a Webpacker pack .js file with:

import { Button } from "antd";

And using it in my view via the javascript_pack_tag view helper. But react_component cannot find the Button component: [react-rails] Cannot find component: 'Button' for element...

I'm trying to avoid creating a wrapper component in Rails just to expose the already-existing component.

[alkesh26]

@christopheragnus We have had no updates on this since 2020. Closing the issue. Feel free to reopen this.