webpack dynamic modules

[mr47]

It's seem that current webpack config don't support require.ensure

Simple component with gl-react

//@flow

import React from 'react'
import ReactDOM from 'react-dom'
import BaseTemplate from '../layout/baseTemplate'

export default class extends React.Component {
    node: any;
    static async getInitialProps({ req }): any {
        const isServer = !!req;
        return {
            isServer: isServer
        }
    }
    componentDidMount(){
        require.ensure([], () => {
            const { Shaders, Node, GLSL } = require("gl-react");
            const { Surface } = require("gl-react-dom");
            const shaders = Shaders.create({
                helloGL: {
                    // This is our first fragment shader in GLSL language (OpenGL Shading Language)
                    // (GLSL code gets compiled and run on the GPU)
                    frag: GLSL`
                        precision highp float;
                        varying vec2 uv;
                        void main() {
                          gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
                        }
                    `
                    // the main() function is called FOR EACH PIXELS
                    // the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
                    // we set in output the pixel color using the vec4(r,g,b,a) format.
                    // see GLSL_ES_Specification_1.0.17
                }
            });
            ReactDOM.render((
                <Surface width={300} height={300}>
                    <Node shader={shaders.helloGL} />
                </Surface>
            ), this.node);
        });
    }
    render(): any {
        return (
            <div ref={(node) => this.node = node}></div>
        );
    }
}

It's work in dev but when i try to next build and then next start get error that chunk not find
It's name 3.3 and it's located in .next folder 😕

Thanks!

UPD: pull request for fix open

[mr47]

Yes on https://github.com/zeit/next.js/blob/master/server/index.js#L42 we serve only commons.js

[rauchg]

I'd love to have a simple solution for dynamic imports, especially with the more definitive ES APIs coming

[mr47]

@rauchg currently using webpack 1.x we still can use require.ensure, later we can switch to System.import on webpack 2 (require.ensure will still supported)

[mr47]

@rauchg I have idea, it's can look like this :

<Require src="./../components/test">
    <Client>
        {'Hello from Client!'}
        <ProxyComponent isClient={true} ...otherOptions />
    </Client>
    <Server>
        {'Hello from Server!'}
        <ProxyComponent isServer={true} ...otherOptions/>
    </Server>
</Require>

or if we want just make a lazy load component

 <Require src="gl-react"/>

PS: It's still random thoughts

[mr47]

@arunoda, @rauchg updated to master version of next, still have problem with require.ensure.
In dev mode all works just fine.
In prod mode after next build chunk are created but not served as expected.
For this i still see solution to set a custom chunkFilename, and serve route like
[name].[hash:4] so we get lazy modules support easy and very clean, later on we can think about it more.

Thanks!

[arunoda]

@mr47 I think it won't as the current state.
Currently, we haven't looked into what's really going on here of our support for require.ensure.

Since we open the programmatic API with 2.0 and the webpack config, it allows us to play with these features in the userland.
If we need some core support it, let's think about doing it for 2.1 or some other releases.

Keep us updated.

[rauchg]

Let's move the discussion to #728, because this will be a priority after 2.0