Can't seem to use JS modules in block directories

bud
1

We are using Roots 10 with Acorn 3, and Bud. We are creating blocks using ACF, and the structure is;

resources
-views
--custom-blocks
-–block-name

Within the block directory (block-name), we have;

block.json
block-name.asset.php
block-name.js
block-name.php

The JS in block-name.js is being loaded, which I’ve tested with a simple console.log. But, when I use imports in the file, I’m getting a console error stating that imports can’t be used outside of modules.

To be clear, everything works fine when I add the same code to app.js in the @scripts folder.

Do I need to change anything in the (pretty much standard) bud config file to accommodate for modular JS in blocks?

2

It appears that your block JS isn’t being handled by Bud at all?

Please post your actual code responsible for loading your JS, along with your Bud config (assuming that you’ve modified it to be handling your block JS — if you haven’t already done this, then you’ll need to get this in place first)

1 Like
4

Thanks, Ben. Sorry for the slow reply, I’ll do a bit more research on that and post back here if I have any more issues.

5

Just thought I’d follow up on this in case anybody else comes across the same issue. But essentially, as Ben said, I wasn’t using Bud to compile the JS assets in the block directories because I was adding the script key to the block.json file in the block directory.

I removed that line, then added a new entry into the Bud config file to compile the block JS files using pattern matching.

.entry({
      app: ['@scripts/app', '@styles/app'],
      blocks: await app.glob('@views/ui-kit/**/*.{js,jsx,ts,tsx}'), // this line
      editor: ['@scripts/editor', '@styles/editor'],
    })

This now works as expected. I think I got confused as I was using a kind of hybrid approach to loading the assets.

3 Likes