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

3ae3cf36 · Joe Haddad · GitHub · 2a7346e0 · 3ae3cf36 · 3ae3cf36
Unverified Commit 3ae3cf36 authored 6 years ago by Joe Haddad Committed by GitHub 6 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 81 additions and 0 deletions
+81 -0
--- a/fixtures/smoke/graphql-with-mjs/index.test.js
+++ b/fixtures/smoke/graphql-with-mjs/index.test.js
+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 });
+  });
+});
--- a/fixtures/smoke/graphql-with-mjs/package.json
+++ b/fixtures/smoke/graphql-with-mjs/package.json
+{
+  "dependencies": {
+    "apollo-boost": "0.1.16",
+    "graphql": "14.0.2",
+    "react-apollo": "2.2.1",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest"
+  }
+}
--- a/fixtures/smoke/graphql-with-mjs/public/index.html
+++ b/fixtures/smoke/graphql-with-mjs/public/index.html
+<!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/fixtures/smoke/graphql-with-mjs/src/App.js
+++ b/fixtures/smoke/graphql-with-mjs/src/App.js
+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;
--- a/fixtures/smoke/graphql-with-mjs/src/index.js
+++ b/fixtures/smoke/graphql-with-mjs/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+ReactDOM.render(<App />, document.getElementById('root'));
--- 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

--- 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