incompatibility with html-webpack-inline-source-plugin

Hi, I’m trying to add dynamic cdn support for my repo but I encounter this error:

  ERROR in Cannot read property 'map' of undefined
    ERROR in   TypeError: Cannot read property 'options' of undefined
      - index.js:23
        [templates_generator]/[html-webpack-inline-source-plugin]/index.js:23:36
      - new Promise
      - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
        [templates_generator]/[tapable]/lib/Hook.js:35:21
      - index.js:673
        [templates_generator]/[html-webpack-plugin]/index.js:673:47
      - index.js:187 Promise.resolve.then.then.then.then.then.then.then.result
        [templates_generator]/[html-webpack-plugin]/index.js:187:18
      - next_tick.js:188 process._tickCallback
        internal/process/next_tick.js:188:7

Everything was working fine before I added dynamic-cdn and this is my plugins section (ignore the dynamic entry suport) I saw in the code that this plugin applies the HTMLwbepack plugin and I suspect that this causes the inline-source-plugin to not work.

new HtmlWebpackPlugin({
        template: entry.template,
        filename: `${entry.chunkName}.html`,
        inlineSource: entry.splitBundle ? `(runtime.*.js$|DL.*.js$|${entry.chunkName}.*.css$)` : '.(js|css)$',
        inject: 'head',
        chunksSortMode: entry.splitBundle ? function (a, b) {
          let orders = ['runtime', 'DL', 'vendor', entry.chunkName]
          if (orders.indexOf(a.names[0]) > orders.indexOf(b.names[0])) {
            return 1
          } else if (orders.indexOf(a.names[0]) < orders.indexOf(b.names[0])) {
            return -1
          } else {
            return 0
          }
        } : () => 0
      }),
      new DynamicCdnWebpackPlugin({
        only: ['react', 'react-dom']
      }),

versions

"dynamic-cdn-webpack-plugin": "^4.0.0-rc.1",
"html-webpack-inline-source-plugin": "^0.0.10",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.5.0",

It would be great to be able to use both plugins, Thanks for the hard workd on this project!

[cheungpat]

I have the same issue. I want big dependencies to be fetched from CDN while keeping my code inline.

The key is to modify the inlineSource to only include sources that are local.

Here is how I fixed it:

      new HtmlWebpackPlugin({
        inlineSource: '^[^(//)]+\.(js|css)$' // exclude source with `//`
      }),
      new DynamicCdnWebpackPlugin(),
      new HtmlWebpackInlineSourcePlugin(),

@njzjz I hope this is helpful.

[mastilver]

@id0Sch Sorry for the delay, I don’t think there is a real solution here as if you try to in-line the JS, you are loosing the benefit of this plugin

https://github.com/DustinJackson/html-webpack-inline-source-plugin#basic-usage has a inlineSource options that should be used to not include url starting by https://unpkg.com/#/

---

I wonder if we can make the error more explicit Maybe we should set source to throw when called?