Uncaught ReferenceError: require is not defined react-rails - reactjs

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.

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;

Related

React won't import my module "Module not found: Can't resolve "

React is not resolving my component import into my YouTubeApp.js.
It seems silly, i have other components in my react app that I'm able to import with no issues but this one in particular i can't get it imported.
Github: https://github.com/JAlonsoHdz/React_UnsplashClientApp/tree/master/src/components
Additional context, YouTubeApp.js is currently imported in my index.js with no issues. I'm using react routing imported in the index.js and links and the route links sucessfully to YouTubeApp.js. The problem arise whenver I try to import ANY component into YouTubeApp.js i get the Cannot resolve 'component name' error, without any imports the component YouTubeApp.js works fine.
I have validated the correct path, the name of the component.
YouTubeApp.js
import React from 'react';
import Other from './components/other';
class YouTubeApp extends React.Component {
render() {
return (<p>test</p>
);
}
}
export default YouTubeApp;
And this is my component I'm trying to import:
import React from 'react';
class Other extends React.Component {
render() {
return (
<div clasNames="ui container">test!</div>
);
}
}
export default Other;
I need to nest at least a few levels down more components but this issue blocking.
Looking at your GitHub repository, it appears that YouTubeApp.js and other.js are both in the "components" directory. Therefore when in YouTubeApp.js (or any other component in your "components" directory) your import should be:
import Other from './other';

"Uncaught TypeError: Super expression must either be null or a function" - based on my code, why am I getting this error?

I'm trying to setup a modal with React. I'm using code that is more or less taken from their docs. I'm not sure why I'm getting this error: "Uncaught TypeError: Super expression must either be null or a function." I've poked around and I've noticed this error usually appears when people forget to capitalize "Component" when setting up a class - class Modal extends React.Component - but that doesn't appear to be my problem.
I have React 16.6 and React-dom 16.6 as dependencies. Perhaps I don't have the most updated version of React and it's causing issues? Perhaps there is something else going on in my other files that reference this Modal that is causing the problem? Either way, I don't have a clear path to fixing this error because I don't know what is wrong, based on the error messaging in Chrome dev tools. My terminal isn't providing any error messaging either. I'm lost.
import React from "react";
import { createPortal } from "react-dom";
const modalRoot = document.getElementById("modal");
class Modal extends React.Compoment {
constructor(props) {
super(props);
this.el = document.createElement("div");
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return createPortal(this.props.children, this.el);
}
}
export default Modal;
The Modal should automatically render as soon as the application is started in the browser (yes, I'm aware that Modals can be pretty annoying for users but I'm still trying to learn how to make one on React)
class Modal extends React.Compoment, there is your error it should be Component with n

Using Intellij to create React app

I'm using Intellij IDEA Ultimate 2017
I'm creating a React app.
I have the javascript language version set to React JSX in Preferences > Languages & Frameworks.
I have restarted Intellij
I'm still getting an error 'Expecting new line or semi colon' when using 'let' in Javascript files.
How do I fix this
I'm getting the error after the let
import React, { Component } from 'react';
class Projects extends Component {
let projectItems;
}
render(); {
console.log(this.props);
return (
<div className="Projects">
My Projects
</div>
);
}
export default Projects;

"TypeError: rootElement.insertBefore is not a function" getting started with React-Handsontable

Just getting started with Handsontable. I used create-react-app and npm install --save react-handsontable.
Added a table to App.js:
import React, { Component } from 'react';
import HotTable from 'handsontable'
class App extends Component {
render() {
return (
<HotTable/>
);
}
}
export default App;
And seeing error:
TypeError: rootElement.insertBefore is not a function
node_modules/handsontable/dist/handsontable.js:8197
rootElement.insertBefore(this.container, rootElement.firstChild);
From searching the web it seems this may have something to do with load order issues, but I'm not sure what I can change.
Solution: I was importing handsontable but I should have imported react-handsontable.
import HotTable from 'react-handsontable'
This is documented correctly but I did not notice that detail.
https://github.com/handsontable/react-handsontable

How to run ES6 React app in IE9 without errors

I am working on a JS app using React 0.14 and Babel 5.8.23.
My app works fine in Chrome, with no warnings, but when I view the app in IE9 the app explodes showing:
SCRIPT5022: Exception thrown and not caught
on the line
ReactDOM.render(
When I trap the exception, it shows that it is being thrown from this code:
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
When I manually remove these throws from the generated index.js, the app proceeds normally, although I do see these warnings (possibly unrelated, and discussed at https://github.com/facebook/react/issues/4990):
Warning: MainLogo(...): React component classes must extend React.Component
All my components do extend React.Component:
import React, { Component } from 'react';
export default class MainLogo extends Component {
render() {
return (
<h1 className="logo">
<img src="/img/brand/logo.png" />
</h1>
);
}
};
Why would this _classCallCheck be being triggered in IE9, and what could I do differently to prevent it?
It turns out that the following are problems for IE9:
1.
import React, { Component } from 'react';
export default class Whatever extends Component { ...
I had to import React; and then ... extends React.Component.
2.
I had to export my connected components as non-top-level components, ie giving them a name within the file:
export class App extends React.Component {
...
}
export const AppContainer = connect(state => ({ routerState: state.router }), { pushState }) (App);
3.
I had to disable livereactload https://github.com/milankinen/livereactload, specifically removing it from .babelrc used by babel-plugin-react-transform.
Only completing ALL these steps allowed my app to run satisfactorily on IE9.

Resources