I trying to use Tesserract.js https://github.com/naptha/tesseract.js#documentation with Vue.js which uses Vite as bundler.
My problem is that I get this error:
Cannot read properties of undefined (reading 'TESS_ENV')
This error happens inside:
module.exports = {
...defaultOptions,
workerPath: (typeof process !== 'undefined' && process.env.TESS_ENV === 'development')
? resolveURL(`/dist/worker.dev.js?nocache=${Math.random().toString(36).slice(3)}`)
: `https://unpkg.com/tesseract.js@v${version}/dist/worker.min.js`,
/*
* If browser doesn't support WebAssembly,
* load ASM version instead
*/
corePath: `https://unpkg.com/tesseract.js-core@v${dependencies['tesseract.js-core'].substring(1)}/tesseract-core.${typeof WebAssembly === 'object' ? 'wasm' : 'asm'}.js`,
};
Well, in vite I need to use import.meta.env.MODE instead of process.env.TESS_ENV
I tried to change the tesseract.js code. I went inside:
node_modules -> tesseract -> src -> worker -> browser -> defaultOptions.js
And changed it to import.meta.env.MODE but for some reason the code does not get applied and it still displays me the old error.
How do I make this work?
I got it:
export default defineNuxtConfig({
vite: {
define: {
"process.env.TESS_ENV": process.env.ENV,
},
},
});
I need to defined it, now its not undefined anymore
Remember to use the correct prefixes for .env file used in Vite, Nuxt etc. ex.:
for Vite
VITE_BASE_URL: 'example.com'
for Nuxt3
NUXT_BASE_URL: 'example.com'
define it straight inside defineNuxtConfig