Create a Block Tutorial – npm errors

  • Resolved moushik

    (@moushik)


    2 years, 9 months ago

    Hello,

    I’m following the Create a Block Tutorial.

    I made my local wordpress install with xampp 7.4.27 on linux. From my plugin directory I run `npx @wordpress/create-block gutenpride
    then I activated the plugin and succesfully inserted the new block in a new page.

    Everything is fine until I try to run `npm run build
    inside the “gutenpride” folder as suggested here (https://developer.www.ads-software.com/block-editor/getting-started/create-block/attributes/)

    Here’s the output:

    > [email protected] build /opt/lampp/htdocs/wp/wp-content/plugins/gutenpride
> wp-scripts build

[webpack-cli] Failed to load '/opt/lampp/htdocs/wp/wp-content/plugins/gutenpride/node_modules/@wordpress/scripts/config/webpack.config.js' config
[webpack-cli] SyntaxError: /opt/lampp/htdocs/wp/wp-content/plugins/gutenpride/src/block.json: Unexpected token } in JSON at position 339
    at parse (<anonymous>)
    at Object.Module._extensions..json (internal/modules/cjs/loader.js:1128:22)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at /opt/lampp/htdocs/wp/wp-content/plugins/gutenpride/node_modules/@wordpress/scripts/utils/config.js:197:9
    at Array.reduce (<anonymous>)
    at getWebpackEntryPoints (/opt/lampp/htdocs/wp/wp-content/plugins/gutenpride/node_modules/@wordpress/scripts/utils/config.js:191:42)
    at Object.<anonymous> (/opt/lampp/htdocs/wp/wp-content/plugins/gutenpride/node_modules/@wordpress/scripts/config/webpack.config.js:89:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: <code>wp-scripts build</code>
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/marco/.npm/_logs/2022-02-08T10_53_05_042Z-debug.log

    I also did `npm run packages-update
    but it doesn’t help.

    Suggestions?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter moushik

    (@moushik)

    Well, after deleting files, reinstalling and everything in between, I finally found the solution.

    On this page: https://developer.www.ads-software.com/block-editor/getting-started/create-block/attributes/ they add the following code to block.json

    "attributes": {
    "message": {
        "type": "string",
        "source": "text",
        "selector": "div",
        "default": "",
    },
},

    Unfortunately, there are two commas in excess. The following code is the right one (no more npm errors when I do “npm run build”)

    "attributes": {
    "message": {
        "type": "string",
        "source": "text",
        "selector": "div",
        "default": ""
    }
},

    Hi, moushik, are you able to include a link to a pastebin code snippet that contains the code within your block.json file?

    EDIT: I took too long to reply and discovered you pasted a snippet of the code. An explanation of what happened: there shouldn’t be any trailing commas featured in JSON, since JSON is based on JavaScript’s syntax before ES5.

    • This reply was modified 2 years, 9 months ago by Ian Sackofwits. Reason: I took too long to reply and discovered poster included code snippet

    same issue, npm run start / build getting errors, how can i fix it?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Create a Block Tutorial – npm errors’ is closed to new replies.