Comments (8)
My fault, was using webpack-stream
from webpack-dev-middleware.
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
from webpack-dev-middleware.
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");
});
});
from webpack-dev-middleware.
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());
}
};
};
`
from webpack-dev-middleware.
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();
});
});
from webpack-dev-middleware.
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
from webpack-dev-middleware.
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?
from webpack-dev-middleware.
@DhirendraSingh100 Have you got solution of yours error. Please share with me. It will me very helpful
from webpack-dev-middleware.
Related Issues (20)
- how to disabled webpack-dev-server to log there configurations? HOT 1
- Namespace '"fs"' has no exported member 'StatSyncFn'. HOT 1
- webpack-dev-middleware/types/index.d.ts requires @types/node@16 when Node.js 12 is still LTS HOT 1
- Problem with filesystem import
- Problem with file system import HOT 1
- Support for multipart range requests HOT 2
- Configurable logging HOT 1
- Bump memfs to 3.4.2 HOT 3
- [5.3.2] .d.ts references dom Request/Response HOT 5
- How to reference in-memory bundle from webpack-dev-middleware ? HOT 2
- Error: EPIPE: broken pipe, write causing livereload to break on Windows HOT 2
- Shared content base for multiple compiler instances HOT 6
- Propuesta
- Nueva propuesta
- Adding Hapi To The Other Servers Section Of README HOT 3
- Incorrect stats position field in res object HOT 10
- Incorrect content type when using typescript worker in dev server HOT 4
- middleware blocks on requests to non-webpack assets HOT 14
- Upgrade memfs HOT 1
- Bump json-joy dependency to new version due to bug fix with reserved windows file names HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-dev-middleware.