Cannot load externally because of unexpected characters in global namespace

[ztefn]

Hello,

I like to load theme-bulma externally using webpack. But because the global name @orugaUi/themeBulma used in bulma.js contains non-ascii characters this is not possible. Works fine if I modify the bulma.js file myself to use a global name such as themeBulma.

Is there any chance the global name will be changed to something compatible with webpack in the near future? Or do you see this as a bug in webpack itself?

vue.config.js

  module.exports.configureWebpack = {
    externals: {
      "@oruga-ui/oruga-next": 'Oruga',
      "@oruga-ui/theme-bulma": "@orugaUi/themeBulma"
    }
  }

npm run build

Unexpected character '@' (1:35)
| var __WEBPACK_NAMESPACE_OBJECT__ = @orugaUi/themeBulma;
while analyzing module external var "@orugaUi/themeBulma" for concatenation

 ERROR  Error: Build failed with errors.

[jtommy]

There are other lib that are using @, what do you with them?

[ztefn]

There are other lib that are using @, what do you with them?

While some libs use @ in their npm package name (for the organzation part) I haven't encountered any that use this as their global name. As you can see in my externals excerpt, Oruga itself uses Oruga as global, not @oruga-ui/oruga-next. FormKit uses FormKitVue not @formkit/vue. I think that's exactly for this reason.

[jtommy]

I'm sorry but I don't understand the difference between Oruga and FormKit. Both use @ in the package name

[ztefn]

With global name I am referring to the global Javascript variable name when the library is used standalone. This is not the same as package name.

ForKit used FormKitVue as global name declared on line 1 of formkit-vue.js:

var FormKitVue = (function (exports, vue) {

Oruga UI uses Oruga as global name declared on line 5 of oruga.js:

    (global = global || self, factory(global.Oruga = {}, global.Vue));

theme-bulma sets the problematic "@orugaUi/themeBulma" as global name declared on line 4 of bulma.js:

    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@orugaUi/themeBulma"] = {}));

[jtommy]

Ahhh ok, now i understand i thought about a problem on Oruga too

[ztefn]

Indeed, Oruga is having a perfectly fine global name. I have been looking into were the global name is originated from and it seems to be specified in the output for UMD format in the rollup.config.js file.

So Oruga's rollup.config.js looks like this:

                format: 'umd',
                name: capitalize('oruga'),
                file: 'dist/oruga.js',
                exports: 'named',
                banner: bannerTxt,
                globals: {
                    vue: 'Vue'
                }

While theme-bulma's rollup.config.js has this crazy thing going on:

        {
          format: "umd",
          name: `${kebabCaseToPascalCase(pkg.name)}`,
          file: `${exits.umd}`,
        },
        {
          format: "umd",
          name: `${kebabCaseToPascalCase(pkg.name)}`,
          file: `${createMinifiedFileName(exits.umd)}`,
          plugins: [terser()],
        }

[jtommy]

Yes! You can change it making a PR 😉