TypeError: Cannot read property 'length' of undefined

[thescientist13]

Configuration

const WebappManifest = require('webapp-manifest-plugin');
const WebappManifestPlugin = WebappManifest.default;
const FAVICON_PLUGIN = WebappManifest.FAVICON_PLUGIN;

// ...

plugins: [
    // ...

    new FaviconsWebpackPlugin({
      logo: './components/bootstrap/images/pvd-geeks-logo.png',
      emitStats: true,
      prefix: 'icons/',
      statsFilename: 'icons/stats.json',
      inject: true,
      title: 'Providence Geeks',
      background: '#efefef',
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: false,
        favicons: true,
        firefox: true,
        opengraph: true,
        twitter: true,
        yandex: true,
        windows: true
      }
    }),

    new WebappManifestPlugin({
      name: 'Providence Geeks',
      shortName: 'PVD Geeks',
      description: 'Hello World',
      dir: 'auto',
      lang: 'en-US',
      display: 'standalone',
      orientation: 'any',
      startUrl: '/',
      backgroundColor: '#fff',
      themeColor: '#fff',
      icons: FAVICON_PLUGIN,
      preferRelatedApplications: false,
      relatedApplications: [],
      scope: '/'
    }),

Note: I am also using html-webpack-plugin, but in conjunction with webpack-merge.

Error

ERROR in   TypeError: Cannot read property 'length' of undefined

  - index.js:56 Compilation.<anonymous>
    [website-frontend]/[webapp-manifest-plugin]/lib/index.js:56:25

  - Tapable.js:270
    [website-frontend]/[webpack]/[tapable]/lib/Tapable.js:270:14

  - index.js:61 Compilation.<anonymous>
    [website-frontend]/[favicons-webpack-plugin]/index.js:61:11

  - Tapable.js:272 Compilation.applyPluginsAsyncWaterfall
    [website-frontend]/[webpack]/[tapable]/lib/Tapable.js:272:13

  - util.js:16 Compilation.tryCatcher
    [website-frontend]/[bluebird]/js/release/util.js:16:23


  - index.js:645
    [website-frontend]/[html-webpack-plugin]/index.js:645:12

  - index.js:142
    [website-frontend]/[html-webpack-plugin]/index.js:142:16

  - util.js:16 tryCatcher
    [website-frontend]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [website-frontend]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [website-frontend]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [website-frontend]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [website-frontend]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [website-frontend]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [website-frontend]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [website-frontend]/[bluebird]/js/release/async.js:17:14

The issue appears to be with this section of code

  compilationHook() {
    const config = this.config;
    return function hook(compilation) {
      compilation.plugin(HTML_PLUGIN_BEFORE_PROCESS, (htmlData, callback) => {
        let publicPath = this.options.output.publicPath;
        if (publicPath.length > 0 && publicPath[publicPath.length - 1] !== '/') { // <-- breaks on this line
          publicPath += '/';
        }

Environment

• webpack@3.6.0
• webapp-manifest-plugin@^0.0.4
• html-webpack-plugin@^2.30.1
• node@6.11.2

[thescientist13]

Thanks for making this and let me know if you need anymore info!

[thescientist13]

Here is the debug of this.options

options { entry: { index: './index.jsx', vendor: './vendor.js' },
  output:
   { path: '/Users/owenbuckley/Workspace/pvdgeeks.org/website-frontend/build',
     filename: '[name].[chunkhash].bundle.js',
     sourceMapFilename: '[name].map',
     chunkFilename: '[id].chunk.js',
     library: '',
     hotUpdateFunction: 'webpackHotUpdate',
     jsonpFunction: 'webpackJsonp',
     libraryTarget: 'var',
     hotUpdateChunkFilename: '[id].[hash].hot-update.js',
     hotUpdateMainFilename: '[hash].hot-update.json',
     crossOriginLoading: false,
     chunkLoadTimeout: 120000,
     hashFunction: 'md5',
     hashDigest: 'hex',
     hashDigestLength: 20,
     devtoolLineToLine: false,
     strictModuleExceptionHandling: false },
  context: '/Users/owenbuckley/Workspace/pvdgeeks.org/website-frontend/src',
  resolve:
   { extensions: [ '.jsx', '.js' ],
     unsafeCache: true,
     modules: [ 'node_modules' ],
     mainFiles: [ 'index' ],
     aliasFields: [ 'browser' ],
     mainFields: [ 'browser', 'module', 'main' ],
     cacheWithContext: false },
  module:
   { rules: [ [Object], [Object], [Object], [Object], [Object] ],
     unknownContextRequest: '.',
     unknownContextRegExp: false,
     unknownContextRecursive: true,
     unknownContextCritical: true,
     exprContextRequest: '.',
     exprContextRegExp: false,
     exprContextRecursive: true,
     exprContextCritical: true,
     wrappedContextRegExp: /.*/,
     wrappedContextRecursive: true,
     wrappedContextCritical: false,
     strictExportPresence: false,
     strictThisContextOnImports: false,
     unsafeCache: true },
  plugins:
   [ HtmlWebpackPlugin {
       options: [Object],
       childCompilerHash: '5db0e8d96669113f3bed3fe6e6b1a07f',
       childCompilationOutputName: 'index.html',
       assetJson: '["common.c5a9824e8044d3f7cbc4.bundle.js","index.0a54e7dbca34e2b7080b.bundle.js","styles.0a54e7dbca34e2b7080b.css","vendor.f6c1c794259a0efc1863.bundle.js"]' },
     CommonsChunkPlugin {
       chunkNames: [Object],
       filenameTemplate: undefined,
       minChunks: undefined,
       selectedChunks: undefined,
       children: undefined,
       async: undefined,
       minSize: undefined,
       ident: '/Users/owenbuckley/Workspace/pvdgeeks.org/website-frontend/node_modules/webpack/lib/optimize/CommonsChunkPlugin.js0' },
     ProvidePlugin { definitions: [Object] },
     WebpackMd5Hash {},
     FaviconsWebpackPlugin { options: [Object] },
     WebappManifestPlugin { config: [Object] },
     ExtractTextPlugin { filename: 'styles.[chunkhash].css', id: 1, options: {} },
     HtmlCriticalWebpackPlugin { options: [Object] },
     UglifyJsPlugin { options: [Object] },
     DefinePlugin { definitions: [Object] } ],
  watchOptions: {},
  devtool: false,
  cache: true,
  target: 'web',
  node:
   { console: false,
     process: true,
     global: true,
     Buffer: true,
     setImmediate: true,
     __filename: 'mock',
     __dirname: 'mock' },
  performance: { maxAssetSize: 250000, maxEntrypointSize: 250000, hints: false },
  resolveLoader:
   { unsafeCache: true,
     mainFields: [ 'loader', 'main' ],
     extensions: [ '.js', '.json' ],
     mainFiles: [ 'index' ],
     cacheWithContext: false } }
options.output { path: '/Users/owenbuckley/Workspace/pvdgeeks.org/website-frontend/build',
  filename: '[name].[chunkhash].bundle.js',
  sourceMapFilename: '[name].map',
  chunkFilename: '[id].chunk.js',
  library: '',
  hotUpdateFunction: 'webpackHotUpdate',
  jsonpFunction: 'webpackJsonp',
  libraryTarget: 'var',
  hotUpdateChunkFilename: '[id].[hash].hot-update.js',
  hotUpdateMainFilename: '[hash].hot-update.json',
  crossOriginLoading: false,
  chunkLoadTimeout: 120000,
  hashFunction: 'md5',
  hashDigest: 'hex',
  hashDigestLength: 20,
  devtoolLineToLine: false,
  strictModuleExceptionHandling: false }