react-helmet-async missing HelmetProvider export

I'm on the canary version testing out jsxImportSourceTypes and ran into an issue when switching to using npm specifiers for react@18.0.2. I have the following entry in my deno.jsonc imports.

"react-helmet-async": "npm:react-helmet-async@2",

"react-helmet-async": "npm:react-helmet-async@2",

My editor has no issue showing that it recognizes the HelmetProvider. You can see in the attached screenshots that it is recognizing that I'm importing the class. However, when my code runs, I get the following error.

error: Uncaught SyntaxError: The requested module 'react-helmet-async' does not provide an export named 'HelmetProvider'
import { HelmetProvider } from "react-helmet-async";
         ^
    at <anonymous> (file:///home/kyle/Projects/deno/react_app/server.tsx:4:10)

error: Uncaught SyntaxError: The requested module 'react-helmet-async' does not provide an export named 'HelmetProvider'
import { HelmetProvider } from "react-helmet-async";
         ^
    at <anonymous> (file:///home/kyle/Projects/deno/react_app/server.tsx:4:10)

I tried setting nodeModulesDir to true in my deno.jsonc so that it would create a node_modules directory so I could verify it is exported, and it is. It's present in the index.js, index.esm.js, and index.d.ts. Yet when I run deno, it seems to think it isn't.

Deno AI Helper•17d ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the information you've provided, it seems like there might be an issue with how the react-helmet-async package exports HelmetProvider or how Deno is resolving the module. One thing to check is whether the version of react-helmet-async you are using is fully compatible with Deno and whether it exports HelmetProvider in a way that Deno can understand. Since you are using a canary version of Deno, there might be changes or regressions that affect module resolution. Also, ensure that your deno.jsonc configuration is correct and that you have enabled the necessary flags to support npm specifiers. Here's a basic example of what your deno.jsonc might look like with jsxImportSourceTypes and nodeModulesDir:

{
  "compilerOptions": {
    "jsxImportSourceTypes": {
      "react": "npm"
    }
  },
  "nodeModulesDir": true,
  "imports": {
    "react-helmet-async": "npm:react-helmet-async@2"
  }
}

{
  "compilerOptions": {
    "jsxImportSourceTypes": {
      "react": "npm"
    }
  },
  "nodeModulesDir": true,
  "imports": {
    "react-helmet-async": "npm:react-helmet-async@2"
  }
}

Please note that the advice provided here is not based on the Deno documentation, and I advise you to double-check the accuracy of the advice given. If the issue persists, you may want to reach out to the maintainers of react-helmet-async or seek assistance from the Deno community for further troubleshooting.

Helpful Links: npm: specifiers | Deno Docs node: specifiers | Deno Docs How to publish Deno modules to NPM Deno 1.38: HTML doc generator and HMR Deno 1.25 Release Notes Workers | Deno Docs

dsherret•17d ago

FWIW, I get the same error 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:

> 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 that the cjs exports are not statically analyzable in that package in order to create named exports:

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

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

The following works in both node and deno:

import reactHelmentAsync from "react-helmet-async"

console.log(reactHelmentAsync.HelmetProvider);

import reactHelmentAsync from "react-helmet-async"

console.log(reactHelmentAsync.HelmetProvider);

> node asdf.mjs
[class _HelmetProvider extends Component] { canUseDOM: false }
V:\scratch
> deno run -A asdf.mjs
[class _HelmetProvider extends Component] { canUseDOM: false }

> node asdf.mjs
[class _HelmetProvider extends Component] { canUseDOM: false }
V:\scratch
> deno run -A asdf.mjs
[class _HelmetProvider extends Component] { canUseDOM: false }

KyleJune•17d ago

It's strange that it's not working in node either, their own documentation example shows importing HelmetProvider the way I was.

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

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

You can see that import in the first example they have on their npm package. https://www.npmjs.com/package/react-helmet-async#usage Oh I see why it might not work when you tried it in node, it's because you are using mjs extension, which their documentation probably assumes someone is importing it using CommonJS. I'll change my code to import it the way you describe since the exports are not supported in ESM.

dsherret•17d ago

yeah, it would work for cjs importing it because it all gets transpiled to cjs. There seems to be people running into a similar issue here: https://github.com/staylor/react-helmet-async/issues/208

GitHub

Vite SSG: The requested module 'react-helmet-async' does not provi...

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 w...

KyleJune•6d ago

Been a while but I returned to this. I was having an issue still after switching to using import reactHelmetAsync from "react-helmet-async"; When I'm using esbuild, I end up getting an error about there not being a default export. I included a screenshot of how I'm building my app using esbuild with the platform being "browser" and the format being "esm". Before when I had it working with esm.sh, I had platform as "neutral" but that doesn't work with npm specifiers. The only way I could get it to work both in my build and on the server was to do this.

import * as reactHelmetAsync from "react-helmet-async";
const { HelmetProvider, Helmet } = reactHelmetAsync.default ?? reactHelmetAsync;

import * as reactHelmetAsync from "react-helmet-async";
const { HelmetProvider, Helmet } = reactHelmetAsync.default ?? reactHelmetAsync;

But I get a build warning about how default isn't exported.

KyleJune•4d ago

discord shows screenshots poorly, but if you click on them you can see the full screenshots. Basically if I build for the browser with esm, default is undefined. If I do a neutral build, npm specifiers don't work. Seems like I won't be able to workaround this warning. I found a workaround for the esbuild warning.

import * as reactHelmetAsync from "react-helmet-async";
const reactHelmetAsyncFixed = reactHelmetAsync;
const { HelmetProvider, Helmet } = reactHelmetAsyncFixed.default ??
  reactHelmetAsync;

import * as reactHelmetAsync from "react-helmet-async";
const reactHelmetAsyncFixed = reactHelmetAsync;
const { HelmetProvider, Helmet } = reactHelmetAsyncFixed.default ??
  reactHelmetAsync;

esbuild warns if I do reactHelmetAsync.default, doesn't if I do reactHelmetAsyncFixed.default. I'll just tell users to import Helmet from my module that will re-export it so that it's easier for them to use in their builds.

Deno Join

Chat about Deno, a modern runtime for JavaScript and TypeScript.

17KMembers

View on Discord

Where has std/hash/sha3.ts gone?Basically what the title says. This was removed from std/ at some point, but I can't find the curren Loading a module with `.load_main_es_module_from_code()` and TS module loader doesn't transpileWhile working on a script runtime I ran into a curious issue where the main module I load doesn't ge StaticModuleLoader: why must the ModuleSpecifier be a URL?hey everyone, I'm trying to pass a `StaticModuleLoader` to my runtime to enable specific imports. Ea Writing CSS in FreshAre there any alternatives in how we write CSS other than Tailwind-like (inline & abbreviated)? I p Passing C enum to function and read in TypeScriptFirst of all I am not a trained software developper, so please forgive me if I am missing some basic intergrating Flowbite with freshI want to intergrate Flowbite with Fresh. Any idea on the best way to go about this? And will I be l get file path from FsFilegiven a `Deno.FsFile`, is there a way to get its path (or at least a filename)? i can't really see bulr to rtransparent gradientI am working on reactjs project in the project it should have blur to transperant bg take a look at Streaming video from browser to deno serverTrying to stream video from Chrome to my local Deno server but having trouble understanding how to p Migrating from Deno.run to Deno.command, how to readLines?At the moment I have this: ```ts const command = new Deno.command('...'); for await (const line of r How to abstract tests to allow running different functions against the same test suite?I've set up two suites of tests like this: https://github.com/gustwindjs/gustwind/tree/develop/htmli Fresh tabler icon classHello I want to use the fresh tabler icon lib without using the npm version like this: ```ts { "i Redirection in Testing is Always Valued FalseThis is my first test in full stack framework, especially for Fresh. I'm not sure why the `redirecte Neovim setup with LSP formatting & lintinghello, I am trying to set up the fmt & linting using nvim-lspconfig with neovim Anyone know how i s block js with #[op2] fn without blocking rust threadI'm using deno_core and I'm looking for a way to block the js main thread without using a sync funct Connect to managed databases from "INSIDE" of Deno DeployHi I am trying to connect to a managed database from INSIDE another application in deno Deploy. But something wrong with deno i thinkidk but sh1t wont work?Buffer.from equivalent in deno?on node.js ```js const signerPvtKey = Buffer.from( // process.env.PVT_KEY PVT_KEY, "he 'Deno.exit' is not allowed in this context.Locally I can do in a nest project npm run build deno run -A .enviroment/deploy.ts and it works co WASM version of SWC.RC errors only in debug modeNOTE: This is a bare bones example just to illustrate the problem: we aren't transpiling anything ju