This is using React from Meteor package react-runtime. All you need is to setup the external config { react: 'React' } and it will use the global variable coming from Meteor package. All the kickstart projects are made like this. React will not be included twice. You don’t have to worry about that.
This package is not called es6module, it is called webpack for a reason. I don’t want to reinvent anything here and I want people to feel like they are using Webpack. If you don’t want to learn Webpack, you shouldn’t use a package called webpack:webpack ;).
I’m not sure I understand your question. You can setup your entry point by using a webpack.conf.js file.
UPDATE FOR WINDOWS USERS
I just fixed the problem with watching files on Windows. Now hot reload should work 100% fine.
Update webpack:webpack package and just make sure you’re using path.join(__dirname, '..', 'modules') in resolve.root instead of __dirname + '/../modules' in your webpack.conf.js.
UPDATE FOR EVERYONE
NPM warnings for peer dependencies on React or Webpack shouldn’t happen again if you update your webpack:webpack package. If you see a peer dependency warning, it’s on you now!
$ npm install material-ui
npm WARN peerDependencies The peer dependency react@^0.14.0 included from react-tap-event-plugin will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Linux 3.13.0-37-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "material-ui"
npm ERR! node v4.2.1
npm ERR! npm v2.14.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package react@0.13.3 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer material-ui@0.13.0 wants react@^0.14.0
npm ERR! peerinvalid Peer react-addons-create-fragment@0.14.0 wants react@^0.14.0
npm ERR! peerinvalid Peer react-addons-pure-render-mixin@0.14.0 wants react@^0.14.0
npm ERR! peerinvalid Peer react-addons-transition-group@0.14.0 wants react@^0.14.0
npm ERR! peerinvalid Peer react-addons-update@0.14.0 wants react@^0.14.0
npm ERR! peerinvalid Peer react-tap-event-plugin@0.2.1 wants react@^0.14.0
npm ERR! peerinvalid Peer redbox-react@1.1.1 wants react@>=0.13.2 || ^0.14.0-rc1
npm ERR! Please include the following file with any support request:
npm ERR! /home/none/MeteorApps/Test/kickstart-flowrouter/npm-debug.log
I have something I can not understand:
$ meteor list
...
react-runtime 0.13.3_7 Facebook's React library
and
npm info react
...
version: '0.14.0',
Which version is used? In error, looks like react@0.13.3:
npm ERR! peerinvalid The package react@0.13.3 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer material-ui@0.13.0 wants react@^0.14.0
OK, lets try another version
$ npm install material-ui@0.12.5
npm ERR! peerinvalid The package react@0.13.3 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer material-ui@0.12.5 wants react@~0.13
The best way is to use require within componentWillMount. Example: require('font-awesome/css/font-awesome.css');.
This error is pretty straightforward. You are trying to use a library that requires React 0.14 and the Meteor package is still at 0.13. You might want to try an older version that was working on 0.13.3. Use material-ui ~0.12.5 for now.
This is because react-addons-X are made for 0.14. You can still use React.addons. until Meteor upgrades to 0.14 (they said in a week it will be done!). Maybe you haven’t added it yourself but it is probably a dependency of material-ui.
In your demo, if I refresh the admin page, it loses its context & shows up on a white background. I’m not great with webpack yet, but is this because admin needs its own entry point? how could i fix this?
Thanks for taking away all our excuses not to use webpack Cheers
This is because it is much easier (and automated) to do it like this. The CHUNK_COLLECTOR is for react-router-ssr. You don’t really need to fully understand but the SSR will not work correctly if the chunks on the first page load are not already loaded. Your first client render will be different than what your server rendered.
This is not a bug, it was inteded to do so. The CSS is required within the TodoApp and when you are inside AdminApp, the component has not been loaded yet. If you want to fix this, you have to make sure your CSS for the layout is in your main App component.
In the example, when you go in AdminApp, it has no CSS loaded yet. When you go in the TodoApp, it loads the .css. Then, when you go back to the admin, the CSS is still on the page. You will never have this problem if you are class names that are not colliding.
[95.138.190.18] Meteor requires Node v0.10.40 or later.[95.138.190.18]
[95.138.190.18] error: Forever detected script exited with code: 1[95.138.190.18]
my mup.json includes
// WARNING: Node.js is required! Only skip if you already have Node.js installed on server.
"setupNode": true,
// WARNING: If nodeVersion omitted will setup 0.10.36 by default. Do not use v, only version number.
"nodeVersion": "0.10.40",
To get semantic-ui working, I did npm install semantic-ui. I then went through the steps ending with gulp build. After that, I moved the files in the outputted dist folder into my modules folder.
Testing this out in windows. I tried this and I’m seeing HMR Connected in chrome console, as well as Client modified --refreshing in the Command Prompt, but the components are not updating. In fact, I’m only seeing changes if i shut down and restart the server. Any ideas?
EDIT: could be related to this issue as I am also seeing Error: EBADF, read in the command prompt
Is it possible to make webpack build for Electron? Is it as simple as to place target: 'atom' somewhere? I saw that in the documentation of webpack, but I had no luck making it work in the kickstart-simple project.
I’m trying to convert a moderately complex app from using universe:modules and browserify to using this. This also involved an upgrade to React and ReactRouter, so things are kind of broken, but it’s starting to render.
I’m seeing two errors in the console that mystify me, though. I’m wondering if they mean something to you:
Warning: React can't find the root component node for data-reactid value `.0.0.0.0.1:$=11:$1.$=11:$1.$=11:$1.$=11:0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
plus this warning:
Warning: <App /> is being rendered by both MyApp and RoutingContext using the same key (null) in the same place. Currently, this means that they don't preserve state. This behavior should be very rare so we're considering deprecating it. Please contact the React team and explain your use case so that we can take that into consideration.
and:
Uncaught Error: Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.
I am thinking this has something to do with how the router is working. I’m a bit confused about how the ReactSSR stuff actually works in the kickstart-example (I have basically the same entry as that, and then my own app under modules as per the example).
It would be hard without looking at your code. What your webpack.conf.js looks like and your entry.js files?
You can add material-ui with webpack.packages.json. Make sure to use ~0.12.5 because the next versions require React 0.14 (which is not available yet on the Meteor package).
Cheers