Running the parser in a vercel edge function #736

sylvesteraswin · 2022-10-30T18:38:50Z

Hello,

Is it possible to run the parser in an edge function? I am trying to convert static HTML string to a react object in a vercel edge function.

Thanks
Sylvester

remarkablemark · 2022-10-30T19:09:16Z

@sylvesteraswin Yes, it should be possible since this library can be run on both the server and client-side. See Node.js demo.

sylvesteraswin · 2022-10-30T21:59:51Z

@remarkablemark thanks for your quick reply, I am referring to Vercel Edge functions. Looks like it does not support most of the Node.JS APIs.

Here is my example

// /api/sample.tsx

export const config = {
  runtime: "experimental-edge",
};

const handler = async (req: NextRequest) => {
  const element = reactParser(`<html></html>`, {});

  return element;
}

export default handler;

This is the below error I get

[Error: This browser does not support `document.implementation.createHTMLDocument`]

remarkablemark · 2022-10-31T03:15:52Z

Thanks for the response. It seems like Vercel Edge functions is using the browser field of html-dom-parser, which is causing this error. If it didn't try to load the client library, I believe it should work.

Jahrhause · 2022-10-31T13:59:28Z

I am also facing this issue, but just using server-side components in Next.js 13 :(

import parse from 'html-react-parser';

const htmlFromCMS = '<p>testing</p>';

...

return (
      <div>
        {parse(htmlFromCMS)}
      </div>
    );

returns:

Error: This browser does not support `document.implementation.createHTMLDocument`
    at parseFromDocument (webpack-internal:///(sc_server)/./node_modules/html-dom-parser/lib/client/domparser.js:12:11)
    at domparser (webpack-internal:///(sc_server)/./node_modules/html-dom-parser/lib/client/domparser.js:124:23)
    at HTMLDOMParser (webpack-internal:///(sc_server)/./node_modules/html-dom-parser/lib/client/html-to-dom.js:24:22)
    at HTMLReactParser (webpack-internal:///(sc_server)/./node_modules/html-react-parser/index.js:27:23)
    at Textblock (webpack-internal:///(sc_server)/./src/components/modules/Textblock.tsx:109:79)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1167:42)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1211:48)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1811:43)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1257:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1256:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1269:40)

remarkablemark · 2022-10-31T16:10:03Z

@Jahrhause do you have a custom webpack config?

Jahrhause · 2022-11-01T07:07:57Z

Yes I do, this is what I have:

webpack: (config, { isServer }) => {
    config.resolve.aliasFields = ['browser', 'browser.esm'];
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        net: false,
        tls: false,
      };
    }
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },

remarkablemark · 2022-11-01T15:28:20Z

@Jahrhause I think the browser field in your custom webpack config may be causing your issue.

Jahrhause · 2022-11-02T15:13:42Z

@remarkablemark ahh that fixed the issue, sorry about that :)

garrrikkotua · 2022-11-03T13:06:43Z

@remarkablemark Hey! I have the same problem in Vercel Edge Functions, though I have default webpack config (Next.js 13).

Error: This browser does not support document.implementation.createHTMLDocument

In the logs I see it calls the lib\cleint instead of lib\server. Any ideas how to solve it? Can I somehow call the server implementatiion directly?

Thanks!

remarkablemark · 2022-11-03T14:56:42Z

Can someone help me create a reproducible example (e.g., public repository) so I can take a look?

grantmagdanz · 2023-06-21T04:35:47Z

Running into this as well. I'm using Vercel's og image library (which runs in vercel edge functions) to generate OG images for rich text posts. I'd like to use this library to turn HTML into JSX and use it in the og image.

Here is a github repo you can use to reproduce. It's pretty simple:

run pnpm install
run pnpm dev
navigate to localhost:3000/api/og

You should run into it every time.

JunkyDeLuxe · 2023-06-28T07:45:02Z

I confirm this issues still exists and it's can be a hudge problem, because if the error popup
Error: This browser does not support document.implementation.createHTMLDocument
The page in nextjs is fully loaded by the browser, SSR will break because of that.
I did that in order to fix the problem but now I have a hydrating error

'use client';

import { isServer } from '@/helpers/utils/isServer';
import parse from 'html-react-parser';

const DisplayHtmlContent: React.FC<{ content }> = ({ content }) => {
	if (isServer()) {
		return <div>{content}</div>;
	}

	return <div>{parse(content)}</div>;
};

export default DisplayHtmlContent;

remarkablemark · 2023-06-28T15:30:26Z

This may be an issue on Vercel since it seems to be using the browser module of html-dom-parser on the server-side, which is causing this error. Has anyone tried opening an issue on Vercel?

Also, I'd like everyone to check that they're not setting the browser field in webpack config.

remarkablemark · 2023-06-28T15:31:58Z

@grantmagdanz can you share the link to your GitHub repo?

grantmagdanz · 2023-06-28T15:53:49Z

Oh sorry here it is: https://github.com/grantmagdanz/vercel-og-nextjs

remarkablemark · 2023-06-29T02:57:48Z

@grantmagdanz I was able to fix the server error by updating the Webpack config in next.config.js:

const path = require('path');

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules = [
      ...config.module.rules,
      {
        test: /html-react-parser\/index\.js$/,
        resolve: {
          alias: {
            'html-dom-parser': path.join(path.dirname(require.resolve('html-dom-parser')), 'server/html-to-dom.js'),
          },
        },
      },
    ];
    return config;
  },
}

See remarkablemark/vercel-og-nextjs#2

remarkablemark · 2023-06-29T02:59:23Z

Given this server error seems to be coming from Vercel/Webpack/PNPM and not from this library, I'm going to close this issue as won't do.

j4tmr · 2024-03-27T07:23:05Z

@remarkablemark It seems that the solution that was effective before now no longer works. First, I updated to the latest version, 5.1.9. Also, I noticed that the path you used, path.join(path.dirname(require.resolve('html-dom-parser')), 'lib/server/html-to-dom.js'), results in **/node_modules/html-dom-parser/lib/lib/server/html-to-dom.js, so I removed one layer of /lib, but it still doesn't work. Do you have any new ideas?

remarkablemark · 2024-03-27T15:50:41Z

@j4tmr try this:

path.join(path.dirname(require.resolve('html-dom-parser')), 'server/html-to-dom.js')

You can verify the file path on UNPKG

j4tmr · 2024-03-29T07:15:13Z

@remarkablemark I think it's not because of the URL issue; I corrected the URL, and yet, it still reports, Error: This browser does not support document.implementation.createHTMLDocument.

remarkablemark · 2024-03-29T16:12:40Z

@j4tmr can you open node_modules/html-dom-parser in your IDE and verify the full path to server/html-to-dom.js? You can copy that path and update in your webpack config

j4tmr · 2024-04-08T06:26:46Z

@remarkablemark Thank you for your reply. I tested it again today, and my webpack code is like this.

webpack: (config) => {
    console.log(path.join(path.dirname(require.resolve('html-dom-parser')), 'server/html-to-dom.js'))
    config.module.rules = [
      ...config.module.rules,
      {
        test: /html-react-parser\/index\.js$/,
        resolve: {
          alias: {
            'html-dom-parser': path.join(path.dirname(require.resolve('html-dom-parser')), 'server/html-to-dom.js'),
          },
        },
      },
    ];
    return config;
  },

I console.logged the URL, and the result looks like this. /Users/UserName/VSCode/ProjectName/node_modules/html-dom-parser/lib/server/html-to-dom.js I am sure that I can directly access the file via this URL. On a Mac's VSCode, you can just use command + click. I tested using a relative URL or pasting the URL directly without using path, and the result was the same.

j4tmr · 2024-04-08T07:33:57Z

@remarkablemark
I changed test: /html-react-parser\/index\.js$/ to test: /html-react-parser\/lib\/index\.js$/ it worked.

remarkablemark added the question Further information is requested label Oct 30, 2022

remarkablemark added the wontfix This will not be worked on label Jun 29, 2023

remarkablemark closed this as completed Jun 29, 2023

dkokotov mentioned this issue Sep 14, 2023

Add support for edge environments like Vercel Edge, Cloudflare workers, etc remarkablemark/html-dom-parser#502

Closed

remarkablemark mentioned this issue Oct 24, 2023

Vercel Edge not Supported #1113

Closed

akzone mentioned this issue Nov 20, 2023

Got "window is not defined" when using with next js moveyourdigital/editorjs-blocks-react-renderer#54

Open

7 tasks

jlarmstrongiv mentioned this issue Apr 17, 2024

Usage in web worker #1403

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Running the parser in a vercel edge function #736

Running the parser in a vercel edge function #736

sylvesteraswin commented Oct 30, 2022

remarkablemark commented Oct 30, 2022

sylvesteraswin commented Oct 30, 2022

remarkablemark commented Oct 31, 2022

Jahrhause commented Oct 31, 2022 •

edited

Loading

remarkablemark commented Oct 31, 2022

Jahrhause commented Nov 1, 2022 •

edited

Loading

remarkablemark commented Nov 1, 2022

Jahrhause commented Nov 2, 2022

garrrikkotua commented Nov 3, 2022 •

edited

Loading

remarkablemark commented Nov 3, 2022

grantmagdanz commented Jun 21, 2023

JunkyDeLuxe commented Jun 28, 2023

remarkablemark commented Jun 28, 2023 •

edited

Loading

remarkablemark commented Jun 28, 2023

grantmagdanz commented Jun 28, 2023

remarkablemark commented Jun 29, 2023 •

edited

Loading

remarkablemark commented Jun 29, 2023

j4tmr commented Mar 27, 2024 •

edited

Loading

remarkablemark commented Mar 27, 2024 •

edited

Loading

j4tmr commented Mar 29, 2024

remarkablemark commented Mar 29, 2024

j4tmr commented Apr 8, 2024

j4tmr commented Apr 8, 2024

Running the parser in a vercel edge function #736

Running the parser in a vercel edge function #736

Comments

sylvesteraswin commented Oct 30, 2022

remarkablemark commented Oct 30, 2022

sylvesteraswin commented Oct 30, 2022

remarkablemark commented Oct 31, 2022

Jahrhause commented Oct 31, 2022 • edited Loading

remarkablemark commented Oct 31, 2022

Jahrhause commented Nov 1, 2022 • edited Loading

remarkablemark commented Nov 1, 2022

Jahrhause commented Nov 2, 2022

garrrikkotua commented Nov 3, 2022 • edited Loading

remarkablemark commented Nov 3, 2022

grantmagdanz commented Jun 21, 2023

JunkyDeLuxe commented Jun 28, 2023

remarkablemark commented Jun 28, 2023 • edited Loading

remarkablemark commented Jun 28, 2023

grantmagdanz commented Jun 28, 2023

remarkablemark commented Jun 29, 2023 • edited Loading

remarkablemark commented Jun 29, 2023

j4tmr commented Mar 27, 2024 • edited Loading

remarkablemark commented Mar 27, 2024 • edited Loading

j4tmr commented Mar 29, 2024

remarkablemark commented Mar 29, 2024

j4tmr commented Apr 8, 2024

j4tmr commented Apr 8, 2024

Jahrhause commented Oct 31, 2022 •

edited

Loading

Jahrhause commented Nov 1, 2022 •

edited

Loading

garrrikkotua commented Nov 3, 2022 •

edited

Loading

remarkablemark commented Jun 28, 2023 •

edited

Loading

remarkablemark commented Jun 29, 2023 •

edited

Loading

j4tmr commented Mar 27, 2024 •

edited

Loading

remarkablemark commented Mar 27, 2024 •

edited

Loading