SyntaxError: Cannot use import statement outside a module

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

The code snippet you posted is not formatted correctly. To share code examples that illustrate your problem, please adhere to the following rules:

  • Do not post screenshots of your code
  • Focus your snippets on the few lines that matter for the topic at hand
  • Format your code

Please update your post according to these rules. We may not be able to help you otherwise. In extreme cases we may also close your topic if we regard it as spam.

Hint: To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks :heart:

1 Like

https://github.com/RajKumar-612/LightspeedAdmin. This is my github project link. please check if any issues are there in my project setup. I am a newbie to next js and bpmn .I am trying to use a modeler in my next js app.

Hey @RajKumar-612 ,

your project has no Readme or structure that makes it easy to pick up. Please explain what you tried and what your specific problem is.

Note that next-js uses server side rendering, which does not always works nicely with bpmn-js. Try not to render diagrams on the back-end, as bpmn-js relies on some window api that might not be available.