fix: correct esm configuration for loadable/server, fixes: #999 (#1004)

* fix: correct esm configuration for loadable/server, fixes: #999

* chore: put common-js override in

* update snapshots

packages/component/.size-snapshot.json

@@ -1,10 +1,10 @@
 {
-  "dist/loadable.cjs.js": {
+  "dist/cjs/loadable.cjs.js": {
     "bundled": 16900,
     "minified": 7226,
     "gzipped": 2553
   },
-  "dist/loadable.esm.mjs": {
+  "dist/esm/loadable.esm.mjs": {
     "bundled": 16517,
     "minified": 6917,
     "gzipped": 2490,

packages/component/package.json

@@ -2,13 +2,13 @@
   "name": "@loadable/component",
   "description": "React code splitting made easy.",
   "version": "5.16.3",
-  "main": "./dist/loadable.cjs.js",
-  "module": "./dist/loadable.esm.mjs",
+  "main": "./dist/cjs/loadable.cjs.js",
+  "module": "./dist/esm/loadable.esm.mjs",
   "exports": {
     ".": {
-      "require": "./dist/loadable.cjs.js",
-      "import": "./dist/loadable.esm.mjs",
-      "default": "./dist/loadable.cjs.js"
+      "require": "./dist/cjs/loadable.cjs.js",
+      "import": "./dist/esm/loadable.esm.mjs",
+      "default": "./dist/cjs/loadable.cjs.js"
     }
   },
   "repository": "[email protected]:gregberge/loadable-components.git",
@@ -37,7 +37,8 @@
   "license": "MIT",
   "scripts": {
     "prebuild": "shx rm -rf dist",
-    "build": "cross-env rollup -c",
+    "build": "cross-env rollup -c && yarn create-cjs-package-json",
+    "create-cjs-package-json": "echo '{\"type\": \"commonjs\"}' > ./dist/cjs/package.json",
     "prepublishOnly": "yarn run build"
   },
   "peerDependencies": {

packages/server/.size-snapshot.json

@@ -0,0 +1,21 @@
+{
+  "dist/cjs/loadable-server.cjs.js": {
+    "bundled": 18664,
+    "minified": 10144,
+    "gzipped": 2837
+  },
+  "dist/esm/loadable-server.esm.mjs": {
+    "bundled": 18299,
+    "minified": 9859,
+    "gzipped": 2766,
+    "treeshaked": {
+      "rollup": {
+        "code": 279,
+        "import_statements": 235
+      },
+      "webpack": {
+        "code": 13218
+      }
+    }
+  }
+}

packages/server/package.json

@@ -3,13 +3,13 @@
   "description": "Server utilities for loadable.",
   "version": "5.16.2",
   "type": "module",
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
+  "main": "./dist/cjs/loadable-server.cjs.js",
+  "module": "./dist/esm/loadable-server.esm.mjs",
   "exports": {
     ".": {
-      "require": "./lib/cjs/index.js",
-      "import": "./lib/esm/index.js",
-      "default": "./lib/cjs/index.js"
+      "require": "./dist/cjs/loadable-server.cjs.js",
+      "import": "./dist/esm/loadable-server.esm.mjs",
+      "default": "./dist/cjs/loadable-server.cjs.js"
     }
   },
   "repository": "[email protected]:gregberge/loadable-components.git",
@@ -29,12 +29,9 @@
   },
   "license": "MIT",
   "scripts": {
-    "prebuild": "shx rm -rf lib",
-    "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",
+    "prebuild": "shx rm -rf dist",
+    "build": "cross-env rollup -c && yarn create-cjs-package-json",
+    "create-cjs-package-json": "echo '{\"type\": \"commonjs\"}' > ./dist/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/rollup.config.js

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import nodeResolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+import replace from 'rollup-plugin-replace'
+import commonjs from 'rollup-plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
+import pkg from './package.json'
+
+const input = 'src/index.js'
+const name = 'loadable'
+const globals = {
+  react: 'React',
+  'hoist-non-react-statics': 'hoistNonReactStatics',
+}
+
+const external = id => !id.startsWith('.') && !id.startsWith('/')
+
+const getBabelOptions = ({ useESModules }) => ({
+  exclude: '**/node_modules/**',
+  runtimeHelpers: true,
+  presets: [
+    ['@babel/preset-env', { loose: true }],
+    ['@babel/preset-react', { useBuiltIns: true }],
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    'babel-plugin-annotate-pure-calls',
+    ['@babel/plugin-transform-runtime', { useESModules }],
+  ],
+})
+
+export default [
+  // cjs
+  {
+    input,
+    output: { file: pkg.main, format: 'cjs', exports: 'named' },
+    external,
+    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()],
+  },
+  // esm
+  {
+    input,
+    output: { file: pkg.module, format: 'esm' },
+    external,
+    plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
+  },
+]

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.js'
-import uniqBy from 'lodash/uniqBy.js'
-import flatMap from 'lodash/flatMap.js'
+import uniq from 'lodash/uniq'
+import uniqBy from 'lodash/uniqBy'
+import flatMap from 'lodash/flatMap'
 import React from 'react'
-import { invariant, getRequiredChunkKey } from './sharedInternals.js'
-import ChunkExtractorManager from './ChunkExtractorManager.js'
-import { smartRequire, joinURLPath, readJsonFileSync } from './util.js'
+import { invariant, getRequiredChunkKey } from './sharedInternals'
+import ChunkExtractorManager from './ChunkExtractorManager'
+import { smartRequire, joinURLPath, readJsonFileSync } from './util'
 
 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.js'
+import 'regenerator-runtime/runtime'
 import path from 'path'
 import stats from '../__fixtures__/stats.json'
-import ChunkExtractor from './ChunkExtractor.js'
+import ChunkExtractor from './ChunkExtractor'
 
 const targetPath = path.resolve(
   __dirname,

packages/server/src/ChunkExtractorManager.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Context } from './sharedInternals.js'
+import { Context } from './sharedInternals'
 
 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.js'
-export { default as ChunkExtractor } from './ChunkExtractor.js'
+export { default as ChunkExtractorManager } from './ChunkExtractorManager'
+export { default as ChunkExtractor } from './ChunkExtractor'

packages/server/src/util.test.js

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