From 3a513974241eaa4ef6f31f1053bbd473783007d6 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 2 Oct 2018 20:16:19 -0400 Subject: [PATCH 1/4] Add `.mjs` support back to webpack, because webpack was not the problem --- .../config/webpack.config.dev.js | 20 +++++-------------- .../config/webpack.config.prod.js | 20 +++++-------------- 2 files changed, 10 insertions(+), 30 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index fe628e912ab..9cc6859c971 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -144,7 +144,7 @@ module.exports = { // https://github.com/facebook/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], + extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'], alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ @@ -178,7 +178,7 @@ module.exports = { // First, run the linter. // It's important to do this before Babel processes the JS. { - test: /\.(js|jsx)$/, + test: /\.(js|mjs|jsx)$/, enforce: 'pre', use: [ { @@ -199,16 +199,6 @@ 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 @@ -228,7 +218,7 @@ module.exports = { // Process application JS with Babel. // The preset includes JSX, Flow, and some ESnext features. { - test: /\.(js|jsx)$/, + test: /\.(js|mjs|jsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { @@ -274,7 +264,7 @@ module.exports = { // Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. { - test: /\.js$/, + test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: require.resolve('babel-loader'), options: { @@ -361,7 +351,7 @@ module.exports = { // its runtime that would otherwise be processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. - exclude: [/\.(js|jsx)$/, /\.html$/, /\.json$/], + exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/], loader: require.resolve('file-loader'), options: { name: 'static/media/[name].[hash:8].[ext]', diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index ef4bc311d58..9dd2ef9fbe7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -210,7 +210,7 @@ module.exports = { // https://github.com/facebook/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'], + extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'], alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ @@ -244,7 +244,7 @@ module.exports = { // First, run the linter. // It's important to do this before Babel processes the JS. { - test: /\.(js|jsx)$/, + test: /\.(js|mjs|jsx)$/, enforce: 'pre', use: [ { @@ -267,16 +267,6 @@ 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 @@ -295,7 +285,7 @@ module.exports = { // Process application JS with Babel. // The preset includes JSX, Flow, and some ESnext features. { - test: /\.(js|jsx)$/, + test: /\.(js|mjs|jsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), @@ -340,7 +330,7 @@ module.exports = { // Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. { - test: /\.js$/, + test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: require.resolve('babel-loader'), options: { @@ -445,7 +435,7 @@ module.exports = { // it's runtime that would otherwise be processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. - exclude: [/\.(js|jsx)$/, /\.html$/, /\.json$/], + exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/], options: { name: 'static/media/[name].[hash:8].[ext]', }, From 07fde842aef608a1564e9010e120ad2a0381e266 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 2 Oct 2018 21:05:42 -0400 Subject: [PATCH 2/4] Continue toggling `.mjs` to `javascript/auto` mode --- packages/react-scripts/config/webpack.config.dev.js | 9 +++++++++ packages/react-scripts/config/webpack.config.prod.js | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 9cc6859c971..93b0cbe059e 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -174,6 +174,15 @@ module.exports = { rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, + // webpack 4 turned on stricter defaults for .mjs, preventing it from + // performing ESM/CommonJS interoperation. While the ecosystem is + // fleshing out experimental .mjs support, we need to relax this + // constraint. + // https://github.com/facebook/create-react-app/pull/5258#discussion_r222155465 + { + test: /\.mjs$/, + type: 'javascript/auto', + }, // First, run the linter. // It's important to do this before Babel processes the JS. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 9dd2ef9fbe7..f4c0a70ad39 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -240,6 +240,15 @@ module.exports = { rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, + // webpack 4 turned on stricter defaults for .mjs, preventing it from + // performing ESM/CommonJS interoperation. While the ecosystem is + // fleshing out experimental .mjs support, we need to relax this + // constraint. + // https://github.com/facebook/create-react-app/pull/5258#discussion_r222155465 + { + test: /\.mjs$/, + type: 'javascript/auto', + }, // First, run the linter. // It's important to do this before Babel processes the JS. From 14502281ad942807dc7b4fbdb6fc6d1471475d72 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 2 Oct 2018 22:45:17 -0400 Subject: [PATCH 3/4] Be more inline with the specification --- packages/react-scripts/config/webpack.config.dev.js | 9 --------- packages/react-scripts/config/webpack.config.prod.js | 9 --------- 2 files changed, 18 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 93b0cbe059e..9cc6859c971 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -174,15 +174,6 @@ module.exports = { rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, - // webpack 4 turned on stricter defaults for .mjs, preventing it from - // performing ESM/CommonJS interoperation. While the ecosystem is - // fleshing out experimental .mjs support, we need to relax this - // constraint. - // https://github.com/facebook/create-react-app/pull/5258#discussion_r222155465 - { - test: /\.mjs$/, - type: 'javascript/auto', - }, // First, run the linter. // It's important to do this before Babel processes the JS. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index f4c0a70ad39..9dd2ef9fbe7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -240,15 +240,6 @@ module.exports = { rules: [ // Disable require.ensure as it's not a standard language feature. { parser: { requireEnsure: false } }, - // webpack 4 turned on stricter defaults for .mjs, preventing it from - // performing ESM/CommonJS interoperation. While the ecosystem is - // fleshing out experimental .mjs support, we need to relax this - // constraint. - // https://github.com/facebook/create-react-app/pull/5258#discussion_r222155465 - { - test: /\.mjs$/, - type: 'javascript/auto', - }, // First, run the linter. // It's important to do this before Babel processes the JS. From 4c3e58e810285cd57d26931385691a0a06672d32 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 2 Oct 2018 23:52:39 -0400 Subject: [PATCH 4/4] Bump old Node to 6 --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index d5fdc156413..846a8143750 100644 --- a/.travis.yml +++ b/.travis.yml @@ -31,5 +31,5 @@ matrix: - os: osx node_js: 8 env: TEST_SUITE=behavior - - node_js: 4 + - node_js: 6 env: TEST_SUITE=old-node