Process.env undefined in vite

Question

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?

Answer 1

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

Answer 2

Remember to use the correct prefixes for .env file used in Vite, Nuxt etc. ex.:

Vite .env

//.env file
VITE_BASE_URL: 'example.com'

Nuxt3 .env

//.env file
NUXT_BASE_URL: 'example.com'

OR

define it straight inside defineNuxtConfig

export default defineNuxtConfig({
  vite: {
    define: {
      "process.env.TESS_ENV": 'varaibleXYZ',
    },
  },
});

but the truth is that best way to define envs in Nuxt is using runtimeConfig, accordingly for public or private -> https://nuxt.com/docs/guide/going-further/runtime-config#exposing