Package Exports in package.json not including "import" for "./compat/server"

[SomethingSexy]

I am upgrading from Webpack 4 to 5 and coming across an issue.

Reproduction

Using preact 10.4.8, webpack 5.11.0, TypeScript 4.1.3

TSConfig

allowJs: true,
allowSyntheticDefaultImports: true,
esModuleInterop: true,
experimentalDecorators: true,
jsx: 'react',
lib: ['ESNext', 'dom'],
module: 'esnext',
moduleResolution: 'node',
noImplicitAny: true,
rootDir: stageDir,
skipLibCheck: true,
strict: true,
target: 'es5',

Relevant Webpack config

      resolve: {
        alias: {
          lodash: 'lodash-es',
          react: 'preact/compat',
          'react-dom': 'preact/compat',
          'react-dom/test-utils': 'preact/test-utils',
        },
      },

Expected Behavior

Webpack should build and successfully alias preact.

Actual Behavior

Receiving this error when bundling with webpack using the configuration above.

ModuleNotFoundError: Module not found: Error: Package path ./compat/server is not exported from package /<removed_path>/node_modules/preact (see exports field in /<removed_path>/node_modules/preact/package.json)

Looking at the exports configuration in preact package.json I see

  "exports": {
    ".": {
      "browser": "./dist/preact.module.js",
      "umd": "./dist/preact.umd.js",
      "import": "./dist/preact.mjs",
      "require": "./dist/preact.js"
    },
    "./compat": {
      "browser": "./compat/dist/compat.module.js",
      "umd": "./compat/dist/compat.umd.js",
      "require": "./compat/dist/compat.js",
      "import": "./compat/dist/compat.mjs"
    },
    "./debug": {
      "browser": "./debug/dist/debug.module.js",
      "umd": "./debug/dist/debug.umd.js",
      "require": "./debug/dist/debug.js",
      "import": "./debug/dist/debug.mjs"
    },
    "./devtools": {
      "browser": "./devtools/dist/devtools.module.js",
      "umd": "./devtools/dist/devtools.umd.js",
      "require": "./devtools/dist/devtools.js",
      "import": "./devtools/dist/devtools.mjs"
    },
    "./hooks": {
      "browser": "./hooks/dist/hooks.module.js",
      "umd": "./hooks/dist/hooks.umd.js",
      "require": "./hooks/dist/hooks.js",
      "import": "./hooks/dist/hooks.mjs"
    },
    "./test-utils": {
      "browser": "./test-utils/dist/testUtils.module.js",
      "umd": "./test-utils/dist/testUtils.umd.js",
      "require": "./test-utils/dist/testUtils.js",
      "import": "./test-utils/dist/testUtils.mjs"
    },
    "./compat/server": {
      "require": "./compat/server.js"
    },
    "./package.json": "./package.json",
    "./": "./"
  },

I am able to get this to work by adding support for "import" under "./compat/server" like so:

    "./compat/server": {
      "require": "./compat/server.js",
      "import": "./compat/server.js"
    },

Is this something we can add or get a .mjs version out there for server.js?

[developit]

Yeah this should be doable. Another option would be to change the key to "default" instead of "require". If you want to submit a PR I can give it a review!

[SomethingSexy]

@developit thanks! I will give it a shot.

[SomethingSexy]

@developit "default" worked perfectly!

[developit]

Awesome!