fix(core): fix require.context shim for graphql deploys (#2903)

packages/@sanity/core/_internal.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+require('./_interopReexport')(module.exports, require('./lib/_exports/_internal'))

packages/@sanity/core/_interopReexport.js

@@ -0,0 +1,30 @@
+/**
+ * esm/commonjs interop reexport helper
+ * this should be used instead of doing `module.exports = require('./some/file')
+ * since that doesn't work properly with esm imports from the consuming end
+ * @param moduleExports export object from the exporting module
+ * @param importedModule the imported module to be reexported
+ */
+module.exports = function _interopReexport(moduleExports, importedModule) {
+  Object.defineProperty(moduleExports, '__esModule', {
+    value: true,
+  })
+
+  Object.defineProperty(moduleExports, 'default', {
+    enumerable: true,
+    get: function get() {
+      return importedModule.default
+    },
+  })
+
+  Object.keys(importedModule).forEach(function (key) {
+    if (key === 'default' || key === '__esModule') return
+    if (key in moduleExports && moduleExports[key] === importedModule[key]) return
+    Object.defineProperty(moduleExports, key, {
+      enumerable: true,
+      get: function get() {
+        return importedModule[key]
+      },
+    })
+  })
+}

packages/@sanity/core/package.json

@@ -5,6 +5,14 @@
   "main": "lib/index.js",
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
+  "//": "the typesVersion config below is a workaround for TypeScript's lack of support for package exports",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/dts/_exports/*"
+      ]
+    }
+  },
   "scripts": {
     "build": "babel src --copy-files --out-dir lib",
     "clean": "rimraf lib dest",
@@ -74,6 +82,7 @@
     "@sanity/client": "2.21.7",
     "@types/fs-extra": "^7.0.0",
     "@types/inquirer": "^6.0.2",
+    "@types/klaw-sync": "^6.0.1",
     "@types/resolve-from": "^4.0.0",
     "@types/semver": "^6.2.3",
     "chalk": "^2.4.2",

packages/@sanity/core/src/_exports/_internal.ts

@@ -0,0 +1 @@
+export {createRequireContext} from '../util/createRequireContext'

packages/@sanity/core/src/_exports/index.ts

@@ -0,0 +1,2 @@
+// intentionally left blank for now since this package have never had any official package exports before
+export {}

packages/@sanity/core/src/util/createRequireContext.ts

@@ -0,0 +1,98 @@
+import path from 'path'
+import klaw from 'klaw-sync'
+
+/**
+ * https://webpack.js.org/guides/dependency-management/#requirecontext
+ */
+interface WebpackRequireContextFactory {
+  (
+    directory: string,
+    useSubdirectories?: boolean,
+    regExp?: RegExp,
+    mode?: 'sync'
+  ): WebpackRequireContext
+}
+
+/**
+ * https://webpack.js.org/guides/dependency-management/#context-module-api
+ */
+interface WebpackRequireContext {
+  (request: string): unknown
+
+  id: string
+  keys(): string[]
+  resolve(request: string): unknown
+}
+
+/**
+ * note, options are primarily for testing
+ */
+interface CreateRequireContextOptions {
+  require?: (request: string) => unknown
+  resolve?: (request: string) => string
+}
+
+const globalRequire = require
+
+export function createRequireContext(
+  dirname: string,
+  {
+    require = globalRequire,
+    resolve = globalRequire.resolve.bind(globalRequire),
+  }: CreateRequireContextOptions = {}
+): WebpackRequireContextFactory {
+  function requireContext(
+    directory: string,
+    recursive = true,
+    regExp = /.*/
+  ): WebpackRequireContext {
+    console.warn('Usage of `require.context` is deprecated and will break in a future release.')
+
+    try {
+      const basedir = path.resolve(dirname, directory)
+
+      const keys = klaw(basedir, {
+        depthLimit: recursive ? 30 : 0,
+      })
+        .filter((item) => !item.stats.isDirectory() && regExp.test(item.path))
+        // use relative paths for the keys
+        .map((item) => path.relative(basedir, item.path))
+        // if the path.resolve doesn't prefixed with `./` then add it.
+        // note it could be upward `../` so we need the conditional
+        .map((filename) => (filename.startsWith('.') ? filename : `./${filename}`))
+
+      // eslint-disable-next-line no-inner-declarations
+      function context(request: string) {
+        // eslint-disable-next-line import/no-dynamic-require
+        return require(path.join(basedir, request))
+      }
+
+      Object.defineProperty(context, 'id', {
+        get: () => {
+          console.warn('`require.context` `context.id` is not supported.')
+          return ''
+        },
+      })
+
+      Object.defineProperty(context, 'keys', {
+        // NOTE: this keys method does not match the behavior of webpack's
+        // require.context context because it does not return all possible keys
+        //
+        // e.g. `./module-a/index.js`
+        // would return `['./module-a', './module-a/index', './module-a/index.js']`
+        value: () => keys,
+      })
+
+      Object.defineProperty(context, 'resolve', {
+        value: (request: string) => resolve(path.join(basedir, request)),
+      })
+
+      return context as WebpackRequireContext
+    } catch (contextErr) {
+      contextErr.message = `Error running require.context():\n\n${contextErr.message}`
+      throw contextErr
+    }
+  }
+
+  return requireContext
+}

packages/@sanity/core/src/util/mockBrowserEnvironment.js

@@ -38,7 +38,6 @@ function mockBrowserEnvironment(basePath) {
   const domCleanup = jsdomGlobal(jsdomDefaultHtml, {url: 'http://localhost:3333/'})
   const windowCleanup = () => global.window.close()
   const globalCleanup = provideFakeGlobals()
-  const contextCleanup = requireContext.register()
   const cleanupFileLoader = pirates.addHook(
     (code, filename) => `module.exports = ${JSON.stringify(filename)}`,
     {
@@ -49,13 +48,14 @@ function mockBrowserEnvironment(basePath) {
 
   registerBabelLoader(basePath)
   pluginLoader({basePath, stubCss: true})
+  const contextCleanup = requireContext.register()
 
   return function cleanupBrowserEnvironment() {
     cleanupFileLoader()
-    contextCleanup()
     globalCleanup()
     windowCleanup()
     domCleanup()
+    contextCleanup()
   }
 }
 

packages/@sanity/core/src/util/requireContext.ts

@@ -0,0 +1,34 @@
+/**
+ * This file exposes a "register" function which hacks in a `require.context`function,
+ * mirroring webpacks version (https://webpack.js.org/guides/dependency-management/#requirecontext)
+ *
+ * Basically allows you to do `require.context('./types', true, /\.js$/)` to import multiple
+ * files at the same time. While generally not advised (given it's a webpack-only thing),
+ * people are already using it in the wild, so it breaks when trying to deploy GraphQL APIs,
+ * or when running scripts using `sanity exec`.
+ *
+ * We have to inject the `require.context` function to each required file, which is done by
+ * overriding injecting a small script that runs before the start of each file.
+ */
+
+import path from 'path'
+import {addHook} from 'pirates'
+
+type Revert = ReturnType<typeof addHook>
+let revert: Revert | undefined
+
+const augmentRequire = (dirname: string) =>
+  `if (typeof require !== 'undefined') {const {createRequireContext} = require('@sanity/core/_internal');require.context = createRequireContext(${JSON.stringify(
+    dirname
+  )});};`
+
+export function register(): Revert {
+  if (revert) return revert
+
+  revert = addHook((code, filename) => `${augmentRequire(path.dirname(filename))}${code}`, {
+    exts: ['.js', '.ts', '.tsx'],
+    ignoreNodeModules: true,
+  })
+
+  return revert
+}