React-select cannot find React:
TypeError: React is undefined1 react-select.js:826:4
React-select.js is getting react through
var React = (window.React);
It lookes like i have to include React in the html to make this work, but i would like to avoid this. Is there something i am missing?
(using node)
Let me guess, you require dist/react-select.js. This script is used for browser environment. Try to require node environment script, which described in package.json. Or if you use npm install react-select it enough to call require('react-select');
We need some more clarification here, "using node" - are you rendering on node server?
If you are rendering in the client/browser, var React = (window.React); can possibly be called before window.React is available...
I recommend using commonJs pattern ie: var React = require('React');
I hope my answer will solve some of your issues with React. To start off, React is not the most 'noob' frendily 'View'(MVC).
I personally believe that HTML should only handle any Javascript. Let's separate the concerns into two.
|-- index.html
|-- app.js
Now, we have two files with two separate concerns. I do agree that the proper way to 'requiring' <== current way || 'import' new ES6way (AS of Release of Node 6) but for the simplicity sake, let's use CDNs.
Add these script tags
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js'> </script>
"Keep clam =*= solve bugs"
Related
Okay, let me preface this by saying I am a complete noob when it comes to Node.
I have a Node module, Typed.js, that I want to use on my site, but I'm not sure how. I don't think it'll work out the box since Node is a server-side tool, and you import stuff from the Typed.js package.
You need to wrapper your code up like this
(function(exports){
// your code goes here
})(typeof exports === 'undefined'? this['typed']={}: exports);
Then in your client side
<script src="typed.js"></script>
<script>
console.log(typed.your-function());
</script>
I'm building an isomorphic React/React-Router/Redux/Webpack application and I'm attempting to implement server side rendering.
My directory looks like:
/client
/actions
/components
/containers
/server
/server.js
In my webpack config, I have aliases set up for all the folders inside client:
var path_base = path.resolve(__dirname, '..');
const resolve = path.resolve;
const base = function() {
var args = [path_base];
args.push.apply(args, arguments);
return resolve.apply(resolve,args);
};
const resolve_alias = base.bind(null, 'src/client');
const aliases = [
'actions',
'components',
'constants',
'containers',
'middleware',
'reducers',
'routes',
'store',
'styles',
'utils',
'validation'
];
so that inside the code that gets bundled by webpack, I can do:
import { Widget } from 'components';
and that import gets resolved by webpack.
Now in my server code, in order to do the rendering, I have to import some of my client files, like routes/index.js. The problem I'm running into when I import my routes file, it's using a webpack alias to another file, say components or containers so naturally, the node js require system can't resolve it.
How do I fix something like that? I looked at this question and it talks about essentially setting up the same aliases that exist in webpack with mock-require. But then the issue becomes that my routes file imports all my components which then all import things like stylesheets, images, etc. Should I then be using something like webpack-isomorphic-tools?
The guides I've been looking at (this for example) are all great at showing how server side rendering is accomplished but none of them really talk about how to resolve all the requires and whatnot.
After battling with this issue for 2 days I settled on babel-plugin-webpack-alias.
What you need to do to resolve paths with that is:
$ npm install --save-dev babel-plugin-webpack-alias
Add the plugin to your .babelrc
Add the aliases to your webpack.config (make sure you use path.join())
Refer to this post if you have problems loading styles
The other option I tried was universal-webpack but I found it to be a bit verbose. If you want to see roughly how the whole server-side loading works, you can check out this video.
If you really want them, run your server side code through babel and use this plugin: https://www.npmjs.com/package/babel-plugin-module-alias which will let you do the same thing as webpack.
Edit: This one works a lot better: https://github.com/jagrem/babel-resolve-relative-module it allows multiple paths
Try to use NODE_PATH. Node will always look for a module in this path during require calls. It allows to short cut your relative paths as you want.
// turn this
import {Widget} from '../../components';
// into this
import {Widget} from 'components';
See Node.js docs for more information.
P.S. this thing is very sensitive, so use it carefully. Now your code tightly depends from the environment and may break somewhere.
If you use webpack-isomorphic-tools then it'll take your webpack config into account for your server side which will make all your aliases work.
https://www.npmjs.com/package/webpack-isomorphic-tools
I know now how use JsonLoader in three.js for node.js.
But I have see, in the folder examples (three\examples\js\loaders) of node module an other loader whose is ColladaLoader.
I have try to execute this loader, but he isn't in the core folder of module.
I obtain an error: "ColladaLoader is not a function"
I have try to make a require to this file, but I obtain an error even I make a require to three module : "Three is not defined"
How can I use this ColladaLoader in node.js?
Thank You
var fs = require('fs');
var THREE = require("three");
eval(fs.readFileSync("bower_components/three.js/examples/js/loaders/ColladaLoader.js")+"");
First you load three.js, ensure you set it to a var with the uppercase name "THREE". Then you load the ColladaLoader - feels quite dirty.
A more beautiful solution would encapsule ColladaLoader.js to a node module.
If "ColladaLoader is not a function", then you did not reference to the ColladaLoader.js file.
Make sure to add <script src="js/loaders/ColladaLoader.js"></script> (or where ever your src is located) in your <head> or <body> somewhere before calling the ColladaLoader() function.
I wrote a simple npm module to precompile my handlebars templates when using django compressor to do post-processing for some client side components and found that I need to ship the npm module with a few js files.
Currently I just assume no one is installing this with the global flag because I've "hard coded" the path to these dependencies in the npm module itself
example layout of my npm module
/
* /bin
* /lib/main.js
* /vendor/ember.js
Now inside main.js I want to use the ember.js file ... currently my hard coded approach looks like this
var emberjs = fs.readFileSync('node_modules/django-ember-precompile/vendor/ember.js', 'utf8');
Again -this only works because I assume you install it local but I'd like to think node.js has a more legit way to get locally embedded files
Anyone know how I can improve this to be more "global" friendly?
What you can do is get the directory of the current file and make your file paths relative to that.
var path = require('path')
, fs = require('fs');
var vendor = path.join(path.dirname(fs.realpathSync(__filename)), '../vendor');
var emberjs = fs.readFileSync(vendor + '/ember.js', 'utf8');
Hope that helps!
One of the great strengths of Node.js is how quickly you can get up and running. The downside to this approach is that you are forced to fit the design patterns it was build around.
This is an example where your approach differs too much from Nodes approach.
Node expects everything in a module to be exposed from the modules exports, including templates.
Move the readFileSync into the django-ember-precompile module, then expose the returned value via a module export in lib/main.js.
Example:
package.json
{
"name": "django-ember-precompile",
"main": "lib/main.js"
}
lib/main.js
module.exports.ember = readFileSync('vendor/ember.js')
vendor/ember.js
You obtain your template via
var template = require('django-ember-precompile').ember
This example can be refined, but the core idea is the same.
I'm thoroughly confused on how to use an npm module in Meteor client code.
I understand modules like fs would only work server-side, but in this case I'd like to use a simple text module like this for displaying pretty dates:
https://github.com/ecto/node-timeago
I've tried installing the module under /public/node_modules,
and it works great on the server-side following these instructions from SO: (
How do we or can we use node modules via npm with Meteor?)
Meteor.startup(function () {
var require = __meteor_bootstrap__.require
var timeago = require('timeago')
console.log(timeago(new Date()))
...
However it doesn't work in the client-side code:
if (Meteor.is_client) {
var require = __meteor_bootstrap__.require
var timeago = require('timeago')
console.log(timeago(new Date()))
...
Uncaught ReferenceError: __meteor_bootstrap__ is not defined"
Server-side is sort of useless for me in this case, as I'm trying to render text on the client.
I don't believe you need to use the server side version. Use the npm stuff for server side only and btw, put it in your /public/ as well. Who knows maybe you can call it once it is in your /public/, try it. Or try this.
Use something like the jquery timeago.js
Put it in /client/ or something like /client/js
Create a /client/helpers.js or some such.
Use a handlebars helper.
Handlebars.registerHelper('date', function(date) {
if(date) {
dateObj = new Date(date);
return $.timeago(dateObj);
}
return 'a long long time ago in a galaxy far away';
});
Example of calling 'date' handlebars helper function from template.
{{ date created }}
Where date is the handebars helper and created is the date coming out of the meteor/mongo collection.
See the github Britto project. That is where I got this code snippet and used it in a chat room app I wrote. Works fine.
There are a couple of others floating out there. Go to madewith.meteor.com and peruse the source of some of the projects.