Help with barebones Next.js and Paper.js project

[thomas901]

Description/Steps to reproduce

Hi I can't seem to get Paper.js working with an empty Next.js project. If anyone could offer some help with a basic working example that would be great.

1. npm i
2. npm run dev

In src/app/page.tsx

"use client";
import { useEffect, useRef } from "react";
import { PaperScope } from "paper";

export default function Home() {
  useEffect(() => {
    // throws error on any use of paper lib
    new PaperScope();
  }, []);
  return <canvas></canvas>;
}

Resulting error:

⨯ ./node_modules/paper/dist/node/canvas.js:38:0
Module not found: Can't resolve 'jsdom/lib/jsdom/living/generated/utils'

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

Import trace for requested module:
./node_modules/paper/dist/node/self.js
./node_modules/paper/dist/paper-full.js
./src/app/page.tsx
 ○ Compiling /not-found ...
 ⨯ ./node_modules/paper/dist/node/canvas.js:38:0
Module not found: Can't resolve 'jsdom/lib/jsdom/living/generated/utils'

Link to reproduction test-case

https://github.com/thomas901/minimal-reproduction

Expected result

Should run without any errors.

Additional information

[SixK]

As you have messages about jsdom, I would try using paper-jsdom or paper-jsdom-canvas packages instead of paper.
But I have no idea if it's the solution.

[rfried]

I'm running into this same issue with Nuxt 3.8.0. Seems the newest framework versions are expecting something different from importing the paper module.

Here's my reproduction of the issue: https://stackblitz.com/edit/github-dspzws

[alecmolloy]

just came looking for a solution to the same error.

@SixK i am assuming @thomas901 is not trying to render on node, but is trying to render on the client, as his 'use client' directive means. That said, seems like something is triggering paper to assume it should be rendering on the server, hence the error?

[alecmolloy]

tried out a fix someone made with gatsby, which also uses webpack:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        ...(isServer
          ? [
              {
                test: /node_modules\/paper/,
                use: 'null-loader',
              },
            ]
          : []),
      ],
    },
  }),
}

module.exports = nextConfig

sadly still didn't work.

related: #1483

[btmccord]

Anyone figure this out? Having the same issue

[JosefDuda]

What worked for me (Next.js v. 14) was to ensure that Paper.js is ignored in the server code by setting a webpack alias.

next.config.mjs

/** @type {import('next').NextConfig} */

const nextConfig = {
  // ...other settings
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.resolve.alias['paper'] = false;
    }
    return config;
  },
};

export default nextConfig;