[0.7.x] Build MJS and CJS versions of the plugin

[timacdonald]

tl;dr; This PR brings support for projects using "type": "modules" to the Laravel plugin.

Background

In there beginning, of this story at least, there were "CJS" or Common JS modules. CJS was the module system that Node created. It uses require() and modules.export.

Life was good in Node-land and the developers rejoiced in the streets.

Browsers did not support this standard.

ECMAScript then standardised ES Modules "MJS". This module system uses import X from './foo' and export { X } type syntax.

Unfortunately for package maintainers there was now a need to compile both CJS and MJS builds. Some build tools or systems required CJS, while others required MJS.

These were the darkest of days.

After a good while, the ecosystem caught up. MJS and CJS was available for most relevant packages. The developers, once again, rejoiced in the streets - although the package maintainers lost sleep trying to work out how to even build two outputs and why this noise even exists. Here is, the one and only, "Wes Bos" with more...

Anyone who has done this can feel the pain emanating from this tweet.

Slowly though, the tide has shifted. Many mainstream packages are now dropping support for CJS and it seems this is the direction the ecosystem is heading. Again, Wes Bos with more...

MJS is now supported by browsers, which is how Vite works. I don't believe browsers natively support MJS at all.

I don't think Node yet officially supports MJS. I believe there is experimental support for it.

**The facts may vary, but this is the general gist of things.

Why

With a fresh install of Laravel, some major Vite plugins no longer work out of the box. The Svelte plugin, for example, no longer supports projects without "type": "module". "type": "module" tells build tools, such as Vite, that you want to use ESM.

See: #187

With Laravel's switch to Vite, all project level dependencies, that is dependencies that you use in your application code, already need to be MJS. Vite only works with projects using MJS. However, Vite plugins referenced in the vite.config.js file may be CJS or MJS.

This PR introduces an MJS version of the plugin so that we can make the package.json file use "type": "module" by default.

This PR is only additive. It does not remove the CJS build. This means projects without "type": "module" will continue to build, as we continue to ship CJS.

See:

• [10.x] sets package.json type to module laravel#6090
• [1.x] Migrate to modules breeze#246
• [2.x] Migrate to modules jetstream#1242

[timacdonald]

@lrfahmi @CodeKJ @fpolli would appreciate it if you could take a look at this PR and take it for a test.

[fpolli]

Thank you for reopening this and jumping on it so quickly. I will give it a try.

[CodeKJ]

@lrfahmi @CodeKJ @fpolli would appreciate it if you could take a look at this PR and take it for a test.

Doesn't work for me. Here are my configs and result. Let me know if I something is missing on my side - I haven't really tested packages with specific commits before, fresh npm install was successful tho.

package.json

{
    "type": "module",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "@sveltejs/vite-plugin-svelte": "^2.0.2",
        "autoprefixer": "^10.4.4",
        "axios": "^0.27",
        "laravel-vite-plugin": "github:timacdonald/vite-plugin#4f0383ea8a310226f1b859049964bfe94d07f307",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "tailwindcss": "^3.0.23",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.11.1",
        "@inertiajs/inertia-svelte": "^0.8.0",
        "@inertiajs/progress": "^0.2.7",
        "svelte": "^3.46.6",
        "svelte-loader": "^3.1.2"
    }
}

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
        svelte({
            prebundleSvelteLibraries: true,
        }),
    ],
    optimizeDeps: {
        include: [
            "@inertiajs/inertia",
            "@inertiajs/inertia-svelte",
        ]
    }
});

Result after npm run dev

Output

> dev
> vite

✘ [ERROR] [plugin externalize-deps] Failed to resolve entry for package "laravel-vite-plugin". The package may have incorrect main/module/exports specified in its package.json.

  node_modules/esbuild/lib/main.js:1355:27:
    1355 │         let result = await callback({
         ╵                            ^

  at packageEntryFailure (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-6305614c.js:22973:11)
  at resolvePackageEntry (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-6305614c.js:22970:5)
  at tryNodeResolve (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-6305614c.js:22708:20)
  at file:///var/www/html/node_modules/vite/dist/node/chunks/dep-6305614c.js:63066:40
  at requestCallbacks.on-resolve (/var/www/html/node_modules/esbuild/lib/main.js:1355:28)
  at handleRequest (/var/www/html/node_modules/esbuild/lib/main.js:723:19)
  at handleIncomingPacket (/var/www/html/node_modules/esbuild/lib/main.js:745:7)
  at Socket.readFromStdout (/var/www/html/node_modules/esbuild/lib/main.js:673:7)
  at Socket.emit (node:events:513:28)
  at addChunk (node:internal/streams/readable:315:12)

This error came from the "onResolve" callback registered here:

  node_modules/esbuild/lib/main.js:1279:20:
    1279 │       let promise = setup({
         ╵                     ^

  at setup (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-6305614c.js:63055:27)
  at handlePlugins (/var/www/html/node_modules/esbuild/lib/main.js:1279:21)
  at buildOrServeImpl (/var/www/html/node_modules/esbuild/lib/main.js:968:5)
  at Object.buildOrServe (/var/www/html/node_modules/esbuild/lib/main.js:776:5)
  at /var/www/html/node_modules/esbuild/lib/main.js:2115:17
  at new Promise (<anonymous>)
  at Object.build (/var/www/html/node_modules/esbuild/lib/main.js:2114:14)
  at build (/var/www/html/node_modules/esbuild/lib/main.js:1961:51)
  at bundleConfigFile (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-6305614c.js:63019:26)

The plugin "externalize-deps" was triggered by this import

  vite.config.js:3:20:
    3 │ import laravel from 'laravel-vite-plugin';
      ╵                     ~~~~~~~~~~~~~~~~~~~~~

failed to load config from /var/www/html/vite.config.js
error when starting dev server:
Error: Build failed with 1 error:
node_modules/esbuild/lib/main.js:1355:27: ERROR: [plugin: externalize-deps] Failed to resolve entry for package "laravel-vite-plugin". The package may have incorrect main/module/exports specified in its package.json.
  at failureErrorWithLog (/var/www/html/node_modules/esbuild/lib/main.js:1594:15)
  at /var/www/html/node_modules/esbuild/lib/main.js:1050:28
  at runOnEndCallbacks (/var/www/html/node_modules/esbuild/lib/main.js:1466:61)
  at buildResponseToResult (/var/www/html/node_modules/esbuild/lib/main.js:1048:7)
  at /var/www/html/node_modules/esbuild/lib/main.js:1160:14
  at responseCallbacks.<computed> (/var/www/html/node_modules/esbuild/lib/main.js:697:9)
  at handleIncomingPacket (/var/www/html/node_modules/esbuild/lib/main.js:752:9)
  at Socket.readFromStdout (/var/www/html/node_modules/esbuild/lib/main.js:673:7)
  at Socket.emit (node:events:513:28)
  at addChunk (node:internal/streams/readable:315:12)

[fpolli]

Hi, the one commit for this modifies tsconfig files. Those files are not in my plugin folder. I tried npm update and npm install and still those files were not copied over. I see them in the git code list. I'm confused. Am I doing something wrong?

[timacdonald]

Hey folks, sorry about that. I should have provided some steps for you to properly test this.

What you will need to do is clone my repo / branch, build the plugin, and then link the plugin in your project.

To setup the plugin, do the following somewhere outside of your project...

git clone https://github.com/timacdonald/vite-plugin.git laravel-vite-plugin
cd laravel-vite-plugin
git checkout module-support
npm install
npm run build
npm link

Then in your projects directory, run npm link laravel-vite-plugin. This will create a symlink in your projects node_modules that points to your local version of the laravel-vite-plugin.

Once you have done that you will hopefully be able to run npm run build in your project.

@CodeKJ I was able to copy your package.json and vite.config.js and my build worked as expected with the changes in this PR, but I would still love for you to confirm the fix.

[fpolli]

Thank you for that info. I went through that process and everything went fine until I tried to start the vite dev server. I ran npm run dev -- --host and received this error message:

error when starting dev server:
Error: dotenv-expand failed to expand env vars. Maybe you need to escape $?
at loadEnv (/Users/name/Sites/seeds/laravel-vite-plugin/node_modules/vite/dist/node-cjs/publicUtils.cjs:4270:19)
at config (/Users/name/Sites/seeds/laravel-vite-plugin/dist/index.cjs:63:43)
at runConfigHook (file:///Users/name/Sites/seeds/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63173:31)
at async resolveConfig (file:///Users/name/Sites/seeds/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62676:14)
at async createServer (file:///Users/name/Sites/seeds/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61943:20)
at async CAC. (file:///Users/name/Sites/seeds/node_modules/vite/dist/node/cli.js:707:24)

I tried a google search and did not find anything on point.

Thanks

[timacdonald]

@fpolli It seems you might have a dollar sign in your .env file you are loading via loadEnv that should be escaped, but is not currently escaped.

I can only replicate your issue if I purposefully introduce an un-escaped dollar sign, for example when I add the following to my .env and load that file via loadEnv I get the error you are reporting.

CORS_ALLOWED_ORIGINS=/${SERVER_HOST}(:[0-9]+)?$/

To fix this, you can escape the last dollar sign:

- CORS_ALLOWED_ORIGINS=/${SERVER_HOST}(:[0-9]+)?$/
+ CORS_ALLOWED_ORIGINS=/${SERVER_HOST}(:[0-9]+)?\$/

Related:

• feat!: support multiline values in env files vitejs/vite#10826
• TypeError: Cannot read property 'split' of undefined motdotla/dotenv-expand#65

[fpolli]

Wow, there was a dollar sign in my email password.

Thanks!

[timacdonald]

@fpolli were you able to test this after fixing that issue in your .env?

[fpolli]

Hi Tim,
Yes, I was and it serves a page, but I just noticed that Vite says version 3.2.5 and I thought this setup was for 4.0, so I'm not sure where I stand. It reports Laravel 9.44 and plugin 0.7.2.

[innocenzi]

Hey @timacdonald, I suggest using some higher-level tool like unbuild so your build scripts can be greatly simplified. A multi-output config (ESM + CJS + types) would look like the following in a build.config.ts file:

import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  entries: [
    './src/index',
    './src/inertia-helpers/index',
  ],
  clean: true,
  declaration: true,
  externals: [
    // ?
  ],
  rollup: {
    emitCJS: true,
  },
})

[ankurk91]

@timacdonald
I have the same issue. :(

Can we make the "type": "module", in Laravel 10 skeleton?

You can read about Pure ESM Modules here.
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

This will make Laravel future proof.
+

Tip:
You can tag a beta version of plugin like

npm publish --tag beta
Then
users can install and test it like

npm install package_name@beta

[timacdonald]

I agree that we should probably make this the default in Laravel skeleton (it's a todo in the PR description), but I need more testing on this from the community to ensure we don't break things.

If you could pull this down, test it, and report if it worked as expected, that would be amazing.

[ereveniaud]

As a workaround, you could use this :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
-       laravel({
+       laravel.default({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

[Magnesium38]

Hey folks, sorry about that. I should have provided some steps for you to properly test this.

What you will need to do is clone my repo / branch, build the plugin, and then link the plugin in your project.

To setup the plugin, do the following somewhere outside of your project...

git clone git clone https://github.com/timacdonald/vite-plugin.git laravel-vite-plugin
cd laravel-vite-plugin
git checkout module-support
npm install
npm run build
npm link

Then in your projects directory, run npm link laravel-vite-plugin. This will create a symlink in your projects node_modules that points to your local version of the laravel-vite-plugin.

Once you have done that you will hopefully be able to run npm run build in your project.

@CodeKJ I was able to copy your package.json and vite.config.js and my build worked as expected with the changes in this PR, but I would still love for you to confirm the fix.

Just wanted to chime in here and say I'm running into this underlying issue as well and stumbled upon this PR and did try these steps and using the linked branch instead does seem to get things nearly working. One caveat to that working is that the TS types aren't being picked up by vscode.

I was able to fix it by restoring the types key that was deleted in addition to leaving the new exports key. I'm not nearly enough of an expert in this to say if leaving it would break anything, but it seems that it's okay to have both.

• https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/package.json#L9-L17
• https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/package.json#L13-L22
• https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/package.json#L12-L20

Would be happy to test out any other changes to this PR.

[jessarcher]

I just gave this a try, and it works great!

I tested an existing app where "type": "module" is not set (and cannot be set without this PR), and both dev and build modes worked great with no changes so I don't see this breaking any existing apps.

I was then able to set "type": "module" (which previously was not possible but seems like the way things are headed), and it also worked once I either renamed my Tailwind and PostCSS configs to .cjs or changed them to use import/export.

[RobertBoes]

Seems like this, along with the changes in Breeze, does break things. To reproduce:

composer create-project laravel/laravel=v10.1.1 demo --prefer-dist

cd demo

composer require laravel/breeze

php artisan breeze:install vue

This results in the following error:

vite v4.3.5 building for production...
transforming (18) node_modules/vue/dist/vue.runtime.esm-bundler.js(node:29166) 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: /[path-to-project]/demo): [SyntaxError] Unexpected token 'export'
/[path-to-project]/demo/postcss.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1187:20)
    at Module._compile (node:internal/modules/cjs/loader:1231:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32)
    at Module._load (node:internal/modules/cjs/loader:965:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)]

Node.js v20.1.0

[ankurk91]

rename the file postcss.config.js to postcss.config.cjs, i should work

[timacdonald]

@RobertBoes laravel/breeze is only supported for new projects, which assumes you are running the latest version of Laravel.

[dammy001]

@RobertBoes laravel/breeze is only supported for new projects, which assumes you are running the latest version of Laravel.

Exactly because it's now ESM first. @RobertBoes rename your .js files to .cjs and make use of module.exports in that file

[RobertBoes]

@timacdonald This was a new project. I created a project before the latest release, added Breeze and then I got that error. It was right in between releases, yes, but still caused the error.

And yes, I know how to fix it, I'm not asking how I could fix this issue, but it seems to me to introduce a breaking change.

[archoda]

What's the actual fix here?

[timacdonald]

@archoda, what issue are you facing exactly?