Cannot find component (Rails 5.1.2, webpacker, react-rails)

[andrewcsmith]

Help us help you! Please choose one:

• My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• I have another issue to discuss.

---

Essentially the same resulting problem as #757 and #713, where including my (haml) view helper = react_component 'PerformanceRow' gives me the following error messages:

Error: Cannot find module './PerformanceRow'.
    at webpackContextResolve (application.js:4549)
    at webpackContext (application.js:4544)
    at eval (fromRequireContext.js?f05c:13)
    at Object.eval [as getConstructor] (fromRequireContextWithGlobalFallback.js?7c97:13)
    at Object.mountComponents (index.js?0542:82)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js?0542:124)
    at HTMLDocument.dispatch (event.js?268c:338)
    at HTMLDocument.elemData.handle (event.js?268c:146)

fromRequireContextWithGlobalFallback.js?7c97:20 ReferenceError: PerformanceRow is not defined
    at eval (eval at module.exports (fromGlobal.js?7c2e:22), <anonymous>:1:1)
    at module.exports (fromGlobal.js?7c2e:13)
    at Object.eval [as getConstructor] (fromRequireContextWithGlobalFallback.js?7c97:17)
    at Object.mountComponents (index.js?0542:82)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js?0542:124)
    at HTMLDocument.dispatch (event.js?268c:338)
    at HTMLDocument.elemData.handle (event.js?268c:146)

index.js?0542:89 [react-rails] Cannot find component: 'PerformanceRow' for element <div data-react-class=​"PerformanceRow" data-react-props=​"{"id":​5}​">​</div>​

index.js?0542:91 Uncaught Error: Cannot find component: 'PerformanceRow'. Make sure your component is available to render.
    at Object.mountComponents (index.js?0542:91)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js?0542:124)
    at HTMLDocument.dispatch (event.js?268c:338)
    at HTMLDocument.elemData.handle (event.js?268c:146)

I've tried the following:

1. Rolling back uglifier to 3.0
2. Moving the ReactRailsUJS both above and below import "turbolinks" and javascript_include_tag "application.js" in my main views/layouts/application.html.haml, and removing/adding ReactRailsUJS.detectEvents() in app/javascript/packs/application.js.
3. Adding console.log(componentRequireContext.keys()) above the ReactRailsUJS initializer, which prints ["./PerformanceRow.jsx"] in my Chrome console.

Here's my directory structure:

app/javascript/packs/
├── application.js
├── hello_react.jsx
└── server_rendering.js

app/javascript/components/
└── PerformanceRow.jsx

And some code:

// app/javascript/packs/application.js

import ReactRailsUJS from 'react_ujs'

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true, /\.jsx?$/)
// => prints ["./PerformanceRow.jsx"] in Chrome console
console.log(componentRequireContext.keys());
ReactRailsUJS.useContext(componentRequireContext)

// app/javascript/components/PerformanceRow.jsx

import React, { Component } from "react"
import ReactDOM from "react-dom"

class PerformanceRow extends Component {
  render() {
    return (
      <tr className="performance">
        <td>HEY THERE</td>
        <td />
        <td />
        <td>Delete</td>
      </tr>
    )
  }
}

export default PerformanceRow;

-# Extract from app/views/performances/_embedded_form.html.haml
    = react_component 'PerformanceRow'

As far as I can tell, I've double-checked capitalization and name-mangling, and componentRequireContext can definitely find the correct file. However, PerformanceRow still seems to be unreachable. I can also access ReactRailsUJS in the global context of the Chrome console.

I should also mention that the default hello_react.jsx works just fine, but that the problem here seems to lie in ReactRailsUJS and the use of the components/ directory. Tried to trim things as best I could, but let me know if I need to include any other information.

[rmosolgo]

Hi! Thanks for the great bug report.

What if you add .jsx to your react_component call, for example:

react_component 'PerformanceRow.jsx'

?

I think webpack does some magic with the .js file extension, but I bet that it works differently with .jsx, does that work any better?

[andrewcsmith]

Thanks for the quick reply!

That does not work. It changes the last error to "Cannot find component: 'PerformanceRow.jsx'" but otherwise it's the same. I also tried running PerformanceRow.jsx through babeljs.io and saving it to app/javascript/components/PerformanceRow.js but that didn't solve it either.

[rmosolgo]

Can you try accessing the componentRequireContext directly to make sure it's working?

Add to packs/application.js

// Attach it to the window: 
window.componentRequireContext = componentRequireContext

Then in Chrome console, access the globally-available componentRequireContext and try to require the module:

window.componentRequireContext 
// => should return the require context 
window.componentRequireContext.require("./PerformanceRow")
// does that return the react component? 

If that doesn't return the react component, try a few variations, just in case a file extension might help.

If that does return the component, then there must be some error in react-rails code which is messing up that lookup!

[andrewcsmith]

Yep – here's my Chrome console:

window.componentRequireContext("./PerformanceRow.jsx").default
// -> function PerformanceRow() {
//        _classCallCheck(this, PerformanceRow);
//        [... more babel-compiled code...]

[andrewcsmith]

Oh, however, I do have to add the extension to get window.componentRequireContext to work.

The original error message from the helper is Cannot find module './PerformanceRow'., and when I try window.ComponentRequireContext("./PerformanceRow") I get the exact same error message.

This leads me to believe that, somewhere, react-rails is translating react_component 'PerformanceRow' into a call to the module without any extension. When I try react_component 'PerformanceRow.jsx', it thinks that .jsx is a member of module PerformanceRow and still doesn't correct the filename. (That's just my assumption - might be something else of course.)

[rmosolgo]

it thinks that .jsx is a member of module PerformanceRow

you're so right about that!

Here's that lookup code:

https://github.com/reactjs/react-rails/blob/master/react_ujs/src/getConstructor/fromRequireContext.js#L9

I think we could just treat .jsx as a special case, that way .jsx would Just Work. What do you think?

[andrewcsmith]

I think requiring react_component "MyComponent.jsx" instead of just react_component "MyComponent" could run into confusion (thinking about people copy-pasting from tutorials, stackoverflow, etc), and probably will breed lots of little spammy issues. Is there a way to make react_component "MyComponent" find the .jsx file, so that (most) tutorial code would still work as-written?

[rmosolgo]

I'm not sure how to tell if the .jsx is needed ahead of time, so the best i can think of is

try {
  // Load by name 
} catch (err) { 
  // Load by name+.jsx 
}

?

[andrewcsmith]

Yep, that makes sense to me. In the call to reqctx, right?

[rmosolgo]

yep, that's it! if it throws an error, i guess we just try again with a .jsx.

it's too bad, thinking how that will add some latency to every single page load.

I can think of two ways to address that:

• Keep an in-memory cache of { whatWasInTheDom => whatWeUsedWithWebpack } so that we can keep track of whether the .jsx was needed or not.
• Support .jsx in react_component so that perf-conscious users can hardcode it

Or, leave it for later , which is also fine. apparently not too many folks have come across this bug 😬

[andrewcsmith]

Excellent! I've opened a PR #759 to fix this. This fix solves the issue on my local machine.

I agree about the performance thing though. I'm not particularly savvy with js performance optimization, or with the react/webpack pipeline, so I'm not really the one to do that. But thanks for your help and I'm happy to test future things with this same app if needed.

[chrisjingram]

If you have this issue, and the above did not solve it, it may be because you previously installed react-rails to work with the rails asset pipeline, and then installed webpacker later.

Removing //= require react and //= require react_ujs from application.js or application.js.coffee fixed this for me.

I'm assuming that having react and especially react_ujs in the asset pipeline meant that ReactRailsUJS was being set up to expect components also from the asset pipeline, and that setup was taking precedence over the webpacker setup.

[andrewcsmith]

I installed both at the same time, and didn't have either in the asset pipeline. In the original problem, react-rails was finding components with .js extensions, just not .jsx extensions. Wonder why that would do it.