incompatibility with html-webpack-inline-source-plugin

[id0Sch]

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!

[aulisius]

Which version of the plugins are you using? Note that dynamic-cdn-webpack >= 4 only works on webpack >=4

[id0Sch]

Of course :)

"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",

[id0Sch]

@aulisius do you have any idea what causes it? because for now I've hardcoded the react min bundle in my HTML and it's such a bad practice :\

[mastilver]

@id0Sch Can you confirm me that everything is working fine, without dynamic-cdn-webpack-plugin

I'm asking because html-webpack-inline-source-plugin doesn't have test running webpack@4 and html-webpack-plugin@3 so it might be a bug on there side

[id0Sch]

Everything is working fine without dynamic-cdn. I will also check with online-source for open issues Thanks!

…

On Thu, May 10, 2018 at 11:58 Thomas Sileghem ***@***.***> wrote: @id0Sch <https://github.com/id0Sch> Can you confirm me that everything is working fine, without dynamic-cdn-webpack-plugin I'm asking because html-webpack-inline-source-plugin doesn't have test running ***@***.*** and ***@***.*** so it might be a bug on there side — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#44 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFl9RCGHGzJnBO7O9jXYSPPbS4GxOAPwks5txAE9gaJpZM4T02Dx> .

[id0Sch]

I can't see any issue in inline-source that could cause this issue.

[aulisius]

Bit busy with vacation. Will try to get to this tmrw. I think it might be something to do with ordering of plugins and in what order they access the HtmlWebpackPlugin event hooks.

[aulisius]

Finally got around to creating a repro https://github.com/aulisius/dynamic-cdn-issue-44-repro/blob/master/webpack.config.js . Really sorry for the delay @id0Sch . Will get working soon.

[id0Sch]

@aulisius It's fine :)
Let me know if you need anything else 👍
Thanks again!

[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?

[njzjz]

Any progress or advice to solve this issue? I met the same problem.

[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.