Npm run build error

Give us more details about your build and the error

{
  "name": "grapesjs",
  "description": "Free and Open Source Web Builder Framework",
  "version": "0.17.3",
  "author": "Artur Arseniev",
  "license": "BSD-3-Clause",
  "homepage": "http://grapesjs.com",
  "main": "dist/grapes.min.js",
  "sideEffects": [
    "*.vue",
    "*.css",
    "*.scss"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/artf/grapesjs.git"
  },
  "dependencies": {
    "backbone": "1.3.3",
    "backbone-undo": "^0.2.5",
    "cash-dom": "^2.3.9",
    "codemirror": "^5.61.1",
    "codemirror-formatting": "^1.0.0",
    "keymaster": "^1.6.2",
    "promise-polyfill": "^8.1.3",
    "spectrum-colorpicker": "^1.8.0",
    "underscore": "^1.13.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@vuepress/plugin-google-analytics": "^1.8.2",
    "documentation": "^8.1.2",
    "eslint": "^6.6.0",
    "grapesjs-cli": "^1.0.15",
    "husky": "^2.7.0",
    "jest": "^24.9.0",
    "lint-staged": "^8.2.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.18.2",
    "sass": "1.32.13",
    "sinon": "^7.5.0",
    "string-replace-loader": "^2.2.0",
    "vuepress": "^1.8.2",
    "whatwg-fetch": "^3.6.2"
  },
  "keywords": [
    "grapes",
    "grapesjs",
    "wysiwyg",
    "web",
    "template",
    "editor",
    "newsletter",
    "site",
    "builder"
  ],
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": [
            "> 1%",
            "ie 11",
            "safari 8"
          ]
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ],
    "env": {
      "test": {
        "presets": [
          "@babel/preset-env"
        ]
      }
    }
  },
  "lint-staged": {
    "{src,test}/**/*.js": [
      "prettier --single-quote --write",
      "git add"
    ]
  },
  "jest": {
    "testURL": "http://localhost/",
    "modulePaths": [
      "./src"
    ],
    "testMatch": [
      "<rootDir>/test/specs/**/*.js"
    ],
    "setupFiles": [
      "<rootDir>/test/setup.js"
    ],
    "moduleNameMapper": {
      "^jquery$": "cash-dom"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "scripts": {
    "docs": "vuepress dev docs",
    "docs:api": "node docs/api.js",
    "docs:build-vp": "vuepress build docs",
    "docs:build": "npm run docs:api && npm run docs:build-vp",
    "docs:deploy": "docs/deploy.sh",
    "lint": "eslint src",
    "check": "npm run lint && npm run test",
    "build": "npm run check && run-s build:*",
    "build:js": "grapesjs-cli build --targets=\"> 1%, ie 11, safari 8, not dead\" --statsOutput=\"stats.json\" --localePath=\"src/i18n/locale\"",
    "build:css": "sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules",
    "build:locale": "rm -rf ./locale && node scripts/build-locale.js && babel locale -d locale --copy-files --no-comments",
    "start": "run-p start:*",
    "start:js": "grapesjs-cli serve",
    "start:css": "npm run build:css -- --watch",
    "format": "prettier --single-quote --write './{src,test}/**/*.js'",
    "test": "jest",
    "test:dev": "jest --watch"
  }
}

npm run build:css works fine. But npm run build gives those errors

Thanks for reporting this, @iabhiyaan.

The issue with npm run build error appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report