Migrate server to ESM (#1003)

* Add extensions to all imports

* Output ESM and CJS for dual publish

* Force extensions in ESLint

* Bump babel/runtime

Author: 7rulnik

babel.config.js

@@ -5,10 +5,23 @@ function getTargets() {
   return undefined
 }
 
+function getModules() {
+  if (process.env.MODULE_TARGET === 'cjs') {
+    return 'cjs'
+  }
+  if (process.env.MODULE_TARGET === 'esm') {
+    return false
+  }
+  return 'auto'
+}
+
 module.exports = {
   presets: [
     ['@babel/preset-react', { useBuiltIns: true }],
-    ['@babel/preset-env', { loose: true, targets: getTargets() }],
+    [
+      '@babel/preset-env',
+      { loose: true, targets: getTargets(), modules: getModules() },
+    ],
   ],
   plugins: ['@babel/plugin-proposal-class-properties'],
 }

packages/component/package.json

@@ -44,7 +44,7 @@
     "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.7.7",
+    "@babel/runtime": "^7.12.18",
     "hoist-non-react-statics": "^3.3.1",
     "react-is": "^16.12.0"
   }

packages/server/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/extensions": ["error", "always", { "ignorePackages": true }]
+  }
+}

packages/server/package.json

@@ -2,7 +2,16 @@
   "name": "@loadable/server",
   "description": "Server utilities for loadable.",
   "version": "5.16.2",
-  "main": "lib/index.js",
+  "type": "module",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "import": "./lib/esm/index.js",
+      "default": "./lib/cjs/index.js"
+    }
+  },
   "repository": "[email protected]:gregberge/loadable-components.git",
   "author": "Greg Bergé <[email protected]>",
   "publishConfig": {
@@ -21,7 +30,11 @@
   "license": "MIT",
   "scripts": {
     "prebuild": "shx rm -rf lib",
-    "build": "BUILD_TARGET=node babel --config-file ../../babel.config.js -d lib --ignore \"**/*.test.js\" src",
+    "build:esm": "MODULE_TARGET=esm yarn run build:script -d lib/esm",
+    "build:cjs": "MODULE_TARGET=cjs yarn run build:script -d lib/cjs && yarn run create-cjs-package-json",
+    "build:script": "BUILD_TARGET=node babel --config-file ../../babel.config.js --ignore \"**/*.test.js\" src",
+    "build": "yarn build:esm && yarn build:cjs",
+    "create-cjs-package-json": "echo '{\"type\": \"commonjs\"}' > ./lib/cjs/package.json",
     "prepublishOnly": "yarn run build",
     "update-fixtures": "yarn --cwd ../../examples/__fixtures__ build:webpack && rm -rf ./__fixtures__ && cp -R ../../examples/__fixtures__/target ./__fixtures__ "
   },

packages/server/src/ChunkExtractor.js

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
 import path from 'path'
 import fs from 'fs'
-import uniq from 'lodash/uniq'
-import uniqBy from 'lodash/uniqBy'
-import flatMap from 'lodash/flatMap'
+import uniq from 'lodash/uniq.js'
+import uniqBy from 'lodash/uniqBy.js'
+import flatMap from 'lodash/flatMap.js'
 import React from 'react'
-import { invariant, getRequiredChunkKey } from './sharedInternals'
-import ChunkExtractorManager from './ChunkExtractorManager'
-import { smartRequire, joinURLPath, readJsonFileSync } from './util'
+import { invariant, getRequiredChunkKey } from './sharedInternals.js'
+import ChunkExtractorManager from './ChunkExtractorManager.js'
+import { smartRequire, joinURLPath, readJsonFileSync } from './util.js'
 
 const EXTENSION_SCRIPT_TYPES = {
   '.js': 'script',

packages/server/src/ChunkExtractor.test.js

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import 'regenerator-runtime/runtime'
+import 'regenerator-runtime/runtime.js'
 import path from 'path'
 import stats from '../__fixtures__/stats.json'
-import ChunkExtractor from './ChunkExtractor'
+import ChunkExtractor from './ChunkExtractor.js'
 
 const targetPath = path.resolve(
   __dirname,

packages/server/src/ChunkExtractorManager.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Context } from './sharedInternals'
+import { Context } from './sharedInternals.js'
 
 const ChunkExtractorManager = ({ extractor, children }) => (
   <Context.Provider value={extractor}>{children}</Context.Provider>

packages/server/src/index.js

@@ -1,2 +1,2 @@
-export { default as ChunkExtractorManager } from './ChunkExtractorManager'
-export { default as ChunkExtractor } from './ChunkExtractor'
+export { default as ChunkExtractorManager } from './ChunkExtractorManager.js'
+export { default as ChunkExtractor } from './ChunkExtractor.js'

packages/server/src/util.test.js

@@ -1,4 +1,4 @@
-import { joinURLPath } from './util'
+import { joinURLPath } from './util.js'
 
 describe('util', () => {
   describe('#joinURLPath', () => {

yarn.lock

@@ -801,7 +801,14 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.7.7":
+"@babel/runtime@^7.12.18":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
   integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
@@ -8159,6 +8166,11 @@ regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"