Bundling Wordpress Gutenberg Blocks with ViteJS

[asolopovas]

Hi,

I am trying to use ViteJS to build wordpress gutenberg blocks. For webpack they have a plugin dependency-extraction-webpack-plugin that bundles all the dependencies required for Gutenberg blocks, there is one for rolup called rollup plugin-wp-resolve, I tried using that with my config but I causes the issue that I described here.

As I understand based on the webpack plugin is that the following dependencies are required

Request	Global	Script handle
@babel/runtime/regenerator	regeneratorRuntime	wp-polyfill
@wordpress/*	wp['*']	wp-*
jquery	jQuery	jquery
lodash-es	lodash	lodash
lodash	lodash	lodash
moment	moment	moment
react-dom	ReactDOM	react-dom
react	React	react

Is there any advanced guide that would explain how to setup gutenberg blocks bundling? Most of guides that I find cover the basic usecases nothing more advanced. I tried to read the source of wp-resolve in hope to fix the issue but my understanding of vite and its interactions with rollup are like in the beginners state when he just discovered the loaders concept from webpack. I managed to build ordinary assets but not the wordpress blocks that I require for some of my projects. Thankink you in advance...

[leopiccionia]

I've had a similar issue, and resolve adapting the code of rollup-plugin-wp-resolve to Vite.

My vite.config.js:

import { fileURLToPath } from 'node:url'

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

import wpResolve from './build/resolve-wp-dependencies.js'

export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                'post-sidebar': fileURLToPath(new URL('./src/js/post-sidebar.jsx', import.meta.url)),
                // other entrypoints
            },
            output: {
                chunkFileNames: '[name].[ext]',
                entryFileNames: '[name].js',
                format: 'iife',
            },
        },
    },
    plugins: [
        wpResolve(),
        react({
            jsxRuntime: 'classic',
            jsxImportSource: '@wordpress/element',
        }),
    ],
})

Notice that it's important to set the format to 'iife'; otherwise, the globals won't be replaced.

Where ./build/resolve-wp-dependencies.js is a version of rollup-plugin-wp-resolve that I minimally modified to be Vite-compatible:

const ns        = '@wordpress/'
const nsExclude = ['icons', 'interface']

const external = {
  'jquery'   : 'window.jQuery',
  'lodash-es': 'window.lodash',
  'lodash'   : 'window.lodash',
  'moment'   : 'window.moment',
  'react-dom': 'window.ReactDOM',
  'react'    : 'window.React',
}

const wordpressMatch = new RegExp(`^${ns}(?!(${nsExclude.join('|')})).*$`) // /^@wordpress\/(?!(icons|interface)).*$/

export default function wpResolve () {
  return {
    name: 'wp-resolve',
    options: (options) => {
      if (!Array.isArray(options.external)) {
        options.external = [options.external].filter(Boolean)
      }

      options.external = options.external.concat(Object.keys(external))
      options.external.push(wordpressMatch)

      const outputGlobals = options.output.globals

      const resolveGlobals = (id) => {
        if (typeof outputGlobals === 'object' && outputGlobals.hasOwnProperty(id) && outputGlobals[id]) {
          return outputGlobals[id]
        }

        if (typeof outputGlobals === 'function') {
          const configGlobalId = outputGlobals(id)

          if (configGlobalId && configGlobalId !== id) {
            return configGlobalId
          }
        }

        if (external.hasOwnProperty(id) && external[id]) {
          return external[id]
        }

        if (wordpressMatch.test(id)) {
          // convert @namespace/component-name to namespace.componentName
          return id.replace(new RegExp(`^${ns}`), 'wp.').replace(/\//g, '.').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
        }
      }

      options.output.globals = resolveGlobals

      return options
    }
  }
}

[asolopovas]

Further investigating what could be wrong I have discoverred that if I use format: 'iife' than vite fails with multiple entrypoints

[asolopovas]

https://github.com/asolopovas/vite-gutenberg I have created a test repo, everything seems to load up but blocks do not appear in the editor.

[craigrileyuk]

Still a work in progress, but the company I work for had a crack at using Vite to power a Gutenberg blocks development environment.

https://github.com/South-Coast-Web/vite-plugin-gutenberg-blocks

There's no HMR support as yet (and it probably isn't possible), but build and watch modes work pretty well.

[do-kevin]

Do you have an updated link to the documentation? The southwestweb link doesn't seem to be working. Thanks!

[craigrileyuk]

Late reply, but https://evomark.co.uk/open-source-software/vite-plugin-gutenberg-blocks/

[Hnnx]

Thanks, this might come in handy. I'm running wordpress + vite right now and we desperately need custom Gutenberg blocks

[oxyc]

if anyone finds it useful this works for depency extraction (but not hmr) https://github.com/generoi/bedrock/blob/deb067b9bf572cfb53d843dfaa147131c3981c5a/web/app/themes/gds/vite.config.js