Self mounting components example is an abomination and should be removed

[stefreak]

When trying out the self mounting components example, I get an internal server error when I set DEBUG=False in example.py

when DEBUG=True and RENDER=True I get this stack trace: https://gist.github.com/anonymous/71706192fbae03bf8e86

What could be causing the problem?

[markfinger]

Stack trace: /Users/steffen/python-react/examples/self_mounting_components/node_modules/bootstrap/dist/css/bootstrap.css:7
html {

Looks like it's trying to require a css file and v8's parser is complaining.

I'd suggest investigating what's being passed as the first argument of the rendered = render_component(component, props) call

[TheoRyley]

Nuke your node_modules and reinstall.

rm -rf node_modules && npm install

[stefreak]

@markfinger do you mean this line is wrong? https://github.com/markfinger/python-react/blob/master/examples/self_mounting_components/app/CommentBox.jsx#L2

I did not change the example (only the DEBUG setting in example.py)

@TheoRyley did that and it did not help.

[stefreak]

when I comment out the css imports I get the next strange errors:

when running the render server I get

BuildServerUnexpectedResponse: Unexpected response from http://127.0.0.1:9009/build - 404: Cannot POST /build

and when I run the webpack build server I get

RenderServerError: Unexpected response from render server at http://127.0.0.1:9009/render - 404: Cannot POST /render?hash=32ef8f0763b05c6fd43f446c762be8e95feb9a75

[markfinger]

Ah, good catch actually. I think I probably got a bit eager cleaning things up and copy/pasted some code from another project - those css imports will need to be in another file. One of the benefits of using webpack is that it enables you to more tightly couple your style + markup, but it gets fiddly once you start trying to pre-render stuff.

If you move the *.css imports into another file which exports the component, it should work. eg:

// entry.js

// CSS dependencies
import 'bootstrap/dist/css/bootstrap.css';
import './CommentBox.css';

import CommentBox from './CommentBox.jsx';

export default CommentBox;

[markfinger]

Oh, you'll need to change the component key in the webpack_context dict

webpack_context = {
        'component': 'path/to/entry.js',
        'props_var': 'window.mountProps',
        'container': 'mount-container',
    }

[markfinger]

Once you start using a codebase in two environments you either end up with a lot of boilerplate or you have to sacrifice functionality :(

[markfinger]

Oh, regarding the servers. You'll need to change the port that one runs on. They're both trying to use 9009.

I think webpack-build's cli takes a --port option. npm run webpack-build -- --port 8008

Sorry for the mess - that example was a really quick hack that I put together as a substitute for some behaviour that was removed. I'd hoped that my ramble in example/README.md would discourage people from trying it, but maybe I should just scrap it altogether

[markfinger]

'fixed' in dev branch