Cannot find module @napi-rs/canvas-linux-arm64-gnu

[orhancelik1]

I'm currently working on nextjs 14 app router. I'm getting error on those versions.

• node version: 18.17.1
• next version: 14.0.0

next.config:

module.exports = {

  node: {
    __dirname: false
  },
  module: {
    rules: [
      {
        test: /\.node$/,
        loader: 'node-loader'
      }
    ]
  },

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });

    config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' });

    return config;
  },
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.shopify.com',
        pathname: '/s/files/**'
      }
    ]
  },
  }

throwing error:

./node_modules/@napi-rs/canvas-win32-x64-msvc/skia.win32-x64-msvc.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

[Brooooooklyn]

@orhancelik1 you need node-loader in webpack: https://github.com/napi-rs/use-napi-rs-packages-with-bundlers/blob/main/webpack.config.js#L20

[orhancelik1]

Thank you for your help, but I still get errors even after I changed my config file.

  webpack(config) {
    config.module.rules.push({
      test: /\.node$/,
      use: ['node-loader']
    });

    config.externals.push({ sharp: 'commonjs sharp', canvas: 'commonjs canvas' });

    return config;
  },

errors:

./node_modules/@napi-rs/canvas/js-binding.js
Module not found: Can't resolve './skia.linux-arm64-gnu.node',
Module not found: Can't resolve '@napi-rs/canvas-linux-arm64-gnu',
Module not found: Can't resolve './skia.linux-arm-gnueabihf.node',

Did I miss something else?