Rollup bundeler - issue with xmlbuilder dependency of geostyler-sld-parser

[thomas-romuald]

Bug

Describe the bug We try using geostyler-sld-parser on a VueJS application. Code on local machine works well using vue-cli-service serve (based on webpack-dev-server).

Production code is bundled using Rollup.js we got a warning during build due to a circular dependencies in xmlbuilder dependencies which must be imported by geostyler-sld-parser. Once deployed code failed Uncaught TypeError: Cannot read property 'prototype' of undefined" on the xml paser part.

To Reproduce Steps to reproduce the behavior:

1. Rollup config

   
   import vue from "rollup-plugin-vue";
   import alias from '@rollup/plugin-alias';
   const json = require("@rollup/plugin-json");
   import importResolver from "rollup-plugin-import-resolver";
   import nodePolyfills from 'rollup-plugin-node-polyfills';
   import resolve from "@rollup/plugin-node-resolve";
   import commonjs from "@rollup/plugin-commonjs";
   import { i18n } from "./lib/index.js";

const postcss = require("rollup-plugin-postcss"); const ComponentVue = [ "./src/lib/modules/msec-visualisation-block/msec-visualisation-block.vue",

// Module below contains : // import SLDParser from "geostyler-sld-parser"; // import OpenLayersParser from "geostyler-openlayers-parser"; "./src/lib/modules/rrp-visualisation-block/rrp-visualisation-block.vue" ];

const confFile = ComponentVue.map(componentpath => { const confFileName = componentpath.split("/").reverse()[0]; return { input: componentpath, output: { file: "modules/" + confFileName + ".esm.js", format: "esm" }, moduleContext: { 'node_modules/sax/lib/sax.js': 'window' }, external: ["vue-i18n","vue"], plugins: [ alias({ entries: { ['@']: __dirname + '/src' } }), nodePolyfills(), commonjs({ include: /node_modules/ }), resolve(), importResolver({ extensions: [".js", ".vue"] }), postcss(), json(), i18n(), vue({ customBlocks: ["i18n"] }) ] }; }); export default confFile;

Dependencies version in package.json
```js
  "dependencies": {
    "@mapbox/geojson-extent": "^1.0.0",
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "dotenv": "^8.2.0",
    "geojson-extent": "^0.3.2",
    "geostyler": "^4.6.0",
    "geostyler-openlayers-parser": "^2.1.0",
    "geostyler-sld-parser": "^2.0.1",
    "lodash": "^4.17.15",
    "marked": "^0.8.0",
    "moment": "^2.24.0",
    "ol": "^5.3.0",
    "ol-ext": "^3.1.16",
    "ol-tilecache": "^3.0.2",
    "openlayers-ext": "^3.1.5",
    "raw-loader": "^4.0.2",
    "rollup": "^1.31.0",
    "rollup-plugin-import-resolver": "^1.0.4",
    "vue": "^2.6.11",
    "vue-axios": "^2.1.5",
    "vue-i18n": "^8.0.0",
    "vue-router": "^3.1.5",
    "vuelayers": "^0.11.28",
    "vuetify": "^2.3.4",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@intlify/rollup-plugin-vue-i18n": "^0.1.0",
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@rollup/plugin-alias": "^3.0.1",
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-json": "^4.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "@rollup/plugin-yaml": "^2.1.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "lint-staged": "^9.5.0",
    "rollup-plugin-analyzer": "^3.2.2",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-import-resolver": "^1.0.4",
    "rollup-plugin-includepaths": "^0.2.3",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^2.5.0",
    "rollup-plugin-vue": "^5.1.4",
    "rollup-pluginutils": "^2.8.2",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "sedoo-static-upload-plugin": "^0.1.3",
    "vue-cli-plugin-i18n": "~0.6.1",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0",
    "webpack-cdn-upload-plugin": "^2.1.0",
    "webpack-cli": "^3.3.11"
  },

2. npm run build:modules

> theia-metadata-components@0.1.0 build:modules /home/tromuald/git/theiacomponents
> rm -rf ./modules && rollup --config rollupBuildAllComponents.config.js

./src/lib/modules/msec-visualisation-block/msec-visualisation-block.vue → modules/msec-visualisation-block.vue.esm.js...
created modules/msec-visualisation-block.vue.esm.js in 488ms

./src/lib/modules/rrp-visualisation-block/rrp-visualisation-block.vue → modules/rrp-visualisation-block.vue.esm.js...
(!) Circular dependencies
node_modules/xmlbuilder/lib/XMLNode.js -> node_modules/xmlbuilder/lib/XMLElement.js -> node_modules/xmlbuilder/lib/XMLNode.js
node_modules/xmlbuilder/lib/XMLNode.js -> node_modules/xmlbuilder/lib/XMLElement.js -> node_modules/xmlbuilder/lib/XMLAttribute.js -> node_modules/xmlbuilder/lib/XMLNode.js
node_modules/xmlbuilder/lib/XMLNode.js -> node_modules/xmlbuilder/lib/XMLElement.js -> node_modules/xmlbuilder/lib/XMLAttribute.js -> /home/tromuald/git/theiacomponents/node_modules/xmlbuilder/lib/XMLNode.js?commonjs-proxy -> node_modules/xmlbuilder/lib/XMLNode.js
...and 9 more
created modules/rrp-visualisation-block.vue.esm.js in 3.9s
[tromuald@F-L050-B007 theiacomponents]$ 

3. Once deployed after npm run deploy the block doesn't show up I can see in the browser console Uncaught TypeError: Cannot read property 'prototype' of undefined on the following part of rrp-visualisation-block.vue.esm.js

   
   var XMLElement = createCommonjsModule(function (module) {
   // Generated by CoffeeScript 1.12.7
   (function() {
   var NodeType$1, XMLAttribute$1, XMLElement, XMLNamedNodeMap$1, XMLNode$1, getValue, isFunction, isObject, ref,
   extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
   hasProp = {}.hasOwnProperty;

4. See error
Looks like like it's a known issue https://github.com/rollup/rollup/issues/1767#issuecomment-348408652

**Expected behavior**
Do you see a way to use geostyler-sld-parser with the bundler Rollup.js ?

**Desktop (please complete the following information):**
 - OS: [CentOS 8]
 - Browser [Chrome]
 - Version [Version 80.0.3987.122 (Build officiel) (64 bits)]

[jansule]

@KaiVolland could you take a look at that, as you are way more familiar with the whole bundling thing?

[KaiVolland]

Apologies for not having a look at this. :worried: As this issue is almost four years old and i like to clean up some issues. I'll close this. If this is still an issue and you not just thrown away the geostyler please let us know @thomas-romuald .