From 3ae3cf3678725f86fe34234e59088a65a9458b8b Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 28 Sep 2018 08:34:06 -0400
Subject: [PATCH] Toggle `mjs` files to `javascript/auto` type (#5151)
---
fixtures/smoke/graphql-with-mjs/index.test.js | 17 ++++++++++++++++
fixtures/smoke/graphql-with-mjs/package.json | 10 ++++++++++
.../smoke/graphql-with-mjs/public/index.html | 9 +++++++++
fixtures/smoke/graphql-with-mjs/src/App.js | 20 +++++++++++++++++++
fixtures/smoke/graphql-with-mjs/src/index.js | 5 +++++
.../config/webpack.config.dev.js | 10 ++++++++++
.../config/webpack.config.prod.js | 10 ++++++++++
7 files changed, 81 insertions(+)
create mode 100644 fixtures/smoke/graphql-with-mjs/index.test.js
create mode 100644 fixtures/smoke/graphql-with-mjs/package.json
create mode 100644 fixtures/smoke/graphql-with-mjs/public/index.html
create mode 100644 fixtures/smoke/graphql-with-mjs/src/App.js
create mode 100644 fixtures/smoke/graphql-with-mjs/src/index.js
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 000000000..1f1d2bd07
--- /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 000000000..f7658f9b7
--- /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 000000000..86010b240
--- /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 000000000..1ba989142
--- /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 000000000..b597a4423
--- /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 b01fb6a51..19dd958ff 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 e728798cf..6d6794b70 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
--
GitLab