search

bpmn-io / bpmn-js

A BPMN 2.0 rendering toolkit and web modeler.
https://bpmn.io/toolkit/bpmn-js/
Other
8.55k stars 1.32k forks source link

Nuxt-js integration via npm install --save bpmn-js #845

Closed mpgalaxy closed 6 years ago

mpgalaxy commented 6 years ago

running on arch linux (kernel 4.17.13, x86_64) I'm trying to import bpmn-js into my nuxt-js project as a module.

Expected Behavior

Module is being imported properly, main page appears as expected

Actual Behavior

Main page is not being shown, error: Cannot get /

Steps to reproduce the Behavior

create new nuxt-js project via npx create-nuxt-app mybpmn ->no custom server or UI framework, universal, no axios, no eslint, npm

-> cd mybpnm -> npm install --save bpmn-js -> npm run dev -> edit & save modules section in nuxt.config.js: modules: [ 'bpmn-js' ] -> refresh page on localhost:3000 -> main page is not being shown due to Cannot GET /

==> How can I import bpmn-js into nuxt-js properly ?

nikku commented 6 years ago

What is nuxt-js? How does it bundle resources for the web? Is it ES module aware?

mpgalaxy commented 6 years ago

Nuxt-js is a framework for creating Universal Vue.js Applications, which is ES module aware. See https://nuxtjs.org/api/configuration-modules

nikku commented 6 years ago

bpmn-js, by definition is not universal, as it requires a DOM to be present to render to.

In frameworks that aim to be universal you must make sure not to integrate it in the server-side build, i.e. by forcing it to be lazily loaded on the client-side only.

I hope that helps you tracking down the issue.

mpgalaxy commented 6 years ago

@nikku: reading your last answer I deleted my multipage app, created a single page one with the same procedure, but it results in the same error, I'm afraid.

One hint: I tested with a default vue.js webapp and integration worked, this seems to be an issue with Nuxt-js, but I can't resolve it.

nikku commented 6 years ago

I deleted my multipage app, created a single page one.

It is not related to the multi vs. single page app thing. The problem is related to the fact that nuxt-js tries to include bpmn-js in the back-end. That fails, as bpmn-js is a browser only library.

This is why it works in a plain vue-js client-side only application.

nikku commented 6 years ago

I'd suggest you to turn to the nuxt-js project and figure out how to include non-universal (i.e. client side only) dependencies.

Unfortunately I cannot help you beyond this point.

mpgalaxy commented 6 years ago

OK, I will try, thank you very much. :)