Cannot find module './v6' from 'node_modules/skia-canvas/lib/index.js'

[andyslack]

Firstly, thank you for developing this, it seems like a lot of noise to get this working in Node, so, thanks for contributing to the open source community.

When I installed this and run it, I am getting this error

 Cannot find module './v6' from 'node_modules/skia-canvas/lib/index.js'

    Require stack:
      node_modules/skia-canvas/lib/index.js
      node_modules/@loskir/styled-qr-code-node/dist/index.js
      src/modules/qrcodes/qrcode.service.ts

import { QRCodeCanvas } from "@loskir/styled-qr-code-node";
const qrCode = new QRCodeCanvas({
                data: "https://example.com",
            });

Node: v19.0.0 NPM: 9.4.2

Please advise on what else you would need to help.

Thank you in advanced.

[andyslack]

@Loskir any news on this?

[Loskir]

Hello! Hopefully I'll be able to look into it later today

[Loskir]

@andyslack seems to be an issue with your setup. v6 is a binary file that's chosen based on OS, architecture and other factors. Could you share more details of your environment? Have you also tried reinstalling node_modules?

[andyslack]

Hi @Loskir

Yes, I deleted my node_modules and package-lock.json and I'm getting the same error.

I'm on a Macbook Pro, Apple M2 OS Ventura 13.3.1 (22E261) Node: v19.0.0 NPM: 9.4.2

Build works fine, when I run tsc

//tsconfig.json

{
  "compilerOptions": {
    "skipLibCheck": true,
    "allowJs": true,
    "lib": ["es5", "es6", "dom", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "target": "ESNext",
    "sourceMap": false,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "noLib": false,
    "types": ["node", "jest"],
  },

  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist", "**/*spec.ts", "**/*.test.spec.ts", "**/*.test.config.ts", ]
}

I am using NestJs

When I run my test to see if the module works I get the error:

Cannot find module './v6' from 'node_modules/skia-canvas/lib/index.js'

    Require stack:
      node_modules/skia-canvas/lib/index.js
      node_modules/@loskir/styled-qr-code-node/dist/index.js
      src/modules/qrcodes/qrcode.service.ts
      src/modules/qrcodes/qrcode.module.ts
      src/modules/qrcodes/qrcode.constants.ts
      src/modules/qrcodes/qrcode.service.test.spec.ts

Please let me know if there is anything else I can provide to help.

[Loskir]

Could you create a clean project and see if the issue is still there?

What's inside node_modules/skia-canvas in your project? Here's what I have:

What could be the case here is either npm didn't install binaries properly or the correct binary didn't exist for your system. If the issue persists I suggest creating an issue at https://github.com/samizdatco/skia-canvas/issues

[andyslack]

Looks like you are right, here is a closed issue on their package:

https://github.com/samizdatco/skia-canvas/issues/103

For future reference:

For anyone else coming across this issue, ensure that in your webpack config you have skia-canvas listed under the externals property:

module.exports = {
  // ...(other webpack config)
  externals: { 
    // ...
    'skia-canvas': 'skia-canvas'
  }
}

The issue stems from webpack trying to build with the skia-canvas package as if it's all JS when it actually contains a binary.

[andyslack]

Actually, the project does not use Webpack, this error is happening when Jest runs, humm...

[juaoose]

samizdatco/skia-canvas#103

Did you find a solution?