meredevelopment's avatar

Vite build in docker error: To load an ES module, set "type": "module" in the package.json

Hi, I have Laravel 10 + Breeze (Blade) running inside Docker. It's a DDEV managed docker setup. I'm having a bit of a circular problem and not getting any useful hits about here/SE/Google, and it's not clear to me yet if it's a Laravel/Docker/DDEV/Vite/NPM version issue. Been on this for about a day, so I'm going to start here asking for help:

When I run npm run dev I get the following error:

(node:5415) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/var/www/html/node_modules/.bin/vite:2
import { performance } from 'node:perf_hooks'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.16.0

I've attempted to use Node 14, 16, 18 and 20. I've seen this issue with Docker Desktop running on Intel Macs, so have downgraded to v4.18. I've tried using DDEV with Mutagen on and off.

As one of many tests I've now lost track of, I ran up another L10 install in DDEV. When I attempt to build i get this:

VITE v4.3.9  ready in 782 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
(node:2255) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /var/www/html): [SyntaxError] Unexpected token 'export'
/var/www/html/postcss.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1119:15)
    at Module._compile (node:internal/modules/cjs/loader:1155:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1245:10)
    at Module.load (node:internal/modules/cjs/loader:1069:32)
    at Function.Module._load (node:internal/modules/cjs/loader:904:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)]

Can anyone give me some place to start troubleshooting this please? I realise it's needle in haystack stuff with the specific setup I'm using.

0 likes
4 replies
LaryAI's avatar
Level 58

The error message suggests that the package.json file needs to have a "type" field set to "module" in order to load ES modules. To fix this issue, add the "type" field to the package.json file with the value "module". Here's an example:

{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "vite": "^4.3.9"
  }
}

If this doesn't work, try updating the Node.js version to the latest stable version.

meredevelopment's avatar

Yep Toaster, it's already set to "type": "module" 😅

Here's the full package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite --host",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0"
    }
}
danilocarsan's avatar

@meredevelopment see

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "postcss": "^8.4.6",
        "tailwindcss": "^3.1.0",
        "vite": "^4.3.9"
    }
}

after: npm update npm run dev

1 like

Please or to participate in this conversation.