Canvas.node webpack isn't working with node-loader

Support
,
1

I’m trying to deploy my next.js website for the first time on Netlify. Everything works and builds properly locally, but when I try on Netlify, I get dependency errors. I’ve discovered that npm install canvas actually installs canvas.node (which is incorrect, but not changeable, since remark-prism requres jsdom which requires canvas), so I also installed node-loader and set up my next.config.js as follows:

module.exports = {

  reactStrictMode: true,

  module: {

    rules: [

      {

        test: /\.node$/,

        loader: "node-loader",

      },

    ],

  }

}

When I try to deploy, I continue to get an error

28 PM: ./node_modules/canvas/build/Release/canvas.node
2:55:28 PM: Module parse failed: Unexpected character ‘’ (1:0)
2:55:28 PM: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
2:55:28 PM: (Source code omitted for this binary file)
2:55:28 PM: > Build error occurred
2:55:28 PM: Error: > Build failed because of webpack errors
2:55:28 PM: at /opt/build/repo/node_modules/next/dist/build/index.js:397:19
2:55:28 PM: at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
2:55:28 PM: at async Object.build [as default] (/opt/build/repo/node_modules/next/dist/build/index.js:77:25)
2:55:28 PM: ​
2:55:28 PM: ────────────────────────────────────────────────────────────────

I tried to post the full build log, but got an error about only being able to post 6 links at a time?

  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

2

Hi @Courtney,

If I’m not mistaken, the way you can extend webpack’s config in Nextjs is mentioned here:

which seems to be different than how you’re trying to do it.

3

Hey hrishikesh - I’ve read that page several times, and tried several methods of extending the webpack. This is, though, my first time working with both webpack and Next.js. I tried swapping back to what is listed on that page (below), but get errors about missing externals

12:59:35 PM: Critical dependency: the request of a dependency is an expression

12:59:35 PM: ./node_modules/ws/lib/buffer-util.js

12:59:35 PM: Module not found: Can’t resolve ‘bufferutil’ in ‘/opt/build/repo/node_modules/ws/lib’

12:59:35 PM: ./node_modules/ws/lib/validation.js

which is what I was trying to circumvent. I don’t see anything in this page about loading externals, so I’m not sure how Next.js handles it. Any other sources I’ve googled seem quite different, so I don’t think they will help.

module.exports = {

  webpack: (config, options) => {

    config.module.rules.push({

      test: /\.node$/,

      use: [

        {

          loader: "node-loader"

        },

      ],

    })

    return config

  }

}
4

I think you could try adding externals like this:

https://gist.githubusercontent.com/codeBelt/788d5d4cdd58ca0b8bef764694fc7f19/raw/14e3b357be2f94de8f8d66a12aebb1075052a056/next.config.js

Source:

5

I was stuck on this exact same error trying to use Prism on Netlify for a few hours today and finally found a solution, so going to post what worked for me.

I was using NextJS 12, and needed to downgrade to NextJS 11 and also set my target to be ‘experimental-server less-trace’. There are more details available here if you’re interested:

https://github.com/netlify/netlify-plugin-nextjs/issues/527

https://github.com/vercel/next.js/issues/8797#issuecomment-533841333

https://nextjs.org/docs/advanced-features/output-file-tracing

In package.json I have the next dependency: "next": "^11.1.2",

My next.config.js is:

/** @type {import('next').NextConfig} */
module.exports = {
  target: "experimental-serverless-trace",
  reactStrictMode: true,
};