Wrong Mapping for component name

[rapito]

Version: 5.5.2

Having a component like this:

filename: MyComponent.jsx.erb

import React, {useEffect, useState} from 'react';

export default function MyComponent({foo, bar}) {

    return (
      <h1>Foo</h1>
    );
}

makes rails-erb-loader ends up mapping it like this when webpacker compiles it:

"./MyComponent.jsx": "./app/javascript/components/shifts/MyComponent.jsx.erb",
"./MyComponent.jsx.erb": "./app/javascript/components/shifts/MyComponent.jsx.erb"

The expected output is, which is how it looks if the file name was MyComponent.jsx:

"./MyComponent": "./app/javascript/components/shifts/MyComponent.jsx",

These results in not being able to find the component when trying to do react_component 'MyComponent'

[rhys-vdw]

I think this is a problem with the way you're integrating rails-erb-loader. This is just transpiles ERB. Everything else is handled by your webpack config.

[rapito]

Hmmm, Thanks. I'm using the default configuration provided on this github. I'll try reaching the react-rails repo maintainers then.

[rapito]

@rhys-vdw and anyone interested, The issue was that I needed to add both

  extensions:
    - .jsx.erb
    - .erb

to the webpacker.yml file. Maybe this shoud be documented somewhere?

[rhys-vdw]

I've never used webpacker before, maybe you can bring this up in their issue tracker @rapito?

[rapito]

Yeah, you are right. Thanks!