Closed geedmo closed 8 years ago
My fault, was using webpack-stream
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();
});
});
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");
});
});
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
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),{})
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?
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:
// 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());
}
};
};
`
@DhirendraSingh100 Have you got solution of yours error. Please share with me. It will me very helpful
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.
Any thoughts?