Provide "modern" microbundle build

[jaalt007]

👋

To get inertia working with native es module build tools such as Vite, I had to add a "modern" build for all the packages.

• https://github.com/developit/microbundle/#-modern-mode-

This involves adding "exports": "dist/index.modern.js", & e.g. "build:modern": "microbundle --format modern", for all packages package.json.

An easy PR if need be, but maybe there are other things I haven't considered?

[claudiodekker]

Ooh, it would be really cool to support Vite!

Since Inertia only supports modern browsers anyway, I personally think this would be a perfectly reasonable thing to add (especially since it doesn't increase the maintenance cost at all from what I can tell?)

What do you think, @reinink?

---

EDIT: Bookmarking for relevance/future use: https://github.com/laravel-presets/inertia/blob/main/templates/default/resources/scripts/main.ts

[jaalt007]

Yeah I can't immediately see an ongoing maintenance burden because microbundle handles everything nicely!

[mindreframer]

Any love for this issue? It seems to be a rather non-intrusive change and getting it working with Vite would be a real boost, since it is growing in popularity in the JS community.

[reinink]

Seems reasonable to me. 👍

@sebastiandedeyne, any thoughts on this, as our resident publishing and Vite expert?

[mindreframer]

@reinink Actually, I got this to compile properly. I needed to add the util package, to polyfill the Node util package for vite. That was everything needed, it worked without the "modern" microbundle build. 🤷

So, I am not sure if we need to do something, besides maybe documenting the extra step with the util package in combination with Vite.js

[sebastiandedeyne]

You can use Inertia with Vite without any additional configuration.

@mindreframer are you sure the util package is Inertia-specific? I can't find any references in this code base.

That said, I do believe we should add an ESM build to Inertia. I've opened #610 to continue this discussion.

[mindreframer]

@sebastiandedeyne

By using yarn list|grep ... this is what I have:

├─ @inertiajs/inertia@0.8.6
│  ├─ axios@^0.21.1
│  ├─ deepmerge@^4.0.0
│  └─ qs@^6.9.0




├─ qs@6.10.1
│  └─ side-channel@^1.0.4


├─ side-channel@1.0.4
│  ├─ call-bind@^1.0.0
│  ├─ get-intrinsic@^1.0.2
│  └─ object-inspect@^1.9.0

• Remove dependency to node builtins inspect-js/object-inspect#38

Using your package I receive troubles:

Rollup: "Creating a browser bundle that depends on Node.js built-in module ('util'). You might need to include https://github.com/ionic-team/rollup-plugin-node-polyfills"

Reason is that you require util package in util.inspect.js file.

[sebastiandedeyne]

According to that linked issue:

The browser field ensures that the node core module is not used in a bundle. Rollup perhaps has a bug in its browser field implementation.

Rollup is choosing the wrong dependency for whatever reason. I'm using Inertia with Vite and not seeing any issues here. Either way, this is a Rollup or object-inspect issue, not directly related to Inertia.

[mindreframer]

Well... I had this issue in my setup, where bundling would work, but the app would fail at runtime trying to require the util package. After half a day of trying to convince rollup + vite to bundle it somehow, I tried installing util - and it worked. I'm using Inertia with React + Typescript, not sure if that is relevant. Would be happy to see a working app setup that just works out of the box, just thought I post it here for other people who might hit the same issue and read this discussion after some googling.

[merijnponzo]

I'm using vite with inertia + wordpress as well and it's working:

// View your website at your own local server
// for example http://vite-php-setup.test

// http://localhost:3000 is serving Vite on development
// but accessing it directly will be empty

// IMPORTANT image urls in CSS works fine
// BUT you need to create a symlink on dev server to map this folder during dev:
// ln -s {path_to_vite}/src/assets {path_to_public_html}/assets
// on production everything will work just fine

// vue plugin
import vue from '@vitejs/plugin-vue'
// needed for .env
import { defineConfig, loadEnv } from 'vite'
// live reload php
import liveReload from 'vite-plugin-live-reload'
// resolver
const { resolve } = require('path')

// https://vitejs.dev/config
export default defineConfig(({ mode }) => {
  require('dotenv').config({ path: `./.env.${mode}` })

  return {
    plugins: [
      vue(),
      liveReload(__dirname + '/**/*.php'),
      // edit according to your source code
    ],
    // config
    root: 'src',
    base: process.env.ASSET_URL,
    build: {
      // output dir for production build
      outDir: resolve(__dirname, './app/dist'),
      emptyOutDir: true,
      // emit manifest so PHP can find the hashed files
      manifest: true,

      // esbuild target
      target: 'es2018',

      // our entry
      rollupOptions: {
        input: ['/app.js', '/gutenberg.js'],
      },
    },

    server: {
      // required to load scripts from custom host
      cors: true,
      // we need a strict port to match on PHP side
      // change freely, but update on PHP to match the same port
      strictPort: true,
      port: 3000,
    },

    // required for in-browser template compilation
    // https://v3.vuejs.org/guide/installation.html#with-a-bundler
    resolve: {
      alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
      },
    },
    optimizeDeps: {
      include: ['vue', 'axios'],
    },
  }
})

and my package.json

{
    "version": "0.0.0",
    "scripts": {
      "dev": "vite",
      "build": "vite build --mode production",
      "serve": "vite preview"
    },
    "dependencies": {
      "@inertiajs/inertia": "^0.8.5",
      "@inertiajs/inertia-vue": "^0.5.5",
      "@inertiajs/inertia-vue3": "^0.3.5",
      "@inertiajs/progress": "^0.2.4",
      "autoprefixer": "^10.2.5",
      "dotenv": "^8.2.0",
      "vite-plugin-components": "^0.8.3",
      "vite-plugin-live-reload": "^2.0.0",
      "vue": "^3.0.5",
      "vue-axios": "^3.2.4",
      "vue3-runtime-template": "^1.0.1"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "^1.1.5",
      "@vue/compiler-sfc": "^3.0.5",
      "eslint": "^7.21.0",
      "eslint-config-prettier": "^8.1.0",
      "eslint-plugin-vue": "^7.7.0",
      "prettier": "^2.2.1",
      "vite": "^2.0.5"
    }
  }

[lucraraujo]

Well... I had this issue in my setup, where bundling would work, but the app would fail at runtime trying to require the util package. After half a day of trying to convince rollup + vite to bundle it somehow, I tried installing util - and it worked. I'm using Inertia with React + Typescript, not sure if that is relevant. Would be happy to see a working app setup that just works out of the box, just thought I post it here for other people who might hit the same issue and read this discussion after some googling.

I got a similar problem when using Inertia + Vue 3 + Vite and Yarn 2+ (3.1.1 in fact). No problem when using Yarn classic (1).

    js index.js:68
    __require2 chunk-NA65WS4R.js:17
    js index.js:5
    __require2 chunk-NA65WS4R.js:17
    js stringify.js:3
    __require2 chunk-NA65WS4R.js:17
    js index.js:3
    __require2 chunk-NA65WS4R.js:17
    cache @inertiajs_inertia-vue3.js:9805
    __require2 chunk-NA65WS4R.js:17
    __virtual__ @inertiajs_inertia-vue3.js:10166
    __require2 chunk-NA65WS4R.js:17
    <anonymous> @inertiajs_inertia-vue3:1

package.json

{
  "name": "atermacao",
  "packageManager": "yarn@3.1.1",
  "scripts": {
    "dev": "vite"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "vite": "^2.8.2"
  },
  "dependencies": {
    "@inertiajs/inertia": "^0.11.0",
    "@inertiajs/inertia-vue3": "^0.6.0",
    "vue": "^3.2.31"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig(({command}) => ({
  plugins: [
    vue()
  ],
  base: command === 'serve' ? '' : '/build/',
  publicDir: false,
  cacheDir: 'storage/vite',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
      '@@': path.resolve(__dirname, 'resources')
    }
  },
  build: {
    manifest: true,
    outDir: 'public/build',
    rollupOptions: {
      input: 'resources/js/app.js',
    },
  },
}))

app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: async (name) => {
    return (await import(`./Pages/${name}.vue`)).default;
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

[reinink]

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️