Vite SSG: The requested module 'react-helmet-async' does not provide an export named 'HelmetProvider'

[HHogg]

I'm using the SSG approach that the Vite docs link to, which produces an ESNext build that is then reimported for pre-rendering routes. After adding in react-helmet-async, this approach fails with

import { HelmetProvider } from "react-helmet-async";
         ^^^^^^^^^^^^^^
SyntaxError: Named export 'HelmetProvider' not found. The requested module 'react-helmet-async' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-helmet-async';
const { HelmetProvider } = pkg;

I tried all the variations of defining the import (default, * as) and none of these had any effect.

Workaround
Vite has a ssr.noexternal config, which fixed it for me.

export default defineConfig({
  plugins: [react()],
  ssr: {
    noExternal: ['react-helmet-async'],
  },
});

I also played about with react-helment-async's package.json locally to point the main at the esm build this resolved the issue for me. I also separately defined this package as "type": "module" and specified the "exports" field and this also worked. So I think there's a referencing config that isn't playing nicely with the vite ssg approach.

The vite config is fine for me now so I'm not going to look into this further, but hopefully this issue helps someone else looking in the future.

[AvalonCV]

Same effect here and thanks for providing the ssr.noExternal workaround (which works for me as well).

[alexturpin]

Same problem if this gets imported into something being ran through tsx

[dsherret]

Note that this same issue occurs when importing via an ESM file in Node.

> node asdf.mjs
file:///V:/scratch/asdf.mjs:1
import { HelmentProvider } from "react-helmet-async"
         ^^^^^^^^^^^^^^^
SyntaxError: Named export 'HelmentProvider' not found. The requested module 'react-helmet-async' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

The issue is the CJS exports are not statically analyzable:

var src_exports = {};
__export(src_exports, {
  Helmet: () => Helmet,
  HelmetData: () => HelmetData,
  HelmetProvider: () => HelmetProvider
});
module.exports = __toCommonJS(src_exports);

[gajus]

We fixed it by patching package.json.

diff --git a/package.json b/package.json
index bc9cb36d157e5db2a7614d028a5a59262c8711f6..d9271fd0f0c7489f91ad6ada3fb130a6ddc0a051 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,7 @@
   "version": "2.0.3",
   "description": "Thread-safe Helmet for React 16+ and friends",
   "sideEffects": false,
-  "main": "./lib/index.js",
-  "module": "./lib/index.esm.js",
+  "main": "./lib/index.esm.js",
   "typings": "./lib/index.d.ts",
   "repository": "http://github.com/staylor/react-helmet-async",
   "author": "Scott Taylor <scott.c.taylor@mac.com>",
@@ -12,6 +11,7 @@
   "files": [
     "lib/"
   ],
+  "type": "module",
   "dependencies": {
     "invariant": "^2.2.4",
     "react-fast-compare": "^3.2.2",

[geyang]

@gajus thanks for your pointer! I have submitted a PR #230 to address this issue. There is some module resolution issue that caused the CI to fail, maybe you could take a look?

[daniel-ac-martin]

I've run into a similar issue when running under Jest. (It's fine under webpack.)

One simple workaround appears to be to replace:

import { HelmetProvider } from 'react-helmet-async';

with:

import reactHelmet from 'react-helmet-async';

const { HelmetProvider } = reactHelmet;

Edit: Unfortunately, that then breaks the webpack build.

[daniel-ac-martin]

Patching the CJS module as such seems to fix the issue:

exports.Helmet = Helmet;
exports.HelmetData = HelmetData;
exports.HelmetProvider = HelmetProvider;

(This seems to be what other modules do in their CJS builds.)

i.e. I suspect the solution is to improve the CJS build rather than to switch to the MJS build. (Which is what the PR does.)

I'm not sure why esbuild doesn't do this already though...
react-helmet-async isn't using the most recent version of esbuild; perhaps it's fixed in a new version?

[daniel-ac-martin]

Seems related to this: evanw/esbuild#3029

PS: Updating esbuild makes no difference.

BTW, @staylor, what is the reason for using esbuild? - Could you not just build with tsc?

[daniel-ac-martin]

Here's a more robust (but dirtier) workaround for the calling code:

import reactHelmetDefault, * as reactHelmetNamed from 'react-helmet-async';
const reactHelmet = reactHelmetDefault || reactHelmetNamed;
const { HelmetProvider } = reactHelmet;