compiler.plugin is not a function

[geedmo]

I'm following the Browsersync - Webpack + React Hot Loader / React Transform HMR recipes trying to add hot-loader into my Gulp build system, but, I'm seeing the following error and I'm not sure to understand how this works in order to determine if this is an issue.

[19:41:07] TypeError: compiler.plugin is not a function
    at module.exports (Z:\development\reactjs\node_modules\webpack-dev-middleware\middleware.js:35:11)
    at Gulp.<anonymous> (Z:\development\reactjs\gulpfile.js:271:17)
    at module.exports (Z:\development\reactjs\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (Z:\development\reactjs\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (Z:\development\reactjs\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (Z:\development\reactjs\node_modules\orchestrator\index.js:134:8)
    at C:\Users\geedmo\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at doNTCallback0 (node.js:419:9)
    at process._tickCallback (node.js:348:13)
    at Function.Module.runMain (module.js:469:11)

Any thoughts?

[geedmo]

My fault, was using webpack-stream

[jalbalah]

Also using webpack-stream, but how else to integrate with Gulp?
var webpack = require('webpack-stream');
See: https://webpack.github.io/docs/usage-with-gulp.html
Excerpt:

gulp.task("webpack-dev-server", function(callback) {
    // Start a webpack-dev-server
    var compiler = webpack({
        // configuration
    });

    new WebpackDevServer(compiler, {
        // server and middleware options
    }).listen(8080, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        // Server listening
        gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");

        // keep the server alive or continue?
        // callback();
    });
});

[jalbalah]

Nevermind, this works:

gulp.task("webpack-dev-server", function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "eval";
    myConfig.debug = true;
    // Start a webpack-dev-server
    console.log("PATH: " + myConfig.output.publicPath);
    new WebpackDevServer(webpack(myConfig), {
        publicPath: "/" + myConfig.output.publicPath,
        stats: {
            colors: true
        }
    }).listen(3000, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:3000/webpack-dev-server/build/index.html");
    });
});

[dileepkeeppalli]

I got a similar kind of issue TypeError: compiler.HtmlParser is not a function when I try to to i18n run in my angular2 application. Any idea on this?

C02PH6QYG3QD:logger dileep$ ./node_modules/.bin/ng-xi18n
TypeError: compiler.HtmlParser is not a function
at extract (/GE/Test_Angular2/logger/node_modules/@angular/compiler-cli/src/extract_i18n.js:12:50)
at Object.main (/GE/Test_Angular2/logger/node_modules/@angular/tsc-wrapped/src/main.js:30:16)
at Object. (/GE/Test_Angular2/logger/node_modules/@angular/compiler-cli/src/extract_i18n.js:153:9)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:141:18)
at node.js:933:3
Extraction failed

[kimown]

I get the same error, because I use webpack.config.js directly, like this:

let config = require('./webpack.config')
let server = new WebpackDevServer(config,{})

the right code is (you need to require webpack first)

let config = require('./webpack.config')
let server = new WebpackDevServer(webpack(config),{})

http://webpack.github.io/docs/webpack-dev-server.html#api

[a417420427]

I have the same issue, but i use express.
TypeError: context.compiler.plugin is not a function
so i get to find the source code in webpack-dev-middleware,it's the code error happened:
context.compiler.plugin("done", share.compilerDone);
but it's a function. why?

[DhirendraSingh100]

I am upgrading to Webpack 5 following the steps described here in Webpack official doc. I have completed all steps applicable & now getting below error. What to do ?

Below is my config file

`
'use strict';

const errorOverlayMiddleware = require('react-error-overlay/middleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const config = require('./webpack.config.dev');
const paths = require('./paths');

const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';

module.exports = function (proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// webpack/webpack-dev-server#887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// facebook/create-react-app#2271
// facebook/create-react-app#2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the public
// folder we won't consider accessing them a vulnerability. However, if you
// use the proxy feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the proxy setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in public directory
// get served. Our build script will copy public into the build folder.
// In index.html, you can get URL of public folder with %PUBLIC_URL%:
//
// In JavaScript code, you can access it with process.env.PUBLIC_URL.
// Note that we only recommend to use public folder as an escape hatch
// for files like favicon.ico, manifest.json, and libraries that are
// for some reason broken when imported through Webpack. If you just want to
// use an image, put it in src and import it from JavaScript instead.
contentBase: paths.appPublic,
// By default files from contentBase will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the Webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
publicPath: config.output.publicPath,
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with compiler.plugin calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// facebook/create-react-app#293
watchOptions: {
ignored: /node_modules/
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See facebook/create-react-app#387.
disableDotRule: true
},
public: allowedHost,
proxy,
setup(app) {
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// facebook/create-react-app#2272 (comment)
app.use(noopServiceWorkerMiddleware());
}
};
};
`

[yashmudgal05]

@DhirendraSingh100 Have you got solution of yours error. Please share with me. It will me very helpful