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 00000000000..1f1d2bd078a
--- /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 00000000000..f7658f9b7a3
--- /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 00000000000..86010b24067
--- /dev/null
+++ b/fixtures/smoke/graphql-with-mjs/public/index.html
@@ -0,0 +1,9 @@
+
+
+
+ React App
+
+
+
+
+
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 00000000000..1ba9891424a
--- /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 (
+
+
+
+ );
+ }
+}
+
+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 00000000000..b597a44232c
--- /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(, document.getElementById('root'));
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index b01fb6a513f..19dd958ffb0 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 e728798cf74..6d6794b70a0 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