Skip to content

Instantly share code, notes, and snippets.

@didi0613

didi0613/webpack4.md

Last active April 18, 2022 10:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save didi0613/b8e27b395107a891e9125118d6110aba to your computer and use it in GitHub Desktop.
Save didi0613/b8e27b395107a891e9125118d6110aba to your computer and use it in GitHub Desktop.
Download ZIP
Migrate to Webpack 4
Raw
webpack4.md

Upgrade to webpack 4

Config changes

Mode

  • Specify the mode (development/production) explicitly for running webpack.

Plugins

  • Remove outdated plugins (NoEmitOnErrorsPlugin/ModuleConcatenationPlugin/NamedModulesPlugin/CommonsChunkPlugin) and put them to optimization field in the config file with their corresponding options.
  • Other pending update list
    • html-webpack-plugin
    • extract-text-webpack-plugin (use mini-css-extract-plugin)
    • remove UglifyJsPlugin
    • replace CommonsChunkPlugin

Dependencies

  • Upgrade the versions
    • webpack v4.6.0
    • webpack-cli
    • webpack-hot-middleware
    • image-webpack-loader

Loaders

  • eslint-loader
  • file-loader
  • postcss-loader v2.1.2 configuration
  • babel-loader v7.1.4
  • json-loader

Issues Notes

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

optimization: {
      minimizer: [new uglifyJsPlugin({ uglifyOptions: uglifyOpts })]
      }

uncaughtException: Plugin could not be registered at 'fail'. Hook was not found.

BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.

stack:
[ 'TypeError: compiler.plugin is not a function',
     '    at FailPlugin.apply (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/electrode-archetype-react-app-dev/config/webpack/plugins/fail-plugin.js:17:14)',
     '    at webpack (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/webpack.js:37:12)',
     '    at processOptions (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack-cli/bin/cli.js:441:16)',
     '    at yargs.parse (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack-cli/bin/cli.js:528:3)',
     '    at Object.parse (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/__fv_/12.0.2/yargs/yargs.js:563:18)',
     '    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack-cli/bin/cli.js:219:8',
     '    at Object.<anonymous> (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack-cli/bin/cli.js:530:3)',
     '    at Module._compile (internal/modules/cjs/loader.js:689:30)',
     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)',
     '    at Module.load (internal/modules/cjs/loader.js:599:32)',
     '    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)',
     '    at Function.Module._load (internal/modules/cjs/loader.js:530:3)',
     '    at Module.require (internal/modules/cjs/loader.js:637:17)',
     '    at require (internal/modules/cjs/helpers.js:20:18)',
     '    at Object.<anonymous> (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/bin/webpack.js:165:2)',
     '    at Module._compile (internal/modules/cjs/loader.js:689:30)',
     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)',
     '    at Module.load (internal/modules/cjs/loader.js:599:32)',
     '    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)',
     '    at Function.Module._load (internal/modules/cjs/loader.js:530:3)',
     '    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)',
     '    at startup (internal/bootstrap/node.js:266:19)',
     '    at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)' ] }

Cause: webpack 4 has a new plugin system

webpack 3

apply(compiler) {
  compiler.plugin("done", () => {
    console.log("Hello world");
})

webpack 4

apply(compiler) {
  compiler.hooks.done.tap("HelloWorld", () => {
   console.log("Hello world");
})

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

Use the latest favicons-webpack-plugin from npm, delete the copied version from electrode archetype

extract-text-webpack-plugin

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Chunk.js:463:9)
    at C:\Users\errorx666\Documents\src\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at C:\Users\errorx666\Documents\src\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\errorx666\Documents\src\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\errorx666\Documents\src\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compilation.js:787:27)
    at hooks.make.callAsync.err (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compiler.js:460:17)
    at _err0 (eval at create (C:\Users\errorx666\Documents\src\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compilation.js:672:11)
    at processModuleDependencies.err (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compilation.js:614:8)
    at process._tickCallback (internal/process/next_tick.js:150:11)

upgrade to 4.0.0-beta.0

After upgrading, saw the errors:

ERROR in /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/milligram/dist/milligram.css
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
    at runLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/NormalModule.js:286:20)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at process.nextTick (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/milligram/dist/milligram.css

ERROR in ./styles/demo2.css
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
    at runLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/NormalModule.js:286:20)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at process.nextTick (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./styles/demo2.css

ERROR in ./styles/demo1.css
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
    at runLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/NormalModule.js:286:20)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at process.nextTick (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./styles/demo1.css

ERROR in ./styles/nav.css
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
    at runLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/NormalModule.js:286:20)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at process.nextTick (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./styles/nav.css

ERROR in ./styles/custom.css
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
    at runLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/NormalModule.js:286:20)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at process.nextTick (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./styles/custom.css

ERROR in ./styles/raleway.css
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
    at runLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/webpack/lib/NormalModule.js:286:20)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at process.nextTick (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./styles/raleway.css

ERROR in ./styles/demo2.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/demo2.css)
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
 @ ./styles/demo2.css 2:14-179

ERROR in /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/milligram/dist/milligram.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/milligram/dist/milligram.css)
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
 @ /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/milligram/dist/milligram.css 2:14-151

ERROR in ./styles/nav.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/nav.css)
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
 @ ./styles/nav.css 2:14-177

ERROR in ./styles/raleway.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/raleway.css)
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
 @ ./styles/raleway.css 2:14-181

ERROR in ./styles/demo1.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/demo1.css)
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
 @ ./styles/demo1.css 2:14-179

ERROR in ./styles/custom.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/custom.css)
Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
TypeError: this._compilation.applyPluginsWaterfall is not a function
    at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
 @ ./styles/custom.css 2:14-180
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js?modules&localIdentName=[hash:base64:5]&-autoprefixer!../../node_modules/postcss-loader/index.js!../../node_modules/milligram/dist/milligram.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
       1 module

    ERROR in /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_ ress/milligram/dist/milligram.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/milligram/dist/milligram.css)
    Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
    TypeError: this._compilation.applyPluginsWaterfall is not a function
        at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js?modules&localIdentName=[hash:base64:5]&-autoprefixer!../../node_modules/postcss-loader/index.js!styles/custom.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [0] /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/custom.css 325 bytes {0} [built] [failed] [1 error]

    ERROR in ./styles/custom.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/custom.css)
    Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
    TypeError: this._compilation.applyPluginsWaterfall is not a function
        at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js?modules&localIdentName=[hash:base64:5]&-autoprefixer!../../node_modules/postcss-loader/index.js!styles/demo1.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [0] /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/demo1.css 325 bytes {0} [built] [failed] [1 error]

    ERROR in ./styles/demo1.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/demo1.css)
    Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
    TypeError: this._compilation.applyPluginsWaterfall is not a function
        at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js?modules&localIdentName=[hash:base64:5]&-autoprefixer!../../node_modules/postcss-loader/index.js!styles/demo2.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [0] /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/demo2.css 325 bytes {0} [built] [failed] [1 error]

    ERROR in ./styles/demo2.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/demo2.css)
    Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
    TypeError: this._compilation.applyPluginsWaterfall is not a function
        at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js?modules&localIdentName=[hash:base64:5]&-autoprefixer!../../node_modules/postcss-loader/index.js!styles/nav.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [0] /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/nav.css 325 bytes {0} [built] [failed] [1 error]

    ERROR in ./styles/nav.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/nav.css)
    Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
    TypeError: this._compilation.applyPluginsWaterfall is not a function
        at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js?modules&localIdentName=[hash:base64:5]&-autoprefixer!../../node_modules/postcss-loader/index.js!styles/raleway.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [0] /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/raleway.css 325 bytes {0} [built] [failed] [1 error]

    ERROR in ./styles/raleway.css (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/css-loader?modules&localIdentName=[hash:base64:5]&-autoprefixer!/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader!./styles/raleway.css)
    Module build failed (from /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js):
    TypeError: this._compilation.applyPluginsWaterfall is not a function
        at Object.module.exports (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/postcss-loader/index.js:89:33)
Child favicons-webpack-plugin for "../server/iconstats.json":
     41 assets
    Entrypoint undefined = ../server/iconstats.json
    [0] /Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/favicons-webpack-plugin/lib/favicons.js?{"outputFilePrefix":"icons-[hash]/","icons":{"android":true,"appleIcon":true,"appleStartup":true,"coast":false,"favicons":true,"firefox":true,"opengraph":false,"twitter":false,"yandex":false,"windows":false},"background":"#FFFFFF","persistentCache":true,"appName":"hapi-app"}!./images/electrode.png 7.01 KiB {0} [built]

The errors above requires the loader updates:

"css-loader": "^1.0.0"
"postcss-loader": "^3.0.0"

update postcss-loader from ^0.x.x => ^3.x.x. Add postcss-loader config.

ValidationError: SourceMap DevTool Plugin Invalid Options

SourceMapDevToolPlugin options must be an object

optimization.noEmitOnErrors

module.exports = {
  //...
  optimization: {
    noEmitOnErrors: true
  }
};

TypeError: Webpack is not a constructor

at Object.register (/Users/s0d00px/Electrode/electrode/tmp/hapi-app/node_modules/electrode-archetype-react-app-dev/lib/webpack-dev-hapi.js:54:20)

Cause: The imported webpack function is fed a webpack Configuration Object and runs the webpack compiler if a callback function is provided.

mode env

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

webpack-dev-server

10% building modules 2/2 modules 0 active⚠ ｢wds｣: The `setup` option is deprecated and will be removed in v3. Please update your config to use `before`
(node:55448) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
ℹ ｢wds｣: Project is running at http://localhost:2992/
ℹ ｢wds｣: webpack output is served from http://localhost:2992/js/
(node:55448) DeprecationWarning: Resolver: The callback argument was splitted into resolveContext and callback.
(node:55448) DeprecationWarning: Resolver#doResolve: The type arguments (string) is now a hook argument (Hook). Pass a reference to the hook instead.

module resolver

(node:40534) DeprecationWarning: Resolver: The callback argument was splittedinto resolveContext and callback.
(node:40534) DeprecationWarning: Resolver#doResolve: The type arguments (string) is now a hook argument (Hook). Pass a reference to the hook instead.

apply(resolver) {
    resolver.getHook(this.source).tapAsync("ParsePlugin", (req, resolveContext, callback) => {
      const target = resolver.ensureHook(this.target);
      //
      // If require is NOT originated from a dir within node_modules, then
      // call require.resolve from within the archetype's directory
      // to make sure the instance the archetype depends on is resolved.
      //
      const atPath = req.path.indexOf(this.nmPath) < 0 ? this.originDir : req.path;

      const result = nodeResolver.resolve(req.request, atPath);

      //
      // Let webpack's internal resolver deal with requiring non-modules
      //
      if (result === undefined) return callback();

      const obj = Object.assign({}, req, result);
      
      return resolver.doResolve(
        target,
            obj,
            `looking for modules in ${obj.path}`,
            resolveContext,
            callback
          );
    });
  }

webpack-disk-plugin

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

ProgressPlugin

(node:44314) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

root cause: compiler.apply(new Webpack.ProgressPlugin({ profile: options.progressProfile }));

into: (new Webpack.ProgressPlugin({ profile: options.progressProfile })).apply(compiler);

webpack ProgressPlugin

98% after emitting unnamed compat plugin

pwa plugin fix

- configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an object.
      -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.
    * configuration.entry should be a string.
      -> An entry point without name. The string is resolved to a module whichis loaded upon startup.
    * configuration.entry[1] should be a string.
      -> A non-empty string
    * configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry arrayor a promise to these things.
    at webpack (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/webpack/lib/webpack.js:24:9)
    at Object.register (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-archetype-react-app-dev/lib/webpack-dev-hapi.js:54:20)
    at Object.target [as register] (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/__fv_/11.4.0/joi/lib/types/object/index.js:76:34)
    at each (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/hapi/lib/plugin.js:310:14)
    at iterate (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/items/lib/index.js:36:13)
    at Object.exports.serial (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/items/lib/index.js:39:9)
    at module.exports.internals.Server.internals.Plugin.register (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/hapi/lib/plugin.js:313:11)
    at Promise (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:143:16)
    at Promise.each.plg (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:142:14)
From previous event:
    at registerPlugins (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:141:20)
From previous event:
    at startElectrodeServer (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:184:6)
    at Promise.try.then.server (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:246:14)
From previous event:
    at start (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:235:71)
    at runCallback (timers.js:810:20)
    at tryOnImmediate (timers.js:768:5)
    at processImmediate [as _immediateCallback] (timers.js:745:5)
From previous event:
    at electrodeServer (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/node_modules/electrode-server/lib/electrode-server.js:293:6)
    at support.load.then (/Users/s0d00px/Electrode/electrode/samples/universal-react-node/src/server/index.js:17:12)
    at <anonymous>

Pending (commented)

webpack reporter

css-split-webpack-plugin

Waiting for webpack 4 support.

95% emitting unnamed compat pluginxxxxxxxxxxxxx LazyResult {
  stringified: false,
  processed: false,
  result:
   Result {
     processor: Processor { version: '6.0.23', plugins: [Array] },
     messages: [],
     root: Root { raws: [Object], type: 'root', nodes: [Array], source: [Object]},
     opts: { map: [Object] },
     css: undefined,
     map: undefined } }
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.

Optimization

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment