diff --git a/fixtures/smoke/graphql-with-mjs/index.test.js b/fixtures/smoke/graphql-with-mjs/index.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..1f1d2bd078ad544929764442025d7c9ad61f44d2
--- /dev/null
+++ b/fixtures/smoke/graphql-with-mjs/index.test.js
@@ -0,0 +1,17 @@
+const {
+ bootstrap,
+ isSuccessfulDevelopment,
+ isSuccessfulProduction,
+} = require('../../utils');
+beforeEach(async () => {
+ await bootstrap({ directory: global.testDirectory, template: __dirname });
+});
+
+describe('graphql with mjs entrypoint', () => {
+ it('builds in development', async () => {
+ await isSuccessfulDevelopment({ directory: global.testDirectory });
+ });
+ it('builds in production', async () => {
+ await isSuccessfulProduction({ directory: global.testDirectory });
+ });
+});
diff --git a/fixtures/smoke/graphql-with-mjs/package.json b/fixtures/smoke/graphql-with-mjs/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..f7658f9b7a3188f48531f79c5b73c5ebf45ef0cf
--- /dev/null
+++ b/fixtures/smoke/graphql-with-mjs/package.json
@@ -0,0 +1,10 @@
+{
+ "dependencies": {
+ "apollo-boost": "0.1.16",
+ "graphql": "14.0.2",
+ "react-apollo": "2.2.1",
+ "react": "latest",
+ "react-dom": "latest",
+ "react-scripts": "latest"
+ }
+}
diff --git a/fixtures/smoke/graphql-with-mjs/public/index.html b/fixtures/smoke/graphql-with-mjs/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..86010b2406754a56929e9dd5beee345cb8b72192
--- /dev/null
+++ b/fixtures/smoke/graphql-with-mjs/public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <title>React App</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ </body>
+</html>
diff --git a/fixtures/smoke/graphql-with-mjs/src/App.js b/fixtures/smoke/graphql-with-mjs/src/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ba9891424a05a4ce3c9cdb6d343ca7a59cc19a0
--- /dev/null
+++ b/fixtures/smoke/graphql-with-mjs/src/App.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import ApolloClient from 'apollo-boost';
+import { ApolloProvider } from 'react-apollo';
+
+const client = new ApolloClient({
+ uri: '/whatever',
+});
+
+class App extends Component {
+ render() {
+ return (
+ <ApolloProvider client={client}>
+ <div />
+ </ApolloProvider>
+ );
+ }
+}
+
+export default App;
diff --git a/fixtures/smoke/graphql-with-mjs/src/index.js b/fixtures/smoke/graphql-with-mjs/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b597a44232c2a3b77943c95857fa5c6075cf69d8
--- /dev/null
+++ b/fixtures/smoke/graphql-with-mjs/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index b01fb6a513fa764a0a02de33289085ccdfbebfa2..19dd958ffb098d549270e6cdbeb88552c6b8ef1f 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -187,6 +187,16 @@ module.exports = {
],
include: paths.appSrc,
},
+ {
+ // `mjs` support is still in its infancy in the ecosystem, so we don't
+ // support it.
+ // Modules who define their `browser` or `module` key as `mjs` force
+ // the use of this extension, so we need to tell webpack to fall back
+ // to auto mode (ES Module interop, allows ESM to import CommonJS).
+ test: /\.mjs$/,
+ include: /node_modules/,
+ type: 'javascript/auto',
+ },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index e728798cf7471ee0d458afefd001edbd44e1aaf9..6d6794b70a0cc879f40a437802bf3ae2ae9403d6 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -244,6 +244,16 @@ module.exports = {
],
include: paths.appSrc,
},
+ {
+ // `mjs` support is still in its infancy in the ecosystem, so we don't
+ // support it.
+ // Modules who define their `browser` or `module` key as `mjs` force
+ // the use of this extension, so we need to tell webpack to fall back
+ // to auto mode (ES Module interop, allows ESM to import CommonJS).
+ test: /\.mjs$/,
+ include: /node_modules/,
+ type: 'javascript/auto',
+ },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall