Bpmnlint-loader not processing bpmn-js-bpmnlint.css

Developers Modeler
#1

Hi,

I’ve been trying to use BPMNLint for my modeller, but it seems like the loader won’t process on the bpmn-js-bpmnlint.css so it’s unable to use it. I get this Error:

ERROR in ./node_modules/bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
.bjsl-overlay {
| z-index: 500;
| }
@ ./app/app.js 11:0-63
@ multi ./app/app.js
i ｢wdm｣: Failed to compile.

The loader is in my webpack.config.js and the installation “npm i bpmnlint-loader -D” seems to work.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    bundle: ['./app/app.js']
  },
  output: {
    path: __dirname + '/public',
    filename: 'app.js'
  },
  module: {
    rules: [
        {test: /\.bpmn$/, use: 'raw-loader'},
        {test: /\.bpmnlintrc$/,
          use: [
            {
              loader: 'bpmnlint-loader',
            }
          ]
        }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'assets/**', to: 'vendor/bpmn-js', context: 'node_modules/bpmn-js/dist/' },
      { from: '**/*.{html,css}', context: 'app/' }
    ])
  ],
  mode: 'development',
  devtool: 'source-map',

}

Do I miss out on something before using the loader?

#2

Are you importing the bpmn-js-bpmnlint.css styles in your to-be-bundled code? If that’s the case, you will need to include a style loader (e.g. css-loader) to make it work.

#3

I included the css-loader. But when I try to install it I get this Error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: bpmn-js-example-model-extension@0.0.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR! dev webpack@"^4.15.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from css-loader@6.7.1
npm ERR! node_modules/css-loader
npm ERR! dev css-loader@"^6.7.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Noah\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Noah\AppData\Local\npm-cache_logs\2022-05-24T08_29_40_614Z-debug.log

I tried to use --force, but that does not solve the Problem. If I try to run it I get this ERROR:

ERROR in ./node_modules/bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css (./node_modules/css-loader/dist/cjs.js!./node_modules/bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (C:\Users\Noah\Documents\UOS\WS 21-22\Clone_Master_Projekt\isp-prozessdigitalisierung\nodejs\node_modules\css-loader\dist\index.js:31:27)
@ ./node_modules/bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css 2:12-94 9:17-24 13:15-22
@ ./app/app.js
@ multi ./app/app.js