Comments (11)
The good news is that you new get nice errors!
It looks like React is not exposed.
https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/webpack.server.js#L25
Make sure that type of line is in both your client and server webpack files.
We handle common aspects like this: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.common.config.js#L22 to avoid duplication.
from react_on_rails.
@taylorbrooks Regarding server side, you should look in your config/initializers directory to see if you have an initializer. You might want to check that you're seeing the default that's setup here: https://github.com/shakacode/react_on_rails/blob/master/lib/react_on_rails/configuration.rb#L9. Maybe we have a bug? Default should be false.
from react_on_rails.
K, I'm a little farther, getting a different error now:
ERROR in ./~/react-chartjs/lib/core.js
Module not found: Error: Cannot resolve module 'expose' in /app/node_modules/react-chartjs/lib
@ ./~/react-chartjs/lib/core.js 75:16-32
Which I think is failing on this line: https://github.com/jhudson8/react-chartjs/blob/master/lib/core.js#L79
I'm pretty new to webpack so I may need some n00b level guidance. 😄
from react_on_rails.
Nvm I fixed this ^^. Fixed the React
undefined errors.
Getting this now (don't have anything in config/intializers
):
from react_on_rails.
@taylorbrooks There's a bug in that the exception is caught and says server side even though ti's client side. I'm guessing that you have webpack configuration issues or maybe you didn't import CloseIoTemplates properly. Check out http://forum.railsonmaui.com/t/blackbelt-rails-debugging-techniques-with-react-server-rendering/351. Tips for debugging capybara tests! Same would apply to your situation.
from react_on_rails.
Yeah seems like CloseioTemplates is undefined, but idk why.
Here's some of the code:
webpack.config.js
module.exports = {
entry: "./app/components/components.js",
output: {
filename: "bundle.js",
path: __dirname + "/app/assets/javascripts"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_module|bower_components)/,
loader: 'babel'
},
{ test: require.resolve('react'), loader: 'expose?React' },
]
}
};
components.js
var CloseioTemplates = require('./closeio_templates.jsx');
closeio_templates.jsx
var React = require('react');
module.exports = React.createClass({
propTypes: {
templates: React.PropTypes.array
},
render: function(){
return (
<ul id="things" className="list-group">{
this.props.templates.map(function(template){
return(
<li className="list-group-item" data-template-name={template.name} data-template-id={template.id}>
<div>
{template.name}
<span className="pull-right"></span>
</div>
</li>)
})
}</ul>
);
}
});
from react_on_rails.
@taylorbrooks Definitely create the simplest possible example, only client side rendering, one simple hello world component. Try copying from the spec/dummy app inside of react_on_rails. Baby steps to narrow down the issue.
from react_on_rails.
FWIW, we only use import rather than require, and let/const rather than var.
from react_on_rails.
@taylorbrooks Did you solve your issue?
from react_on_rails.
Wasn't doing window.ComponentName = var ComponentName
Figured it out. Thanks!
from react_on_rails.
@taylorbrooks Thanks. This is shown in the README.md as:
window.MyReactComponentApp = MyReactComponentApp;
from react_on_rails.
Related Issues (20)
- Client rendering crashes when configuring `optimization.runtimeChunk` to `multiple` HOT 3
- Include Ruby 3 and node 18 to CI workflows HOT 2
- Pack generation runs with nil components_subdirectory HOT 3
- Concurrency performance HOT 3
- When server-bundle.js register a lot of server render components making the server render performance reduce big HOT 2
- Remove `request_digest` from `render_options` for version 14 HOT 1
- Convert spec/dummy/client to Typescript
- Change primary branch name from `master` to `main` HOT 2
- Add support for Vite
- Fix CI failure
- Server side rendering window behaves differently than Node.js? HOT 7
- React Component won't mount until all assets are loaded HOT 2
- Adjustment of Minimum Required Ruby Version for Versions 12.5.x HOT 5
- Webpacker constants still being referenced HOT 1
- Clarification and reorganization of test conditions in configuration specs HOT 2
- `react_on_rails:generate_packs` should add the import statement to the entry point even if the packs already exist
- Bump Rescript in examples due to build-time errors HOT 2
- How to refresh CSRF token? HOT 4
- uninitialized constant `ReactOnRails::Configuration::Webpacker` HOT 6
- Running `react_on_rails:install` is not compatible with Shakapacker v8 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react_on_rails.