Using "type": "module" in package.json prevents the development server from starting

[nhedger]

• Laravel Vite Plugin Version: 0.6.0
• Laravel Version: 9.27.0
• Node Version: 16.14.2, 18.8.0
• NPM Version: 8.5.0, 8.18.0
• Vite Version: 3.0.9
• Host operating system: macOS 12.5.1
• Web Browser & Version: irrelevant
• Running in Sail / Docker: No

Description:

Declaring "type": "module" in the root package.json prevents the development server from starting with the following error.

failed to load config from /Users/nicolas/Code/vite-plugin-issue/vite.config.js
error when starting dev server:
TypeError: laravel is not a function
    at file:///Users/nicolas/Code/vite-plugin-issue/vite.config.js.timestamp-1662289657311.mjs:6:5
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async loadConfigFromBundledFile (file:///Users/nicolas/Code/vite-plugin-issue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:63077:21)
    at async loadConfigFromFile (file:///Users/nicolas/Code/vite-plugin-issue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:62963:28)
    at async resolveConfig (file:///Users/nicolas/Code/vite-plugin-issue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:62577:28)
    at async createServer (file:///Users/nicolas/Code/vite-plugin-issue/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:59183:20)
    at async CAC.<anonymous> (file:///Users/nicolas/Code/vite-plugin-issue/node_modules/vite/dist/node/cli.js:699:24)

Steps To Reproduce:

1. Scaffold a new Laravel application with laravel new vite-plugin-issue
2. Run npm install
3. Run npm run dev and see that the Vite development server starts correctly
4. Stop the development server
5. Add "type": "module" to package.json
6. Run npm run dev and see that the Vite development server fails to start

Reproduction repository

The following repository contains a reproduction of this issue.

• https://github.com/nhedger/vite-plugin-issue

And here's the specific commit that reveals the issue.

• https://github.com/nhedger/vite-plugin-issue/commit/a66daa23b356b7de2bba0410e3481f3b28a9b20a

Related

I believe (closed) issue #130 is related

Solution

Create ES and CJS outputs and reference them in package.json, similarly to what is done in https://github.com/innocenzi/laravel-vite/tree/main/vite-plugin-laravel.

I'm happy to submit a PR that will update the build system and fix the issue; let me know how you want to proceed.

[timacdonald]

@nhedger what is the benefit of adding that key to the package.json for a project built with Vite?

[driesvints]

I don't think that's a setting you need for building an app but rather for NPM packages. Just stick to the defaults when building a Laravel app.

[bradley-varol]

Removing this key from package.json gives the following error:

Failed to resolve entry for package "@sveltejs/vite-plugin-svelte". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "@sveltejs/vite-plugin-svelte" package

[timacdonald]

Please follow along with this PR which is attempting to address this issue: #189

If you can test this PR to confirm it fixes your issue that would be greatly appreciated.

Instructions on how to test are in the comments.

[geneowak]

checkout this workaround #189 (comment)

[6XGate]

checkout this workaround #189 (comment)

This workaround doesn't work with vite.config.ts

[ZekyTheWolf]

checkout this workaround #189 (comment)

This workaround doesn't work with vite.config.ts

Add above: // @ts-ignore or // @ts-expect-error and you should be fine :D