Editor.js not working when using yarn build

sage
,
1

Hi, I encountered a bug that when I run yarn build, all of the codes in editor.js are not working but when I’m using yarn dev, the editor.js seems to work.

import {domReady} from '@roots/sage/client';
import {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks';

/**
 * editor.main
 */
const main = (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }

  unregisterBlockStyle('core/button', 'outline');

  registerBlockStyle('core/button', {
    name: 'outline',
    label: 'Outline',
  });

  // Remove featured image panel from sidebar.
  const { removeEditorPanel } = wp.data.dispatch('core/edit-post');
  if(window.typenow  === 'page') {
    removeEditorPanel( 'featured-image' );
  }
};

/**
 * Initialize
 *
 * @see https://webpack.js.org/api/hot-module-replacement
 */
domReady(main);
import.meta.webpackHot?.accept(main);
2

what is shown in the browser console?

3

Hi, @kellymears I found out that my bundle enqueue in my block was blocking and the editor.js is working properly. Since my bundle enqueue for my block is causing a bug and the js is not working in the block editor when I enqueue it. But when I used yarn dev, everything was working fine. I don’t know if this is the correct way to enqueue the bundle in my block.

By the way, I’m using ACF Composer by Log1.

In my Blocks/SampleBlock.php:

/**
     * Assets to be enqueued when rendering the block.
     *
     * @return void
     */
    public function enqueue()
    {
        bundle('sampleBlock')->enqueue();
    }

In my bud.config.mjs:

.entry({
      app: {
        import: ['@scripts/app.js', '@styles/app.scss'],
        publicPath: '/app/themes/sage-theme/public/'
      },
      editor: {
        import: ['@scripts/editor', '@styles/editor'],
        publicPath: '/app/themes/sage-theme/public/'
      },
      sampleBlock: {
        import: ['views/blocks/sample-block/*.{css,scss}', 'views/blocks/sample-block/*.js'],
        publicPath: '/app/themes/sage-theme/public/'
      },
    })

In my sample-block/index.js:

import { domReady } from '@roots/sage/client';

// sampleBlock.main
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }
  console.log('Sample Block');
};

domReady(main);

import.meta.webpackHot?.accept(main);
4

Not sure. This block gpt wrote works:

resources/scripts/shared.ts

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('bud/block', {
  title: 'Bud Block',
  icon: 'smiley',
  category: 'widgets',
  attributes: {
    content: {
      type: 'string',
      source: 'html',
    },
  },
  edit: ({ attributes, setAttributes }) => {
    const { content } = attributes;

    return (
      <div>
        <RichText
          tagName="p"
          value={content}
          placeholder="Write something..."
          onChange={(content) => setAttributes({ content })}
        />
      </div>
    );
  },
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
import.meta.webpackHot?.accept(console.error);

Added to entrypoints:

export default async (app) => {
  app
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
      shared: ['@scripts/shared'],
    })
}

and plunked down in setup.php:

add_action('wp_enqueue_scripts', function () {
    bundle('app')->enqueue();
    bundle('shared')->enqueue();
}, 100);

add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
    bundle('shared')->enqueue();
}, 100);

Works:

image
image792×308 12 KB

You still haven’t shared your browser console log where there is likely an error being reported so I can’t say anything beyond that. You could try running it with the runtime and code splitting disabled which isn’t ideal but seems like the most relevant difference between dev and build:

bud.runtime(false)
bud.splitChunks(false)
4 Likes
5

Hi @kellymears,

bud.runtime(false)
bud.splitChunks(false)

works on my end.

Thank you so much and happy new year :slightly_smiling_face: