Support Webpack 4

[Rleahy22]

https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

Although this may be as simple as updating the dependency in package.json

[NN---]

Specifying webpack manually solves the problem.

webpackStream(webpackConfig, require("webpack"))

[raymond-w-ko]

I tried the above as a quick hack and it worked for now.

[AlexGrafe]

When using webpack v4.1.1 and webpack-stream v4.0.2 and specifying the webpack module in my gulpfile as webpackStream(webpackConfig, require("webpack") I get the below error:

Error in plugin "webpack-stream"
Message:
      TypeError: callback is not a function

  - plugin.js:66 compilation.plugin
    [PROJECTNAME]/[script-ext-html-webpack-plugin]/lib/plugin.js:66:11


  - new Promise


  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [PROJECTNAME]/[tapable]/lib/Hook.js:35:21

  - index.js:647
    [PROJECTNAME]/[html-webpack-plugin]/index.js:647:47

  - index.js:184 Promise.resolve.then.then.then.then.then.then.then.result
    [PROJECTNAME]/[html-webpack-plugin]/index.js:184:18


  - next_tick.js:160 process._tickCallback
    internal/process/next_tick.js:160:7


Details:
    domain: [object Object]
    domainThrown: true

'default' errored after 18 s

[negibouze]

@xanderiel Probably that error is due to "script-ext-html-webpack-plugin".
numical/script-ext-html-webpack-plugin#41

[AlexGrafe]

Thanks @negibouze !!

[beyondsanity]

Hello,

I get this error using webpack 4.1.1 or 4.2.0 and webpack-stream 4.0.3 :

/Users/claudiosuardi/nearit-frontend/node_modules/webpack-stream/index.js:181
        ? function (callback) { compiler.hooks.afterEmit.tapAsync('WebpackStream', callback); }
                                                         ^

TypeError: Cannot read property 'tapAsync' of undefined
    at /Users/claudiosuardi/nearit-frontend/node_modules/webpack-stream/index.js:181:58
    at handleCompiler (/Users/claudiosuardi/nearit-frontend/node_modules/webpack-stream/index.js:185:7)
    at Stream.<anonymous> (/Users/claudiosuardi/nearit-frontend/node_modules/webpack-stream/index.js:205:7)
    at _end (/Users/claudiosuardi/nearit-frontend/node_modules/through/index.js:65:9)
    at Stream.stream.end (/Users/claudiosuardi/nearit-frontend/node_modules/through/index.js:74:5)
    at DestroyableTransform.onend (/Users/claudiosuardi/nearit-frontend/node_modules/gulp/node_modules/readable-stream/lib/_stream_readable.js:523:10)
    at Object.onceWrapper (events.js:313:30)
    at emitNone (events.js:111:20)
    at DestroyableTransform.emit (events.js:208:7)
    at /Users/claudiosuardi/nearit-frontend/node_modules/gulp/node_modules/readable-stream/lib/_stream_readable.js:965:16
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)
error An unexpected error occurred: "Command failed.
Exit code: 1

[shama]

@beyondsanity I'm not getting that same error with webpack@4.2.0 and webpack-stream@4.0.3. Try running npm cache clean && rm -rf node_modules && npm i and try again. If it still occurs, could you post your package.json and gulpfile.js so I can try and repro?

[NN---]

This is my package.json

{
  "name": "test",
  "description": "Test",
  "license": "Test",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "@types/chai": "4.1.2",
    "@types/chrome": "0.0.61",
    "@types/core-js": "0.9.46",
    "@types/fs-extra": "5.0.1",
    "@types/jasmine": "2.8.6",
    "@types/jquery": "3.3.1",
    "@types/pako": "1.0.0",
    "@types/simple-lru": "0.0.0",
    "chai": "4.1.2",
    "circular-dependency-plugin": "5.0.0",
    "copy-webpack-plugin": "4.5.1",
    "core-js": "2.5.3",
    "crx": "3.2.1",
    "fs": "0.0.1-security",
    "fs-extra": "5.0.0",
    "glob": "7.1.2",
    "gulp": "4.0.0",
    "gulp-chutzpah": "1.5.0",
    "gulp-clean": "0.4.0",
    "gulp-cli": "2.0.1",
    "gulp-crx-pack": "1.0.2",
    "gulp-jscpd": "0.0.8",
    "gulp-json-editor": "2.2.2",
    "gulp-load-plugins": "1.5.0",
    "gulp-logger": "0.0.2",
    "gulp-multi-dest": "1.3.7",
    "gulp-rename": "1.2.2",
    "gulp-replace": "0.6.1",
    "gulp-teamcity-reporter": "0.0.2",
    "gulp-tslint": "8.1.3",
    "gulp-zip": "4.1.0",
    "hard-source-webpack-plugin": "0.6.4",
    "jasmine": "3.1.0",
    "json-loader": "0.5.7",
    "merge-stream": "1.0.1",
    "node-rsa": "0.4.2",
    "pako": "1.0.6",
    "path": "0.12.7",
    "simple-lru": "0.0.3",
    "string-replace-webpack-plugin": "0.1.3",
    "ts-loader": "4.1.0",
    "tslint": "5.9.1",
    "tslint-teamcity-reporter": "2.0.0",
    "typescript": "2.7.2",
    "uglify-js": "3.3.16",
    "webpack": "4.2.0",
    "webpack-merge": "4.1.2",
    "webpack-stream": "4.0.2",
    "wrapper-webpack-plugin": "1.0.0"
  }
}

Gulpfile.js , this is the task using webpack stream

gulp.task('default', function() {
  return gulp.src('*')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

[thisVioletHydra]

guys webpack-stream use old version

[scoop2]

after changing to "webpack": "^4.5.0" it works for me.
can you provide us with an updated package.json on npm?

Thanks in advance!

[serbanghita]

To add to what @NN--- and @mrG0bliN wrote:

node_modules\webpack-stream\index.js line 71 - already has fallback to require("webpack") but the project has an old dependency.

[RinMinase]

@mrG0bliN, that's why this is filed under the title "Support Webpack 4".

Since, this package uses "webpack": "^3.4.1"

[thetumper]

This change may make things simpler, or #188. But I was able to get past this issue after reading here, about passing webpack in as an optional 2nd argument:

https://github.com/shama/webpack-stream

[SammyVimes]

MultiCompiler support is broken (compiler.hooks.afterEmit is undefined for MultiCompiler)
Had to go with this change:

if (compiler.compilers) {
          var afterEmitPlugin = function (callback) {
            for (var _compiler of compiler.compilers) {
                _compiler.hooks.afterEmit.tapAsync('WebpackStream', callback);
            }
          };
 } else {

          var afterEmitPlugin = compiler.hooks
              // Webpack 4
              ? function (callback) { compiler.hooks.afterEmit.tapAsync('WebpackStream', callback); }
              // Webpack 2/3
              : function (callback) { compiler.plugin('after-emit', callback); };
  }

[shama]

Fixed with #187

[kamikyo]

I have the same error:

D:\work\kefu\front\node_modules\webpack-stream\index.js:198
        ? function (callback) { compiler.hooks.afterEmit.tapAsync('WebpackStream', callback); }
                                                         ^

TypeError: Cannot read property 'tapAsync' of undefined
    at D:\work\kefu\front\node_modules\webpack-stream\index.js:198:58
    at handleCompiler (D:\work\kefu\front\node_modules\webpack-stream\index.js:202:7)
    at Stream.<anonymous> (D:\work\kefu\front\node_modules\webpack-stream\index.js:218:7)
    at _end (D:\work\kefu\front\node_modules\through\index.js:65:9)
    at Stream.stream.end (D:\work\kefu\front\node_modules\through\index.js:74:5)
    at DestroyableTransform.onend (D:\work\kefu\front\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:523:10)
    at Object.onceWrapper (events.js:313:30)
    at emitNone (events.js:111:20)
    at DestroyableTransform.emit (events.js:208:7)
    at D:\work\kefu\front\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:965:16
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

package.json:

"devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-loader": "^8.0.2",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "expose-loader": "^0.7.5",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "gulp": "^3.9.1",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-stream": "^5.1.1"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }

webpack.config.js:

var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = [
    {
        
        resolve: {
            extensions: ['.js', '.json']
        },
        module: {
            rules: [
                {
                    test: require.resolve('jquery'),
                    use: [
                        {
                            loader: 'expose-loader',
                            options: '$'
                        },
                        {
                            loader: 'expose-loader',
                            options: 'jQuery'
                        }
                    ]
                },
                {
                    test: /\.js/, use: [{
                        loader: 'babel-loader'
                    }], exclude: /node_modules/
                },
                {
                    test: /\.css$/, use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: {
                            loader: "css-loader",
                            options: {
                                sourceMap: true
                            }
                        }
                    })
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    use: 'url-loader?limit=8192&name=[name].[ext]&publicPath=../&outputPath=images/'
                }
                , {
                    test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                    use: 'url-loader?limit=8192&mimetype=application/font-woff&name=[name].[ext]&publicPath=../&outputPath=fonts/'
                }
                , {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    use: 'url-loader?limit=8192&mimetype=application/octet-stream&name=[name].[ext]&publicPath=../&outputPath=fonts/'
                }
                , {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    use: 'file-loader?name=[name].[ext]&publicPath=../&outputPath=fonts/'
                }
                , {
                    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                    use: 'url-loader?limit=8192&mimetype=image/svg+xml&name=[name].[ext]&publicPath=../&outputPath=fonts/'
                }
            ]
        },

        plugins: [
            new ExtractTextPlugin('[name].style.css', { allChunks: true }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, 'src/media'), to: path.resolve(__dirname, 'dist/media') },
            ])
        ],
        devtool: 'source-map'
    }
];

gulpfile.js:

var gulp = require('gulp');
var webpack = require('webpack-stream');
var webpackConfig = require("./webpack.config.js");

gulp.task('webpacktest', function () {
    gulp.src('./src/js/index.js')
        //.pipe(webpack(webpackConfig, require('webpack')))
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./dist'));
});