Chrome reported some library "is not defined" when using CDN

[qiulang]

Hi I want to use CDN for my production build. Although I can load jQuery (as your example shows), some library was reported "not define", e.g. I want to load ztree use CDN and I use like this

    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'ztree',
          entry: 'https://cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.all.min.js',
          global: 'ztree'
        },
      ],
    }),

In my vue code import zTree from 'ztree'

When I opened my page, Chrome reported: So what did I do wrong here ?

bootstrap cff876d6b8365dfe7db2:146 ReferenceError: ztree is not defined
at Object.jbSp (external "ztree":1)
at t (bootstrap cff876d6b8365dfe7db2:54)
at Object.8Yog (tree.js:1602)
at t (bootstrap cff876d6b8365dfe7db2:54)
at Object.PhPB (noQuestion_bg.png:1)
at t (bootstrap cff876d6b8365dfe7db2:54)

The external ztree only has codes

module.exports = ztree;

//////////////////
// WEBPACK FOOTER
// external "ztree"
// module id = jbSp
// module chunks = 25

[mmiller42]

I see your error message says ReferenceError: ztree is not defined.

It might be because you imported it as zTree instead of ztree. Most likely you have code referencing it in lowercase, but it was aliased by your import statement with the capital T.

[qiulang]

I actually tried both cases, zTree and ztree, same result. I checked the ztree codes and find it doesn't modules.export , it just attaches itself to jQuery, $.fn.zTree
Could this be the reason webpack output module.exports = ztree; and no definition?

[qiulang]

Because ztree doesn't modules.export my code just import 'ztree' (to run it)

[mmiller42]

Oh! Yeah that would make sense, it's common for jQuery modules to just mutate the jQuery object instead. You should just use import 'ztree'; since there is no export for you to alias.

[qiulang]

So is this the reason Chrome reported ztree "is not defined" in my case? If yes does this mean I can not use your plugin for ztree ?

[qiulang]

Another problem I found, not sure if they are related, is that when I import css in my vue code, e.g. import 'bootstrap/dist/css/bootstrap.min.css'
Then even I use your plugin, webpack still bundled bootstrap.min.css into my css.
How do I tell webpack not to bundle it ?

    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'bootstrap',
          entry: 'https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css',
        }
      ],
    }),

[mmiller42]

I’m not sure the answer to your first question because I haven’t used zTree, but I imagine you should just be able to use zTree without any imports at all.

For your second question regarding the bootstrap css— once you have added it to the externals plugin configuration, do not import the css in your source files. It is already present. So just remove your import statement and it will not be bundled.