danomatic/react-pdf-html

Module not found: Can't resolve 'fs'

Closed this issue · 8 comments

Baaarbz commented

Hi!

I was trying to use the library, following the documentation, but I have the next error:

 ⨯ ./node_modules/react-pdf-html/dist/resolveCssFile.js:7:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

This is the component:

import {Document, Page} from 'react-pdf';
import Html from "react-pdf-html";

export default function Foo() {

    const html = `<html><body><h1>Hello world!</h1></body></html>`;
    return (
        <Document>
            <Page>
                <Html>{html}</Html>
            </Page>
        </Document>
    )
}

This is my package.json:

{
  "name": "foo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.1.1",
    "@material-tailwind/react": "^2.1.8",
    "@react-pdf/renderer": "^3.1.14",
    "jspdf": "^2.5.1",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "react-pdf": "^7.7.0",
    "react-pdf-html": "^1.2.0",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/uuid": "^9.0.7",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

next.config.js:

const nextConfig = {
    webpack: (config) => {
        config.resolve.alias.canvas = false;
        return config;
    },
}

module.exports = nextConfig

I found already this issue #11 and theoretically it was already fixed.

mrzdtydlntm commented

I have same issue when i tried to build it using pnpm. it said:

./node_modules/.pnpm/react-pdf-html@1.2.0_@react-pdf+renderer@3.1.14_react@18.2.0/node_modules/react-pdf-html/dist/resolveCssFile.js
Module not found: Can't resolve 'fs'

I've tried to downgrade the version to 1.1.1 (refer to issue #11 ) but it still causing an error

Stack:
Node: v18.16.0
Next: v13
pnpm: 8.9.2

danomatic commented

@mrzdtydlntm you can downgrade to v1.1.22 and it should work for web. The new version only works for server side rendering until I figure out a solution for this.

  • 👍2
mrzdtydlntm commented

@mrzdtydlntm you can downgrade to v1.1.22 and it should work for web. The new version only works for server side rendering until I figure out a solution for this.

@danomatic thank you. After downgrade it, the error has been disappeared

  • 👍2
Baaarbz commented

@danomatic downgrading to the version 1.1.22 fixed the error!

  • 👍2
jerocosio commented

I think this has been solved now on react-pdf/renderer, so maybe updating the dependencies to the latest version of it would solve the problem.

danomatic commented

@Baaarbz, @mrzdtydlntm, @jerocosio I just pushed a new version v1.2.1 that attempts to avoid the import error for browsers, but I don't have a lot of time to fully test it. Will you please try it out and let me know if it works?

danomatic commented

I'm going to consider this closed until I hear otherwise

splenwilz commented

@danomatic I'm using the new version v1.2.1 and I'm still having the same error `Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found` so I think it has not been resolved, and I'm following the docs.

  • 👍1