javascriptreactjsopencvnext.js

use openCv.js with next.js


I am trying to import openCv.js into a next.js app

a. the project is created with: npx create-next-app

b. then install: $ yarn add @techstark/opencv-js

c. import opencv with: import cv from "@techstark/opencv-js"

d. only the previous line is enough to report the error:

./node_modules/@techstark/opencv-js/dist/opencv.js:30:1175 Module not found: Can't resolve 'fs'

f. as I have read, adding the following line to the webpack.config.js does not try to resolve fs

        module.exports = {
          resolve: {
            modules: [...],
            fallback: {
              fs: false,
              path: false,
              crypto: false
            }
          }
        };

but it doesn't seem to work, and the error continues.

g. However creating a very similar project with react (instead of next.js):

    create-react-app
    $ yarn add @techstark/opencv-js

the same code (minimally adapted to react) works correctly and I can use the functions of opencv.js without any problem

h. My questions:

  1. is there any way to load opencv.js in browser (client side) without resolving fs?
  2. Why does it work in react and not in next.js?

this is ´index.js´ of next.js app with error:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React,{useRef, useState} from 'react'
import Script from 'next/script'
//---
import dynamic from 'next/dynamic'
import cv from "@techstark/opencv-js"

export default function Home() {
  const canvas1 = useRef()
  const img1 = useRef()
  

function handleFileChange(e) {
    const files = e.target.files
    if (!files || files.length === 0) {
      return
    }
    const file = files[0]
    var fr = new FileReader()
    fr.readAsDataURL(file)
    var img = img1.current
    fr.onload = (evt) => {
            if( evt.target.readyState === FileReader.DONE) {
              img.src = evt.target.result
            }
    }
  }    

  function handleImageLoad() {
    var img=img1.current
    img2canvas(img,canvas1.current)
    img.className = ""
  }

  function img2canvas(img, canvas) {
    var ctx = canvas.getContext('2d')              
    var ratioImage = img.naturalWidth / img.naturalHeight
    var widthAdj = 400 //canvas.width
    var heightAdj = Math.ceil(widthAdj / ratioImage)

    canvas.width = widthAdj //(img.width/2)
    canvas.height =heightAdj // (img.height/2)

    ctx.width = widthAdj + 'px'   //(img.width/2) + 'px'
    ctx.height = heightAdj + 'px'  //(img.height/2) + 'px'
    ctx.drawImage(img, 0, 0, widthAdj, heightAdj)
  } 

  async function testOpenCv() {
    var img = img1.current
    var mat = cv.imread(img)  
    await cv.cvtColor(mat,mat, openCv.COLOR_RGBA2GRAY)
    await cv.bitwise_not(mat, mat)
    await cv.imshow(canvas1.current, mat)
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1>Test</h1>
        <div>
            <label class="btn">file: </label>
            <input id="file" type="file" onChange={handleFileChange} />            
            <br />
            <button type="button" onClick={testOpenCv}>Test OpenCv!</button>
            <br />
            <br />
        </div>
        <div >
            <img src="" alt="testimg" ref={img1} onLoad={handleImageLoad} style={{display:"none"}}/>
            <br />
        </div>
        <div>
            <canvas ref={canvas1}></canvas>                
        </div>
      </main>
    </div>
  )
}

This is the App.js of react app (works ok)

import logo from './logo.svg';
import './App.css';
import cv from "@techstark/opencv-js";
import React,{useRef, useState} from 'react';


function App() {
  const canvas1 = useRef()
  const img1 = useRef()

function handleFileChange(e) {
    const files = e.target.files;
    if (!files || files.length === 0) {
      return
    }
    const file = files[0];     
    var fr = new FileReader();
    fr.readAsDataURL(file);
    var img = img1.current
    fr.onload = (evt) => {
            if( evt.target.readyState === FileReader.DONE) {
              img.src = evt.target.result;              
            }
    }
  }    

  function handleImageLoad() {
    var img=img1.current
    img2canvas(img,canvas1.current)
    img.className = ""
  }

  function img2canvas(img, canvas) {
    var ctx = canvas.getContext('2d')              
    var ratioImage = img.naturalWidth / img.naturalHeight;
    var widthAdj = 400 //canvas.width;
    var heightAdj = Math.ceil(widthAdj / ratioImage)

    canvas.width = widthAdj //(img.width/2);
    canvas.height =heightAdj // (img.height/2);

    ctx.width = widthAdj + 'px'   //(img.width/2) + 'px';
    ctx.height = heightAdj + 'px'  //(img.height/2) + 'px';
    ctx.drawImage(img, 0, 0, widthAdj, heightAdj);    
  } 

  async function testOpenCv() {
    var img = img1.current
    var mat = cv.imread(img)  
    await cv.cvtColor(mat,mat, cv.COLOR_RGBA2GRAY);
    await cv.bitwise_not(mat, mat)
    await cv.imshow(canvas1.current, mat);    
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Test</h1>
        <div>
            <label class="btn">file: </label>
            <input id="file" type="file" onChange={handleFileChange} />            
            <br />
            <button type="button" onClick={testOpenCv}>Test OpenCv!</button>
            <br />
            <br />
        </div>
        <div >
            <img src="" alt="testimg" ref={img1} onLoad={handleImageLoad} style={{display:"none"}}/>
            <br />
        </div>
        <div>
            <canvas ref={canvas1}></canvas>                
        </div>
      </header>
    </div>
  );
}

export default App;

Solution

  • thanks to the answer from @juliomalves I was able to solve the problem. To skip the resolution of fs in the browser I had to add a custom webpack configuration. This is done in the next.config.js file like this:

    module.exports = {
      webpack5: true,
      webpack: (config) => {
        config.resolve.fallback = { fs: false, path:false, "crypto": false  };
        return config;
      },
    };