Create-react-app: Code splitting with import promise in object

[encocan]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

Code splitting

Environment

1. node -v: v8.1.3
2. npm -v: 4.6.1
3. yarn --version (if you use Yarn): N/A
4. npm ls react-scripts (if you haven’t ejected): 1.0.10

Then, specify:

1. Operating system: Mac OS
2. Browser and version (if relevant):

Steps to Reproduce

(Write your steps here:)

1. Run create-react-app my-app && cd my-app/ && npm start
2. Create and ModuleA.js using code from docs:

const moduleA = 'Hello';

export { moduleA };

1. Create and copy App.js (copied from docs, but with import promise moved out of class into a variable):

import React, { Component } from 'react';

const importPromises = {
  moduleA: import('./ModuleA')
};

class App extends Component {
  handleClick = () => {
      importPromises.moduleA
      .then(({ moduleA }) => {
        // Use moduleA
        alert(moduleA);
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;

UI looks like the docs version, but I alert the resolved module:

Expected Behavior

(Write what you thought would happen.)
The import promise should not be resolved when stored in a variable/object. The split js (static/js/0.chunk.js) should not be loaded until I click the button which resolves the import promise.

The docs say "code splitting allows you to split your code into small chunks which you can then load on demand", but I'm seeing the code load straight away.

Actual Behavior

(Write what happened. Please add screenshots!)

1. Code is imported before clicking the button (see network panel):

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Link: https://github.com/encocan/cra-import

1. git clone https://github.com/encocan/cra-import
2. npm start
3. In browser, observe network requests and see request to chunk is already made with request URL: http://localhost:3000/static/js/0.chunk.js before clicking the button

[ianschmitz]

You are seeing the module load since the import statement is being evaluated when the bundle.js is loaded

const importPromises = {
  moduleA: import('./ModuleA')
};

The import() statement will be evaluated at this point, which will trigger the loader to load this chunk using an HTTP request. If you move the import back into the button click event handler you should get your desired behavior.