Unable to import modules

[DoisKoh]

Describe the Bug

I’m getting import errors with my vite / typescript project. I also notice that the project was just updated yesterday and it’s currently failing CI checks. I’m just checking if this is already a known issue.

Steps to Reproduce

npm install @bpmn-io/form-js-viewer

or

npm install @bpmn-io/form-js

Follow the instructions from the README.md to import the modules:

https://github.com/bpmn-io/form-js

Simply importing fails:

import { Form } from '@bpmn-io/form-js';

import { Form } from '@bpmn-io/form-js-viewer';

Expected Behavior

I can import the form-js modules.

Environment

• Host Node v18.16.0
• OS: Windows 11
• Library version: Tried v1.2.0 form-js and v1.3.1-alpha0 for form-js-viewer

[pinussilvestrus]

Hi @DoisKoh, thanks for opening the issue!

Mind you sharing a bit more details about your development environment?

• What errors are thrown?
• What is the exact setup?
• Can you share a link to project we can refer to?

I also notice that the project was just updated yesterday and it’s currently failing CI checks. I’m just checking if this is already a known issue.

Thanks for mentioning; we changed some things yesterday in our CI and were fixing the failing test cases. This can happen on a develop / staging branch 👍

[DoisKoh]

It's a TypeScript Svelte Kit app (Vite).

REDACTED\node_modules\@bpmn-io\form-js-viewer\dist\index.es.js:1
[1] import Ids from 'ids';
[1] ^^^^^^
[1]
[1] SyntaxError: Cannot use import statement outside a module
[1]     at internalCompileFunction (node:internal/vm:73:18)
[1]     at wrapSafe (node:internal/modules/cjs/loader:1176:20)
[1]     at Module._compile (node:internal/modules/cjs/loader:1218:27)
[1]     at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
[1]     at Module.load (node:internal/modules/cjs/loader:1117:32)
[1]     at Module._load (node:internal/modules/cjs/loader:958:12)
[1]     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
[1]     at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Sorry, I realize I posted the error in the community forum but not here.

This happens both in my much more complicated project, and just a vanilla Svelte Kit app:

npm create svelte@latest my-app
cd my-app
npm install
npm install @bpmn-io/form-js
npm run dev

Attempting to import form-js gives the above error. Other TypeScript modules can be import just fine (as in... I don't believe there's anything wrong with the projects, the settings to import other TypeScript modules are working).

[pinussilvestrus]

Thanks a lot for sharing your setup! I will have a look and see what's going on there. Reading the error message, it could also be that's a configuration issue in the vite setup (e.g. sveltejs/kit#2161)

[Skaiir]

The issue in general is simple, the importer thinks we're not in a module, but is using the module file as a source. The whole import/require thing has always been a big development pain.

I wonder if the issue here is that we're not shipping the package.json in the distribution. Because it's what contains the information where to point import statements and require statements to our library.

[Skaiir]

As an experiment @DoisKoh, you could try manually pasting in the package.json file in the corresponding node_modules folder, AFTER running npm install @bpmn-io/form-js-viewer. If that fixes your problem I think we can adjust this pretty fast so that following releases have the file included.

[DoisKoh]

Sorry, which package.json file from where to where? There's already a package.json file in the node_modules/@bpmn-io/form-js-viewer folder that looks fine. Adding 'type': 'module' to it gives me this:

file:///REDACTED/node_modules/@bpmn-io/form-js-viewer/dist/index.es.js:4
[1] import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
[1]                                            ^^^^^^^^
[1] SyntaxError: The requested module 'feelin' does not provide an export named 'evaluate'
[1]     at ModuleJob._instantiate (node:internal/modules/esm/module_job:122:21)
[1]     at async ModuleJob.run (node:internal/modules/esm/module_job:188:5)
[1]     at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)
[1]     at async nodeImport (file:///REDACTED/node_modules/vite/dist/node/chunks/dep-df561101.js:56019:17)
[1]     at async ssrImport (file:///REDACTED/node_modules/vite/dist/node/chunks/dep-df561101.js:55912:24)
[1]     at async eval (REDACTED/src/routes/REDACTED/test/+page.svelte:4:31)
[1]     at async instantiateModule (file:///REDACTED/node_modules/vite/dist/node/chunks/dep-df561101.js:55974:9)

Copying the package.json down into node_modules/@bpmn-io/form-js-viewer/dist has no effect.

[lamweili]

Hi, I'm facing the same problem as well.
Is anyone working on it?

[pinussilvestrus]

@vsgoulart I remember we saw similar problems and updated our FEEL libraries to mitigate that. Do you have more insights?

[pinussilvestrus]

Hi, I'm facing the same problem as well. Is anyone working on it?

@lamweili can you share your project setup as well? Especially your Typescript config. This helps to reproduce.

[pinussilvestrus]

We will likely need to add "type": "module" to our packages to make modern toolkits properly work.

In any case you should make sure to use form-js in Client side components as we use browser functionality. Cf. to this example project.

[pinussilvestrus]

@DoisKoh @lamweili did you try to add form-js to a Client component? Did that work for you?

In case you need further assistance, please provide more details about your setup, e.g. sharing a link to an example project. I'm closing this one for the time being; feel free to re-open.

We are considering adding the type=module config to the packages via #866. Unfortunately it's not as easy as simply adding the property as our testing environment (karma) is not supporting it completely.

[DoisKoh]

Hello, I've confirmed that as of the latest version I can import it. I'm getting some weird styling but I guess that's a separate issue I'll have to figure out. Thanks!