I need to add react-rails to my rails 4 app, but it's giving me hard time to figure out.
my project uses sprockets for assets:precompilation,
this is my component:
import React from "react"
class Sidebar extends React.Component {
render() {
return (<p> hello from react </p> );
}
}
export default Sidebar;
when I load the page everything works fine, except for the react component, which is just rendered as a div in the html, and in the console I see:
Sidebar.self.js?body=1:1 Uncaught ReferenceError: exports is not defined
at Sidebar.self.js:1:23
there's an initial snippet added there:
Object.defineProperty(exports, "__esModule", {
value: true
});
That causes the problem.
I tried everything I could find:
Webpacker (but that gave way more troubles so I removed it)
installing https://github.com/TannerRogalsky/sprockets-es6
Typescript ReferenceError: exports is not defined
React uncaught reference error: exports is not defined
and more. I'm not sure what I'm doing wrong (or maybe I misused one of the solutions above?)
update
I figured that I can send babel configuration options via react-rails gem using:
Rails.application.config.react.jsx_transform_options = {
plugins: ["#babel/preset-react"],
loose: ["es6.modules"]
}
I'm not sure which plugins I should use, but this doesn't appear to be affecting a thing, except that it's not ignored, if I write something that is not recognised I do get an exception.
Related
Using instructions on roomle github page how to setup web SDK I'm getting JS errors in console and cofigurator is not rendered inside canvas.
Init script:
window.__RML__ENV__ = {
assetPath: '/roomle_assets/'
};
import RoomleSdk from '#roomle/web-sdk';
document.addEventListener('turbolinks:load', async function () {
const scene = document.getElementById("scene");
const roomleConfigurator = await RoomleSdk.getConfigurator();
roomleConfigurator.boot();
await roomleConfigurator.getApi().init(scene);
await roomleConfigurator.getApi().loadConfigurableItemById('item:id');
});
Assets are loaded and placed correctly. First error is shown on roomleConfigurator.boot() and for other I'm not sure.
Webpack compiles all files correctly and this is only code that is included alongside required packages from Rails itself.
When using example from documentation https://docs.roomle.com/web/guides/tutorial/glbviewer/ for GLB viewer implementation only second error is shown. Uncaught TypeError: can't convert undefined to object animateCamera pixotron-539caf55.js:502 ...
Errors are rather long so here is the link with .txt and corresponding screenshots with specific lines that errors refer to. https://drive.google.com/file/d/1E75ox8dWfxoo8wBoe-UlMUgIorUIqM1Z/view?usp=sharing
I'm uising #roomle/web-sdk version version 2.5.0
This seems really dumb, but I need help for importing some source code into the renderer process in electron:
I have an electron app:
index.html (loads window.js with a tag)
- index.js
- window.js
- useful_functions.js
In window.js, I want to import some functions from useful_functions.js, so I've tried the following:
// fails with: Uncaught SyntaxError: Unexpected identifier
import { very_useful } from './useful_functions.js';
// fails with: Uncaught ReferenceError: require is not defined
const { very_useful } = require('./useful_functions.js');
// fails with: Uncaught ReferenceError: require is not defined
require('electron').remote.require('./useful_functions.js')
I also tried the nodeIntegration flag, but that didn't help either
Note: I'm not trying to import npm modules but my own code, in an other file right next to it.
I'm looking for examples, but I only find super small samples with just the basic files. (Or huge apps like atom that would take me a while to figure out)
I don't have webpack setup for this project yet, but I'm sure there is a simpler way to do this very basic task...
Thanks for any help.
In index.html, use require() instead of loading window.js with a tag, i.e., replace:
<script src="window.js"></script>
with:
<script>require('./window.js');</script>
Then, in window.js, the following statement should work too:
const { very_useful } = require('./useful_functions.js');
Note that nodeIntegration: true is needed in the options passed to new BrowserWindow() anyway:
webPreferences:
{
nodeIntegration: true
}
See:
Node Modules
Functions and objects are added to the root of a module by
specifying additional properties on the special exports object.
Variables local to the module will be private, because the module is
wrapped in a function by Node.js (see module wrapper).
Module Wrapper
Before a module's code is executed, Node.js will wrap it with a
function wrapper that looks like the following:
(function(exports, require, module, __filename, __dirname) {
// Module code actually lives in here
});
I am using the react-rails gem in a Rails(4.2.7) project. This is the only modification I've made to my default Gemfile:
gem 'react-rails'
I've defined a component in a .jsx file using es6 syntax:
class Foo extends React.Component {
render () {
return (<h1>hello</h1>)
}
}
This works fine, but when I attempt to import a js module, I get an error:
import ReactTransitionGroup from 'react-addons-transition-group'
class Foo extends React.Component {
render () {
return (<h1>hello</h1>)
}
}
foo.es6.self-69f3a42….js?body=1:11 Uncaught ReferenceError: require is not defined
It seems to me that if I'm not transpiling the jsx correctly then I would be getting an error in the first case, but I'm not. I've been using jsx all day long with no issues until I tried to use import.
I've tried adding the following to my Gemfile:
gem 'sprockets-es6'
gem 'babel-transpiler'
I've tried adding this to config/environments/development.rb:
config.react.jsx_transformer_class = React::JSX::BabelTransformer
And I've tried generating the component using the rails react component generator with the --es6 flag:
rails g react:component Foo --es6
What am I missing?
So here's how I resolved my issue: since I'm using the 'react-rails' gem, the addons are available via a configuration option - I added the following to config/application.rb:
config.react.addons = true
Then in my .jsx file, instead of import, this is the syntax I used to have access to ReactTransitionGroup:
var ReactTransitionGroup = React.addons.ReactTransitionGroup
I still don't understand, but maybe someday I will, why the import statement transpiles to require which is undefined, and how that could be fixed by anything other than defining require, or transpiling to something that is defined.
I'm trying to get the react-rails gem (version 2.1) working in my Rails 4.2.4 app. I've gone through the setup steps in the Readme and I'm using webpacker for the js preprocessing. I have a component inside of app/javascript/components/label.js that looks like this:
import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom'
export default class Label extends PureComponent {
render () {
return (
<div>Something rendered in React</div>
)
}
}
And then I reference this in my view with the following line:
= react_component("Label")
As far as I can see from the Readme, this should be all that is necessary in order to render the component (provided the application pack is included in the layout, which it is)
= javascript_pack_tag 'application'
So I'm confused as to why I'm getting the error in my browser that the component is not defined.
Uncaught ReferenceError: Label is not defined
Opening app/javascript/packs/application.js I can see the following:
console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)
First I verified that the console log is displayed in the browser (it is). I'm not sure what componentRequireContext does, but if it is relative to the current file, then it seems odd that it points to components and not ../components, but changing this doesn't render the component. However, I can get the component rendering if I add the following line:
window.Label = require('../components/label.js');
I thought the React Rails gem took care of this though, provided the components were saved in the app/javascript/components directory? There's nothing in the Readme that says that I need to explicitly declare and require the component, or am I mistaken?
It looks like you have a capitalization issue. You named the file 'label.js' but you are looking for '= react_component("Label")' So it looks and doesn't find what Label is. Then when you set Label on the window then react is like "Oh ok, Label is actually label.js." and it does stuff. TLDR capitalization matters.
I am working on an app for Rails 4. I installed this gem to work with web components
At some point, I wanted to add this component to use Google Maps, so I installed it with bower
...
"dependencies": {
"google-map": "GoogleWebComponents/google-map#~1.0.3"
}
...
and added it to my component list on app/assets/components/application.html
// This is a manifest file that'll be compiled into application.html, which will include all the files
// listed below.
//
// Any web component HTML file within this directory or vendor/assets/components, if any,
// can be referenced here using a relative path.
//
//= require polymer/polymer
//= require google-map/google-map
so I added the code to my website quite simply
<style>
google-map {
height: 600px;
}
</style>
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
But all I get is whitespace. When I open the developer tools, I get this info:
Uncaught TypeError: Cannot read property '_notifyEffect' of undefined
Uncaught TypeError: Cannot read property '_importsLoaded' of undefined
I know the element works, because if I try to use it in a vanilla website without framework, it works alright. What did I mess?