kirill-konshin / create-react-server Goto Github PK
View Code? Open in Web Editor NEWServer & middleware for React + Router + Redux with Server Side Rendering
Server & middleware for React + Router + Redux with Server Side Rendering
I keep on getting this on the create-react-app
example
Error: Cannot find module 'react-dom/server'
Use "create-react-server --help"
I installed react-dom
independently in the examples
, the create-react-server
folders, but it still wouldn't go away.
npm -v : 5.2.0
node -v : v6.11.3
When I delete redux related modules from my project I constantly get errors like:
bundle.js:44863 withWrapper(Homepage).getInitialProps has failed: TypeError: Cannot read property '_currentElement' of null at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:32751) at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:32730) at ReactCompositeComponentWrapper.updateComponent (bundle.js:32651) at ReactCompositeComponentWrapper.receiveComponent (bundle.js:32553) at Object.receiveComponent (bundle.js:24691) at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:32760) at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:32730) at ReactCompositeComponentWrapper.updateComponent (bundle.js:32651) at ReactCompositeComponentWrapper.performUpdateIfNecessary (bundle.js:32567) at Object.performUpdateIfNecessary (bundle.js:24723)
Running by example:
git clone https://github.com/kirill-konshin/create-react-server.git
cd create-react-server
npm install
cd examples/create-react-app
npm install
npm run redeploy # launch in production mode
Getting error:
Creating an optimized production build...
Failed to compile.
Module not found: Error: You attempted to import ../../../wrapper which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or a
dd a symlink to it from project's node_modules/.
As stated in #2 (comment) Babel stopped compiling after upgrade of babel-preset-react-app.
Potentially related to facebook/create-react-app#2524.
Is there any reason that this library couldn't work with react-loadable
? It seems to me that their section on Server side rendering should work perfectly fine. Even the documentation on React Router 4 seems to indicate now that this is possible.
I believe your documentation could be out of date. Do you have an example of this not working?
Hi. How to solve problem with window global variable?
ReferenceError: window is not defined
I understand, window
and document
is not defined on the server. But, this variables very useful for my project, and installed packages.
do you have any plans for supporting react router 4 or upcoming versions of create-react-app?
I'm getting following error when I use img, don't we support images yet on the server side?
> @ server /Users/maulik/Desktop/create-react-server/client
> node ../server/server.js --app src/app.js --template template.js
SyntaxError: /Users/maulik/Desktop/create-react-server/client/src/components/logo.jpg: Unexpected character '�' (1:0)
Use "create-react-server --help"
npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/Cellar/node/7.1.0/bin/node" "/usr/local/bin/npm" "run" "server"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! @ server: `node ../server/server.js --app src/app.js --template template.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ server script 'node ../server/server.js --app src/app.js --template template.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node ../server/server.js --app src/app.js --template template.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/maulik/Desktop/create-react-server/client/npm-debug.log
npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/Cellar/node/7.1.0/bin/node" "/usr/local/bin/npm" "run" "redeploy"
npm ERR! node v7.1.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! @ redeploy: `npm run build && npm run server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ redeploy script 'npm run build && npm run server'.
How can this library be used in conjunction with React Router 5
? I don't see the creation of a history inside of a store in your documentation or Redux examples and I can't seem to find what I'm missing. I need to create a history by pushing req.url
as the first param when creating a memoryHistory
(since SSR can't take a browserHistory
). However, since the createStore
function demands a certain format of parameters, I can't seem to sneak a pre-made history inside. Here's my code...
app.js (entry point)
import React from 'react';
import createStore, { history } from './store';
import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter } from 'react-router-redux';
import { WrapperProvider } from 'create-react-server/wrapper';
import App from './containers/app';
export default ({ state, props, req, res }) => {
if (!state && !!req) {
state = {
foo: req.url + ':' + Date.now()
};
}
return (
<Provider store={createStore(state)}>
<WrapperProvider initialProps={props}>
<ConnectedRouter history={history}>
<Route component={App} />
</ConnectedRouter>
</WrapperProvider>
</Provider>
);
};
store.js
import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import * as reduxHistory from 'history';
import rootReducer from './modules';
const isServer = () => !(typeof window !== 'undefined' && window.document);
export const history = isServer()
? reduxHistory.createMemoryHistory()
: reduxHistory.createBrowserHistory();
export default (initialState = {}, server = {}) => {
if (server.req) {
initialState = { foo: server.req.url };
}
const enhancers = [];
if (process.env.NODE_ENV === 'development') {
const devToolsExtension = window.devToolsExtension;
if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension());
}
}
const middleware = [thunk, routerMiddleware(history)];
const composedEnhancers = compose(
applyMiddleware(...middleware),
...enhancers
);
return createStore(rootReducer, initialState, composedEnhancers);
};
package.json
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"create-react-server": "^0.3.1",
"express": "^4.16.2",
"flow-bin": "^0.57.3",
"ignore-styles": "^5.0.1",
"lint-staged": "^4.1.3",
"moment": "^2.19.3",
"node-sass-chokidar": "^0.0.3",
"normalize.css": "^7.0.0",
"npm-run-all": "^4.1.1",
"openmined-ui": "^0.0.5",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.6",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-scripts": "1.0.14",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
}
So far as I can tell, when using RRR5 you have to specify a history before creating a store. Is there any way you can see this working? Could you provide an example of them working together on both the client and server side?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.