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:
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;
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;
},
};