require is not defined in ES module scope #68

Hsinky · 2024-02-05T06:38:14Z

when run nuxt dev && electron .
error
require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '[path]\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

help me,please!

The text was updated successfully, but these errors were encountered:

Hsinky · 2024-02-05T08:59:13Z

It worked ! when i remove "type": "module" in package.json，but，I want to use es6，how to update?

angelhdzdev · 2024-02-05T19:45:01Z

It worked ! when i remove "type": "module" in package.json，but，I want to use es6，how to update?

~/tsconfig.json

{
...
"compilerOptions": {
  "module: "es6" 
  // or target: "es6"
}
}

Maybe?

Hsinky · 2024-02-07T00:34:32Z

It worked ! when i remove "type": "module" in package.json，but，I want to use es6，how to update?

~/tsconfig.json
{
...
"compilerOptions": {
  "module: "es6" 
  // or target: "es6"
}
}
Maybe?

Thanks for your help! but ,Still the same error

angelhdzdev · 2024-02-07T00:36:56Z

By the way, I never run nuxt dev && electron .. I only run nuxt dev and I get the electron window.

Hsinky · 2024-02-07T00:44:43Z

By the way, I never run nuxt dev && electron .. I only run nuxt dev and I get the electron window.

Realy?ummm，I try it again，Yes，I got the electron window when i remove type:module in package.json,Otherwise, it would be the same error

Hsinky · 2024-02-07T00:53:43Z

angelhdzdev · 2024-02-07T00:57:42Z

Can you tell more about your environment?
Are you using JavaScript with require?

Hsinky · 2024-02-07T01:01:25Z

No require is used in the code
node：v20.11.0
"@nuxt/ui": "^2.13.0",
"nuxt": "^3.10.0",
"vue": "^3.4.15",
"vue-router": "^4.2.5"
"electron-builder": "^24.9.1",
"electron": "^28.2.1",
"nuxt-electron": "^0.7.0",
"vite-plugin-electron": "^0.15.6",
"vite-plugin-electron-renderer": "^0.14.5"
PC OS：win 10

Hsinky · 2024-02-07T01:05:35Z

Can you tell more about your environment? Are you using JavaScript with require?

nuxt-electron

angelhdzdev · 2024-02-07T01:10:34Z

I'm not from the team by the way 😁

Just wanted to help. I'm starting with Electron and Nuxt, had an issue with the preload, and solved it.

All I've read on the internet mentions removing "type": "module" from package.json to get it working.

Both Nuxt and Electron are ESM ready:
https://www.electronjs.org/docs/latest/tutorial/esm
https://nuxt.com/docs/guide/concepts/esm

So, do you want to get rid of the error, or you want to have your .js files with ESM imports instead of require?

(will be playing with tsconfig.json to see if I find something)

Hsinky · 2024-02-07T01:13:53Z

I'm not from the team by the way 😁

Just wanted to help. I'm starting with Electron and Nuxt, had an issue with the preload, and solved it.

All I've read on the internet mentions removing "type": "module" from package.json to get it working.

Both Nuxt and Electron are ESM ready: https://www.electronjs.org/docs/latest/tutorial/esm https://nuxt.com/docs/guide/concepts/esm

So, do you want to get rid of the error, or you want to have your .js files with ESM imports instead of require?

(will be playing with tsconfig.json to see if I find something)

Thanks for your help again!I wrote the code in nuxt-electron(https://nuxt.com/modules/electron)

angelhdzdev · 2024-02-07T01:21:50Z

Hmmm... 🤔
electron-vite/vite-plugin-electron#186

Edit: And I think the renderer option in nuxt.config.ts > electron is for that purpose...

angelhdzdev · 2024-02-07T01:35:15Z

Update

I'm getting somewhere... 👀

angelhdzdev · 2024-02-07T02:31:59Z

Stay tuned to electron-vite/vite-plugin-electron#186

Hsinky · 2024-02-08T01:20:23Z

I'm getting somewhere

My question is same to you,So,Did you solve it？

angelhdzdev · 2024-02-08T01:26:19Z

I'm getting somewhere

My question is same to you,So,Did you solve it？

Not yet. Will keep playing with the renderer options until I solve it and will let you know.

Hsinky · 2024-02-08T01:27:34Z

Not yet. Will keep playing with the renderer options until I solve it and will let you know.

Thanks!!

angelhdzdev · 2024-02-09T03:25:24Z

Solution

Update vite-plugin-electron to 0.28.1, and add "type": "module" in package.json.

Edit: You'll get an error because of __dirname in electron/main when defining process.env.ROOT. Replace with process.cwd():

process.env.ROOT = path.join(process.cwd(), '..')
process.env.DIST = path.join(process.env.ROOT, 'dist-electron')
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? path.join(process.env.ROOT, 'public')
  : path.join(process.env.ROOT, '.output/public')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const preload = path.join(process.env.DIST, 'preload.js')

Solution Revisited

#68 (comment)

TristanDuck · 2024-02-22T02:59:08Z

Tried all the suggestions here but still getting this:

angelhdzdev · 2024-02-22T03:44:37Z

Tried all the suggestions here but still getting this:

Show package.json and nuxt.config please.

TristanDuck · 2024-02-22T03:49:55Z

Tried all the suggestions here but still getting this:

Show package.json and nuxt.config please.

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  typescript: {
    shim: false,
  },
  ssr: false,
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
      {
        entry: 'electron/preload.ts',
        onstart(args) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          args.reload()
        },
      },
    ],
    renderer: {},
  },
  modules: [
    'nuxt-electron',
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
  ],
  build: {
    transpile: ['vuetify'],
  },
  devtools: { enabled: true },
})

{
  "name": "nuxt-app",
  "version": "1.0.0",
  "private": true,
  "main": "dist-electron/main.js",
  "type": "module",
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build --prerender && electron-builder",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^2.6.4",
    "electron": "^28.2.4",
    "electron-builder": "^24.12.0",
    "eslint": "^8.56.0",
    "nuxt": "^3.10.1",
    "nuxt-electron": "^0.7.0",
    "sass": "^1.70.0",
    "vite-plugin-electron": "0.28.1",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vite-plugin-vuetify": "^2.0.1",
    "vuetify": "^3.5.3"
  }
}

angelhdzdev · 2024-02-22T09:51:07Z

Tried all the suggestions here but still getting this:

Show package.json and nuxt.config please.

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  typescript: {
    shim: false,
  },
  ssr: false,
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
      {
        entry: 'electron/preload.ts',
        onstart(args) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          args.reload()
        },
      },
    ],
    renderer: {},
  },
  modules: [
    'nuxt-electron',
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
  ],
  build: {
    transpile: ['vuetify'],
  },
  devtools: { enabled: true },
})

{
  "name": "nuxt-app",
  "version": "1.0.0",
  "private": true,
  "main": "dist-electron/main.js",
  "type": "module",
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build --prerender && electron-builder",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^2.6.4",
    "electron": "^28.2.4",
    "electron-builder": "^24.12.0",
    "eslint": "^8.56.0",
    "nuxt": "^3.10.1",
    "nuxt-electron": "^0.7.0",
    "sass": "^1.70.0",
    "vite-plugin-electron": "0.28.1",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vite-plugin-vuetify": "^2.0.1",
    "vuetify": "^3.5.3"
  }
}

Please, check your electron/main.ts that matches this:
#68 (comment)

angelhdzdev · 2024-02-22T10:48:46Z

Tried all the suggestions here but still getting this:

SOLUTION

In ~/electron/main.ts, replace process.env.ROOT = path.join(process.cwd(), '..') or process.env.ROOT = path.join(__dirname, '..')
with process.env.ROOT = path.join(import.meta.url, '..').

As per the error shown, __dirname doesn't work in ES6 modules.
Replacement for modules is import.meta.url to get the path to the electron/main.ts file (to itself) and from there, 2 levels up to reach the CWD (Current Working Directory, the root of the nuxt project).

TristanDuck · 2024-02-22T22:25:55Z

Tried all the suggestions here but still getting this:

SOLUTION

In ~/electron/main.ts, replace process.env.ROOT = path.join(process.cwd(), '..') or process.env.ROOT = path.join(__dirname, '..') with process.env.ROOT = path.join(import.meta.url, '..').

As per the error shown, __dirname doesn't work in ES6 modules. Replacement for modules is import.meta.url to get the path to the electron/main.ts file (to itself) and from there, 2 levels up to reach the CWD (Current Working Directory, the root of the nuxt project).

This worked! Thanks for the help.

Hsinky · 2024-02-26T08:17:57Z

Solution

Update vite-plugin-electron to 0.28.1, and add "type": "module" in package.json.

Edit: You'll get an error because of __dirname in electron/main when defining process.env.ROOT. Replace with process.cwd():
process.env.ROOT = path.join(process.cwd(), '..')
process.env.DIST = path.join(process.env.ROOT, 'dist-electron')
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? path.join(process.env.ROOT, 'public')
  : path.join(process.env.ROOT, '.output/public')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const preload = path.join(process.env.DIST, 'preload.js')

Thanks!!! There are other mistakes.

angelhdzdev · 2024-02-26T08:24:59Z

Solution

Update vite-plugin-electron to 0.28.1, and add "type": "module" in package.json.
Edit: You'll get an error because of __dirname in electron/main when defining process.env.ROOT. Replace with process.cwd():
process.env.ROOT = path.join(process.cwd(), '..')
process.env.DIST = path.join(process.env.ROOT, 'dist-electron')
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? path.join(process.env.ROOT, 'public')
  : path.join(process.env.ROOT, '.output/public')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const preload = path.join(process.env.DIST, 'preload.js')
Thanks!!! There are other mistakes.

Your remove the ../ from ../preload.js

Hsinky · 2024-02-26T08:29:14Z

it does't work

angelhdzdev · 2024-02-26T08:43:03Z

it does't work

const preload = path.join(process.env.DIST, 'preload.js')

Hsinky · 2024-02-26T09:24:40Z

That's not the problem.The following code runs in the development environment

process.env.ROOT = path.join(process.cwd())//, '..'
process.env.DIST = path.join(process.env.ROOT, 'dist-electron')
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? path.join(process.env.ROOT, 'public')
  : path.join(process.env.ROOT, '.output/public')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const preload = path.join(process.env.DIST, 'preload.js')

but,It will not work after installation

angelhdzdev · 2024-02-26T09:39:06Z

That's not the problem.The following code runs in the development environment

process.env.ROOT = path.join(process.cwd())//, '..'
process.env.DIST = path.join(process.env.ROOT, 'dist-electron')
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? path.join(process.env.ROOT, 'public')
  : path.join(process.env.ROOT, '.output/public')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const preload = path.join(process.env.DIST, 'preload.js')

but,It will not work after installation

That's a different issue. We are talking about ESM in this thread.

Probably you need to check if your environment is DEV or PROD and use the appropriate path like __dirname instead of import.meta.url.

Edit: I'm checking this issue. __dirname is not going to work in ESM in production and we are compiling to ESM. So we stick to import.meta.url.

Edit: I reached a dead end here. Can't make it work when building the .exe. Getting errors in DEV mode, and in PROD the Electron window is empty.

Hsinky · 2024-02-27T02:49:32Z

type:module in package.json,error!(I'm not good at English.)

Hsinky · 2024-02-27T03:03:14Z

when process.env.ROOT =path.join(import.meta.url,'../..') ，erro is reload script must have absolute path
when process.env.ROOT =path.join(process.cwd()),error is preload.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.

salazarr-js · 2024-03-21T05:12:45Z

If we're trying to use ES Modules (ESM) in Electron we should have "type": "module" in our package.json and the preload scripts must have the .mjs extension

The problem is that the nuxt-electron plugin does't do this automatically despite it using vite-plugin-electron internally and this was discussed/fixed on electron-vite/vite-plugin-electron#186

This is a little `workaround` that worked for me

`nuxt.config.ts`

export default defineNuxtConfig({
  ...,
  modules: ['nuxt-electron'],
  electron: {
    renderer: { },
    build: [
      { entry: 'electron/main.ts' },
      {
        entry: 'electron/preload.ts',
        vite: {
          build: {
            rollupOptions: {
              output: {
                entryFileNames: `[name].mjs`,
                chunkFileNames: `[name].mjs`,
              },
            },
          },
        },
        onstart(args) {
          args.reload()
        },
      },
    ],
  },
})

This generates the proper dist-electron/preload.mjs file that the main electron script expects.

`electron/main.ts`

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { env } from 'node:process'
//
import { BrowserWindow, app } from 'electron'

/** Env */
const isDev = !!env.VITE_DEV_SERVER_URL
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

env.ROOT = path.join(dirname, '../')
env.DIST = path.join(env.ROOT, 'dist-electron')
env.VITE_PUBLIC = isDev ? path.join(env.ROOT, 'public') : path.join(env.ROOT, '.output/public')
// env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

/** Create main windows and load app */
function bootstrap() {
  const preload = path.join(env.DIST!, 'preload.mjs')

  const mainWindow = new BrowserWindow({
    width: 1280,
    height: 1024,
    webPreferences: {
      preload,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      nodeIntegration: true,
      webSecurity: false, // TODO: fix `Insecure Content-Security-Policy`
    },
  })

  if (isDev) {
    mainWindow.loadURL(env.VITE_DEV_SERVER_URL!)
    mainWindow.webContents.openDevTools()
  }
  else {
    mainWindow.loadFile(path.join(env.VITE_PUBLIC!, 'index.html'))
  }
}

/** Main process */
app.whenReady().then(() => {
  bootstrap()
})

I've to mention that I don't know what I'm doing, nor am I a Nuxt or Electron expert, but all the @angelhdzmultimedia messages helped me to find a way, thanks 🙋‍♂️.

angelhdzdev · 2024-03-21T05:23:56Z

If we're trying to use ES Modules (ESM) in Electron we should have "type": "module" in our package.json and the preload scripts must have the .mjs extension

The problem is that the nuxt-electron plugin does't do this automatically despite it using vite-plugin-electron internally and this was discussed/fixed on electron-vite/vite-plugin-electron#186

This is a little `workaround` that worked for me

`nuxt.config.ts`

export default defineNuxtConfig({
  ...,
  modules: ['nuxt-electron'],
  electron: {
    renderer: { },
    build: [
      { entry: 'electron/main.ts' },
      {
        entry: 'electron/preload.ts',
        vite: {
          build: {
            rollupOptions: {
              output: {
                entryFileNames: `[name].mjs`,
                chunkFileNames: `[name].mjs`,
              },
            },
          },
        },
        onstart(args) {
          args.reload()
        },
      },
    ],
  },
})

This generates the proper dist-electron/preload.mjs file that the main electron script expects.

`electron/main.ts`

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { env } from 'node:process'
//
import { BrowserWindow, app } from 'electron'

/** Env */
const isDev = !!env.VITE_DEV_SERVER_URL
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

env.ROOT = path.join(dirname, '../')
env.DIST = path.join(env.ROOT, 'dist-electron')
env.VITE_PUBLIC = isDev ? path.join(env.ROOT, 'public') : path.join(env.ROOT, '.output/public')
// env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

/** Create main windows and load app */
function bootstrap() {
  const preload = path.join(env.DIST!, 'preload.mjs')

  const mainWindow = new BrowserWindow({
    width: 1280,
    height: 1024,
    webPreferences: {
      preload,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      nodeIntegration: true,
      webSecurity: false, // TODO: fix `Insecure Content-Security-Policy`
    },
  })

  if (isDev) {
    mainWindow.loadURL(env.VITE_DEV_SERVER_URL!)
    mainWindow.webContents.openDevTools()
  }
  else {
    mainWindow.loadFile(path.join(env.VITE_PUBLIC!, 'index.html'))
  }
}

/** Main process */
app.whenReady().then(() => {
  bootstrap()
})

I've to mention that I don't know what I'm doing, nor am I a Nuxt or Electron expert, but all the @angelhdzmultimedia messages helped me to find a way, thanks 🙋‍♂️.

Hey! Thanks for the feedback. Will try your solution.

caoxiemeihao · 2024-04-18T06:26:17Z

package.json

{
- "type": "module",
}

caoxiemeihao closed this as completed Apr 18, 2024

require is not defined in ES module scope #68

require is not defined in ES module scope #68

Comments

Hsinky commented Feb 5, 2024 • edited Loading

Hsinky commented Feb 5, 2024

angelhdzdev commented Feb 5, 2024

Hsinky commented Feb 7, 2024

angelhdzdev commented Feb 7, 2024

Hsinky commented Feb 7, 2024

Hsinky commented Feb 7, 2024

angelhdzdev commented Feb 7, 2024

Hsinky commented Feb 7, 2024

Hsinky commented Feb 7, 2024

angelhdzdev commented Feb 7, 2024

Hsinky commented Feb 7, 2024

angelhdzdev commented Feb 7, 2024 • edited Loading

angelhdzdev commented Feb 7, 2024

Update

angelhdzdev commented Feb 7, 2024

Hsinky commented Feb 8, 2024

angelhdzdev commented Feb 8, 2024

Hsinky commented Feb 8, 2024 • edited Loading

angelhdzdev commented Feb 9, 2024 • edited Loading

Solution

Solution Revisited

TristanDuck commented Feb 22, 2024

angelhdzdev commented Feb 22, 2024

TristanDuck commented Feb 22, 2024

angelhdzdev commented Feb 22, 2024

angelhdzdev commented Feb 22, 2024

SOLUTION

TristanDuck commented Feb 22, 2024

SOLUTION

Hsinky commented Feb 26, 2024 • edited Loading

Solution

angelhdzdev commented Feb 26, 2024 • edited Loading

Solution

Hsinky commented Feb 26, 2024

angelhdzdev commented Feb 26, 2024

Hsinky commented Feb 26, 2024

angelhdzdev commented Feb 26, 2024 • edited Loading

Hsinky commented Feb 27, 2024

Hsinky commented Feb 27, 2024

salazarr-js commented Mar 21, 2024

This is a little workaround that worked for me

nuxt.config.ts

electron/main.ts

angelhdzdev commented Mar 21, 2024

This is a little workaround that worked for me

nuxt.config.ts

electron/main.ts

caoxiemeihao commented Apr 18, 2024

Hsinky commented Feb 5, 2024 •

edited

Loading

angelhdzdev commented Feb 7, 2024 •

edited

Loading

Hsinky commented Feb 8, 2024 •

edited

Loading

angelhdzdev commented Feb 9, 2024 •

edited

Loading

Hsinky commented Feb 26, 2024 •

edited

Loading

angelhdzdev commented Feb 26, 2024 •

edited

Loading

angelhdzdev commented Feb 26, 2024 •

edited

Loading

This is a little `workaround` that worked for me

`nuxt.config.ts`

`electron/main.ts`

This is a little `workaround` that worked for me

`nuxt.config.ts`

`electron/main.ts`