webpack / webpack-dev-middleware

A development middleware for webpack
MIT License
2.5k stars 376 forks source link

compiler.plugin is not a function #66

Closed geedmo closed 8 years ago

geedmo commented 8 years ago

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 commented 8 years ago

My fault, was using webpack-stream

jalbalah commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 2 years ago

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

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: // https://github.com/webpack/webpack-dev-server/issues/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: // https://github.com/facebookincubator/create-react-app/issues/2271 // https://github.com/facebookincubator/create-react-app/issues/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. // https://github.com/facebookincubator/create-react-app/issues/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 https://github.com/facebookincubator/create-react-app/issues/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. // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432 app.use(noopServiceWorkerMiddleware()); } }; }; `

yashmudgal05 commented 2 years ago

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