error - C:\Users\hp\Downloads\LightspeedAdmin\LightspeedAdmin\node_modules\bpmn-js\lib\Modeler.js:1
import inherits from ‘inherits-browser’;
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions…js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.bpmn-js/lib/Modeler (C:\Users\hp\Downloads\LightspeedAdmin\LightspeedAdmin.next\server\pages\index.js:119:18)
at webpack_require (C:\Users\hp\Downloads\LightspeedAdmin\LightspeedAdmin.next\server\webpack-runtime.js:33:42) {
page: ‘/’
This is the modeller functional component in my nextjs app
import Modeler from “bpmn-js/lib/Modeler”;
import “bpmn-js/dist/assets/diagram-js.css”;
import “bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css”;
import { useEffect, useRef } from “react”;
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn=“http://www.omg.org/spec/BPMN/20100524/MODEL” xmlns:bpmndi=“http://www.omg.org/spec/BPMN/20100524/DI” xmlns:dc=“http://www.omg.org/spec/DD/20100524/DC” id=“Definitions_1” targetNamespace=“http://bpmn.io/schema/bpmn” exporter=“Camunda Modeler” exporterVersion=“3.3.5”>
<bpmn:process id=“Process_1” isExecutable=“true”>
</bpmn:process>
<bpmndi:BPMNDiagram id=“BPMNDiagram_1”>
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>`;
const BPMNModeler = () =>{
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
const modeler = new Modeler({
container,
keyboard: {
bindTo: document
}
});
modeler.importXML(xml, (err: any) => {
if (err) {
console.error(err);
}
const canvas = modeler.get("canvas");
const elementFactory = modeler.get("elementFactory");
canvas.zoom("fit-viewport");
var task = elementFactory.createBpmnElement("shape", {
type: "bpmn:Task",
x: 350,
y: 100
});
var root = canvas.getRootElement();
canvas.addShape(task, root);
});
}, [])
return (
<div ref={containerRef} style={{width: '100%', height: '100%'}}>
</div>
);
}
export default BPMNModeler;
Package.json
{
“name”: “yarn”,
“version”: “1.0.0”,
“private”: true,
“scripts”: {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint src",
"test": "jest",
"test:unit": "yarn test --config=jest-unit.config.js",
"test:integration": "yarn test --config=jest-integration.config.js",
"test:watch": "yarn storybooktest --watchAll",
"test:unit:watch": "yarn test --config=jest-unit.config.js --watchAll",
"test:integration:watch": "yarn test --config=jest-integration.config.js --watchAll",
"test:coverage": "yarn test --coverage",
"": "start-storybook -s ./public -p 6006",
"build-storybook": "build-storybook",
"prepare": "husky install"
},
“lint-staged”: {
"src/**/*": "yarn lint --fix"
},
“dependencies”: {
"@bpmn-io/properties-panel": "^1.1.1",
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^2.0.8",
"axios": "^0.27.2",
"bpmn-font": "^0.10.0",
"bpmn-js": "^11.1.1",
"bpmn-js-properties-panel": "^1.15.1",
"markdown-to-jsx": "^7.1.7",
"next": "12.2.3",
"react": "18.2.0",
"react-bpmn": "^0.2.0",
"react-dom": "18.2.0",
"react-select": "^5.7.0",
"zustand": "^4.1.1"
},
“devDependencies”: {
"@babel/preset-typescript": "^7.18.6",
"@storybook/addon-actions": "^6.5.12",
"@storybook/addon-essentials": "^6.5.12",
"@storybook/addon-interactions": "^6.5.12",
"@storybook/addon-links": "^6.5.12",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/addon-viewport": "^6.5.12",
"@storybook/builder-webpack5": "^6.5.12",
"@storybook/manager-webpack5": "^6.5.12",
"@storybook/react": "^6.5.12",
"@storybook/testing-library": "^0.0.13",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/react-hooks": "^8.0.1",
"@types/babel__core": "^7.1.19",
"@types/jest": "^28.1.6",
"@types/node": "^18.6.3",
"@types/react": "^18.0.15",
"@typescript-eslint/eslint-plugin": "^5.32.0",
"@typescript-eslint/parser": "^5.32.0",
"autoprefixer": "^10.4.8",
"babel-loader": "^8.2.5",
"eslint": "8.21.0",
"eslint-config-next": "12.2.3",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.6.4",
"husky": "^8.0.0",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"lint-staged": "^13.0.3",
"postcss": "^8.4.16",
"prettier": "2.7.1",
"simple-zustand-devtools": "^1.1.0",
"storybook-css-modules-preset": "^1.1.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.7.4"
},
“description”: “admin page”,
“main”: “yes”,
“license”: “MIT”
}strong text
