Build failing while importing bpmn-js-properties-panel (v5.22.0)

[sushmagow]

Describe the Bug

// getting below error during build time

ERROR in ../../../min-dash/dist/index.cjs 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ../../../file-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export default __webpack_public_path__ + "9b5675d661abcf53019b22660bf7b9bf.cjs";
 @ ../../../@bpmn-io/extract-process-variables/dist/index.js 15:14-33
 @ ../../../bpmn-js-properties-panel/dist/index.esm.js 130:0-74 16095:17-37

Steps to Reproduce

// import additional modules for BPMN modeller

import { 
    BpmnPropertiesProviderModule, 
    BpmnPropertiesPanelModule, 
    CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json';

const modeler = new BpmnModeler({
            container: '#container',
            propertiesPanel: {
                parent: '#properties'
            },
            additionalModules: [
                BpmnPropertiesProviderModule, 
                BpmnPropertiesPanelModule, 
                CamundaPlatformPropertiesProviderModule
            ]
            moddleExtensions: {
                camunda: CamundaBpmnModdle
            }
        });

// use webpack for build

Expected Behavior

//update the exports in package json for extract-process-variables // this will fix the issue

"exports": {
     ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
     },
    "./zeebe": {
      "import": "./zeebe/index.esm.js",
      "require": "./zeebe/index.js"
    }
  },

Environment

node verison 18 webpack 5 all bpmn libraries latest

[nikku]

ERROR in ../../../min-dash/dist/index.cjs 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
../../../file-loader/dist/cjs.js

Ensure you recognize .(c|m)js files in your project as JavaScript files.

---

Example configuration, ensuring cjs is not served via file-loader:

          {
            // exclude files served otherwise
            exclude: [ /\.(js|cjs|mjs)$/ ],
            type: 'asset/resource'
          }

[nikku]

Additional questions:

• Do you import the library form a CommonJS or ESM code-base?
• Did this work with previous bpmn-js-properties-panel versions?

[sushmagow]

Using esm. Not directly importing extract-process-variables, bpmn-js-properties-panel is importing. I have a work around for this in webpack for this. But updating package exports will be a good fix to support esm also

On Tue, 27 Aug 2024 at 2:45 PM, Nico Rehwaldt @.***> wrote:

Do you import the library form a CommonJS or ESM code-base?

— Reply to this email directly, view it on GitHub https://github.com/bpmn-io/extract-process-variables/issues/27#issuecomment-2311989030, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADCAJW3S6FWQVOGHPFMLRTLZTQ7SLAVCNFSM6AAAAABNFEL2LWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJRHE4DSMBTGA . You are receiving this because you authored the thread.Message ID: @.***>

[nikku]

I have a work around for this in webpack for this.

What is the workaround you mention?

[nikku]

So as I understood, from your comments, you're consuming this library from an ES module.

https://github.com/bpmn-io/extract-process-variables/pull/28, based off your suggestion, properly fixes this. It is a bug that we don't expose the ESM bundle.

[sushmagow]

Using resolve alias in webpack.

On Tue, 27 Aug 2024 at 5:00 PM, Nico Rehwaldt @.***> wrote:

I have a work around for this in webpack for this.

What is the workaround you mention?

— Reply to this email directly, view it on GitHub https://github.com/bpmn-io/extract-process-variables/issues/27#issuecomment-2312307805, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADCAJW4XGLETWG525ZCQKU3ZTRPOVAVCNFSM6AAAAABNFEL2LWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJSGMYDOOBQGU . You are receiving this because you authored the thread.Message ID: @.***>

[nikku]

https://github.com/bpmn-io/extract-process-variables/releases/tag/v0.9.0 Should work for you.