Toggle mjs files to javascript/auto type (#5151)

Timer · web-flow · commit 3ae3cf367872 · 2018-09-28T08:34:06.000-04:00
diff --git a/fixtures/smoke/graphql-with-mjs/index.test.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
