https://github.com/thereactivestack/kickstart-hugeapp/blob/master/entry/client/routes.jsx#L4
As I understand this, all modules are served up SSR, if thatās correct, how could I change that? Anything behind a login wall (like admin) has no need for SEO and Iād probably prefer to have the client load it (but Iāll happily change my opinion if thereās a reason for it).
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).
I want to run formsy-mui-demo inside kickstart-flowrouterā¦
I tried to add packages: npm install material-ui@0.12.5, npm install formsy-react@0.14.1 and npm install formsy-material-ui
Today I tried add to webpack.packages.json:
āmaterial-uiā: ā0.12.3ā,
āformsy-reactā: ā0.14.1ā,
āformsy-material-uiā: ā0.2.2ā
In both cases, the following errors in the chrome console:
Uncaught TypeError: Cannot read property āfirstChildā of undefined
Uncaught Error: Invariant Violation: addComponentAsRefTo(ā¦): Only a ReactOwner can have refs. This usually means that youāre trying to add a ref to a component that doesnāt have an owner (that is, was not created inside of another componentās render method). Try rendering this component inside of a new top-level component which will hold the ref.
Uncaught Error: Invariant Violation: removeComponentAsRefFrom(ā¦): Only a ReactOwner can have refs. This usually means that youāre trying to remove a ref to a component that doesnāt have an owner (that is, was not created inside of another componentās render method). Try rendering this component inside of a new top-level component which will hold the ref.
been struggling with this one:
Iād like to use css-modules, which basically takes icss, maps it, inlines it, and then extracts the text back into a pure css file. It does this by using the package extract-text-webpack-plugin. If i disable the extraction piece, the css stays inline & it works (which is fine for development). My solution would be a build step where it creates the css file & then meteor can pick it up & send it through the build process, but Iām guessing youāve discovered something more eloquent to obviate the need for a build folder?
This is truly an excellent edition to Meteor and I thank everyone involved for their determined efforts.
I have one question regarding the flow-router example (mainly due to my novice level with webpack and flow router).
Has anyone managed to get code splitting working like in the huge-app example but with the flow-router example.
I really like the feel of flow-router and am looking to migrate an existing meteor/react app across to webpack and flow-router and am just stuck at how to āon demand loadā modules with flow-router.
I think this may be my final stumbling block and I thank you in advance for any assistance that can be offered
Cheers
