0

I'm trying to integrate react-rails 2.6.1 within my rails 4.2.11 app.

initially started with webpacker but it's giving me troubles with the actual prod deployment, so I removed webpacker and just pack stuff with sprockets 3.7.2.

The page is loaded properly but the react_component is not shown.

in the html source it's just rendered as a div:

<div data-react-class="Sidebar" data-react-props="..." data-react-cache-id="Sidebar-0"></div>

but nothing is shown.

in the console I can see:

Uncaught ReferenceError: require is not defined

which causes later on:

Cannot find component: 'Sidebar'. Make sure your component is available to render.

this is the definition of my react component:

import React from "react"

class Sidebar extends React.Component {
  render() {
    return (<p> hello from react </p> );
  }
}

I've tried moving imports from application.js up and down, (according to https://github.com/reactjs/react-rails/wiki/Troubleshooting) to no help.

Don Giulio
  • 2,946
  • 3
  • 43
  • 82

1 Answers1

1

Try to export your component to be able to import it

import React from "react"

class Sidebar extends React.Component {
  render() {
    return (<p> hello from react </p> );
  }
}

export default Sidebar;
Borni.Mr
  • 646
  • 3
  • 7
  • Thanks, with the export included I get in the console: `Sidebar.self.js?body=1:1 Uncaught ReferenceError: exports is not defined at Sidebar.self.js?body=1:1:23` line 1 on Sidebar.self.js contains: `Object.defineProperty(exports, "__esModule", { value: true });` – Don Giulio Feb 22 '22 at 13:48
  • it's like exports and require are in some other library, (react_ujs?) but they don't work. – Don Giulio Feb 22 '22 at 13:49
  • 1
    { "presets": [ ["env", {"modules": false} ]] } add this in your .babelrc.js – Borni.Mr Feb 22 '22 at 14:15
  • 1
    https://stackoverflow.com/questions/43042889/typescript-referenceerror-exports-is-not-defined one of this solutions should fix your issue – Borni.Mr Feb 22 '22 at 14:17
  • my .babelrc contains `{ "presets": [ "airbnb" ], "plugins": [ "add-module-exports", ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }], ], } ` changing it to: `{ "presets": [ "airbnb", ["env", {"modules": false} ] ], "plugins": [ "add-module-exports", ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }], ], }` didn't help – Don Giulio Feb 22 '22 at 14:33
  • these changes are mostly for TS, I don't have that, it's sprockets and js, removing commonjs I'm not sure how to do that, as I don't see it anywhere. I tried adding the ` ` workaround in both flavours (from that post) but no improvements – Don Giulio Feb 22 '22 at 16:38