Create-react-app: Support .mjs file extensions

[lencioni]

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?

mjs, extension, static, media

Environment

1. node -v: v6.2.2
2. npm -v:3.10.10
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected):

[email protected] /Users/joe_lencioni/waypoint-test
└── [email protected]

Then, specify:

1. Operating system: macOS Sierra
2. Browser and version (if relevant): Chrome

Steps to Reproduce

(Write your steps here:)

1. Clone https://github.com/colloquet/waypoint-test.git
2. npm install
3. npm start

Expected Behavior

Page loads without errors.

Actual Behavior

Page shows error: "InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/index.73a4b08a.mjs') is not a valid name."

Reproducible Demo

See repro instructions above

I believe this is happening because webpack has been configured to treat files with filenames ending in .mjs as static files, so when you import one instead of returning a reference to the export, it will output the contents in static/media and return the path to that file as a string.

Originally reported: https://github.com/brigade/react-waypoint/issues/221

[Timer]

Considering Node landed .mjs support in https://github.com/nodejs/node/pull/14369, I'm open to supporting this file format.

I welcome a PR to add support for the extension. 😄

[Timer]

Note, even though the specification states:

[".mjs", ".js", ".json", ".node"]

I'd like to fallback last to .mjs for compatibility reasons until v2.0.0 so there's no breaking change.

[icd2k3]

I'm still seeing an issue with destructuring .mjs imports ala import { something } from 'my-mjs-module' where something will be undefined... anyone else?

Note that when I switch the extension from .mjs to .js all is fine!