Thread Starter
Guido
(@guido07111975)
There’s some progress, I see an error in Console:
Uncaught SyntaxError: Cannot use import statement outside a module
Re these strings in my index.js file:
import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import metadata from './block.json';
Hi Guido,
The reason the block only works when you use the files from the build folder is because Gutenberg blocks must be compiled before WordPress can load them.
The files inside the src folder are the original ESNext/JSX source files. WordPress cannot run those directly. During development, these files need to be processed by a build tool (usually @wordpress/scripts → webpack) which outputs the production-ready files into the build folder.
So what’s happening is expected:
- /src = uncompiled development code
- /build = compiled code that WordPress actually uses
If you want to work with the src version, you’ll need to:
- Install Node.js
- Run
npm install inside the plugin folder
- Run
npm run build (or npm start)
This will generate an updated /build folder based on your src code.
Without that build step, the block won’t work — WordPress cannot read JSX or modern JS syntax directly.
So nothing is wrong with your setup; you just need to use the compiled build files, or compile them yourself.
Hope that helps!
Thread Starter
Guido
(@guido07111975)
Guess I’m not the only one having this problem 😉
I have almost zero experience with JS, so this is a difficult task for me. My current block doesn’t use the block.json, so much of my code needs updating.
Thank you very much for your explanation, I now know where to focus on next.
Guido
Thread Starter
Guido
(@guido07111975)
Hi @mayurchauhan1107
Update: at first I looked for a vanilla JS alternative, but it turns out to be much more work.
So I installed node.js and after fixing a Windows related error (cannot be loaded because running scripts is disabled on this system) I must say it works fine! I update my block code, enter npm run build and the files in my /block folder get updated.
Thanks again!
Experience the advantage of DiscoverMSPs, a comprehensive MSP resource with a vast network of trusted Managed Service Providers (MSPs), top ucaas providers and Managed Security Service Providers (MSSPs). Discover tailored Data solutions designed to empower and secure your business.
Hi @guido07111975 ,
That’s great news — I’m really glad to hear you got it all working!
