Use file extensions in import specifiers and require paths.

changelog.md

@@ -5,6 +5,7 @@
 ### Patch
 
 - Updated dependencies.
+- Added a new [`babel-plugin-transform-require-extensions`](https://npm.im/babel-plugin-transform-require-extensions) dev dependency and ensured ESM import specifiers in both source and published `.mjs` files contain file names with extensions, which [are mandatory in the final Node.js ESM implementation](https://nodejs.org/api/esm.html#esm_mandatory_file_extensions). Published CJS `.js` files now also have file extensions in `require` paths.
 - Tidied Babel configs.
 - Readme “Apollo comparison” section corrections and tweaks.
 

package.json

@@ -59,6 +59,7 @@
     "@size-limit/preset-small-lib": "^2.2.2",
     "babel-eslint": "^10.0.2",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
+    "babel-plugin-transform-require-extensions": "^1.0.1",
     "cross-fetch": "^3.0.4",
     "eslint": "^6.7.2",
     "eslint-config-env": "^11.0.1",

src/server/.babelrc.js

@@ -11,5 +11,5 @@ module.exports = {
       }
     ]
   ],
-  plugins: ['@babel/transform-runtime']
+  plugins: ['@babel/transform-runtime', 'transform-require-extensions']
 }

src/server/index.mjs

@@ -1 +1 @@
-export { ssr } from './ssr'
+export { ssr } from './ssr.mjs'

src/server/ssr.mjs

@@ -1,5 +1,5 @@
 import ReactDOMServer from 'react-dom/server'
-import { GraphQL } from '../universal/GraphQL'
+import { GraphQL } from '../universal/GraphQL.mjs'
 
 /**
  * Asynchronously server side renders a [React node]{@link ReactNode},

src/test/.babelrc.js

@@ -12,5 +12,5 @@ module.exports = {
     ],
     '@babel/react'
   ],
-  plugins: ['@babel/transform-runtime']
+  plugins: ['@babel/transform-runtime', 'transform-require-extensions']
 }

src/test/GraphQL.mjs

@@ -2,10 +2,10 @@ import 'cross-fetch/polyfill'
 import { GraphQLInt } from 'graphql'
 import Koa from 'koa'
 import t from 'tap'
-import { GraphQL } from '../universal/GraphQL'
-import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp'
-import { promisifyEvent } from './helpers/promisifyEvent'
-import { startServer } from './helpers/startServer'
+import { GraphQL } from '../universal/GraphQL.mjs'
+import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp.mjs'
+import { promisifyEvent } from './helpers/promisifyEvent.mjs'
+import { startServer } from './helpers/startServer.mjs'
 
 t.test('GraphQL.cache population via `cache` constructor option', t => {
   const cache = {

src/test/graphqlFetchOptions.mjs

@@ -1,7 +1,7 @@
 import { ReactNativeFile } from 'extract-files'
 import FormData from 'formdata-node'
 import t from 'tap'
-import { graphqlFetchOptions } from '../universal/graphqlFetchOptions'
+import { graphqlFetchOptions } from '../universal/graphqlFetchOptions.mjs'
 
 // Global FormData polyfill.
 global.FormData = FormData

src/test/hashObject.mjs

@@ -1,6 +1,6 @@
 import FormData from 'formdata-node'
 import t from 'tap'
-import { hashObject } from '../universal/hashObject'
+import { hashObject } from '../universal/hashObject.mjs'
 
 // Global FormData polyfill.
 global.FormData = FormData

src/test/ssr.mjs

@@ -1,12 +1,12 @@
 import 'cross-fetch/polyfill'
 import React from 'react'
 import t from 'tap'
-import { ssr } from '../server/ssr'
-import { GraphQL } from '../universal/GraphQL'
-import { GraphQLContext } from '../universal/GraphQLContext'
-import { useGraphQL } from '../universal/useGraphQL'
-import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp'
-import { startServer } from './helpers/startServer'
+import { ssr } from '../server/ssr.mjs'
+import { GraphQL } from '../universal/GraphQL.mjs'
+import { GraphQLContext } from '../universal/GraphQLContext.mjs'
+import { useGraphQL } from '../universal/useGraphQL.mjs'
+import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp.mjs'
+import { startServer } from './helpers/startServer.mjs'
 
 t.test('ssr() argument validation', async t => {
   const graphql = new GraphQL()

src/test/useGraphQL.mjs

@@ -3,14 +3,14 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import ReactTestRenderer from 'react-test-renderer'
 import t from 'tap'
-import { GraphQL } from '../universal/GraphQL'
-import { GraphQLContext } from '../universal/GraphQLContext'
-import { GraphQLProvider } from '../universal/GraphQLProvider'
-import { useGraphQL } from '../universal/useGraphQL'
-import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp'
-import { promisifyEvent } from './helpers/promisifyEvent'
-import { sleep } from './helpers/sleep'
-import { startServer } from './helpers/startServer'
+import { GraphQL } from '../universal/GraphQL.mjs'
+import { GraphQLContext } from '../universal/GraphQLContext.mjs'
+import { GraphQLProvider } from '../universal/GraphQLProvider.mjs'
+import { useGraphQL } from '../universal/useGraphQL.mjs'
+import { createGraphQLKoaApp } from './helpers/createGraphQLKoaApp.mjs'
+import { promisifyEvent } from './helpers/promisifyEvent.mjs'
+import { sleep } from './helpers/sleep.mjs'
+import { startServer } from './helpers/startServer.mjs'
 
 t.test('useGraphQL()', async t => {
   const port = await startServer(t, createGraphQLKoaApp())

src/universal/.babelrc.js

@@ -16,6 +16,7 @@ module.exports = {
   plugins: [
     ['@babel/proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     ['@babel/proposal-class-properties', { loose: true }],
-    '@babel/transform-runtime'
+    '@babel/transform-runtime',
+    'transform-require-extensions'
   ]
 }

src/universal/GraphQL.mjs

@@ -1,6 +1,6 @@
 import mitt from 'mitt'
-import { graphqlFetchOptions } from './graphqlFetchOptions'
-import { hashObject } from './hashObject'
+import { graphqlFetchOptions } from './graphqlFetchOptions.mjs'
+import { hashObject } from './hashObject.mjs'
 
 /**
  * A lightweight GraphQL client that caches queries and mutations.

src/universal/GraphQLProvider.mjs

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { FirstRenderDateContext } from './FirstRenderDateContext'
-import { GraphQL } from './GraphQL'
-import { GraphQLContext } from './GraphQLContext'
+import { FirstRenderDateContext } from './FirstRenderDateContext.mjs'
+import { GraphQL } from './GraphQL.mjs'
+import { GraphQLContext } from './GraphQLContext.mjs'
 
 /**
  * A React component that provides a [`GraphQL`]{@link GraphQL} instance for an

src/universal/index.mjs

@@ -1,8 +1,8 @@
-export { GraphQL } from './GraphQL'
-export { GraphQLContext } from './GraphQLContext'
-export { GraphQLProvider } from './GraphQLProvider'
-export { useGraphQL } from './useGraphQL'
-export { reportCacheErrors } from './reportCacheErrors'
+export { GraphQL } from './GraphQL.mjs'
+export { GraphQLContext } from './GraphQLContext.mjs'
+export { GraphQLProvider } from './GraphQLProvider.mjs'
+export { useGraphQL } from './useGraphQL.mjs'
+export { reportCacheErrors } from './reportCacheErrors.mjs'
 
 /**
  * A [GraphQL cache]{@link GraphQL#cache} map of GraphQL operation results.

src/universal/useGraphQL.mjs

@@ -1,9 +1,9 @@
 import React from 'react'
-import { FirstRenderDateContext } from './FirstRenderDateContext'
-import { GraphQL } from './GraphQL'
-import { GraphQLContext } from './GraphQLContext'
-import { graphqlFetchOptions } from './graphqlFetchOptions'
-import { hashObject } from './hashObject'
+import { FirstRenderDateContext } from './FirstRenderDateContext.mjs'
+import { GraphQL } from './GraphQL.mjs'
+import { GraphQLContext } from './GraphQLContext.mjs'
+import { graphqlFetchOptions } from './graphqlFetchOptions.mjs'
+import { hashObject } from './hashObject.mjs'
 
 /**
  * A [React hook](https://reactjs.org/docs/hooks-intro) to manage a GraphQL