I'm running react with HMR using webpack. When a function is deleted in a server or used shared service is deleted, no errors are emitted, neither in the console nor on the terminal.
This error can not be seen even during the build process.
I've waisted at least a day trying to find a solution for it. Any help is appreciated.
thank you.
const DEV_SERVER = {
contentBase: PATHS.public,
hot: true,
open: true,
hotOnly: true,
historyApiFallback: true,
overlay: true,
port: 3000,
// stats: 'verbose',
// proxy: {
// '/api': 'http://localhost:8888'
// },
More Details
if i have user.service.ts imported in an index.ts file and use in all the other files, then i delete the user.service.ts file.
Expected Behaviour: An error with module not found.
Current Behaviour: Nothing is showing in the console or terminal.
React v 16.13
Webpack v 4.41
Check the source maps used, this worked for me:
devtool: 'cheap-module-source-map'
Did you try the error-overlay-webpack-plugin?
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
module.exports = {
plugins: [new ErrorOverlayPlugin()]
);
https://www.npmjs.com/package/error-overlay-webpack-plugin
Related
I got an issue every time I want to run my react app it takes more than 10 minutes bundle to finished, it stack on these command
[webpack-dev-middleware] wait until bundle finished:
I have tried some solved question on google but it does not solved my problem
it makes me frustrated, any idea? thank you
const merge = require('webpack-merge');
const commonconfig = require('./webpack.common.config.js');
let config = merge(commonconfig, {
devtool: 'source-map',
devServer: {
static: {
directory: __dirname,
publicPath: '/summary/',
},
historyApiFallback: true,
client: {
overlay: false, // There are reference errors coming from de-forms-ui; disable the warning overlay for now
},
},
});
module.exports = config;
I successfully configured ASP.NET5 with Webpack4 to use HMR previously. Now, I tried to upgrade all to new versions and I couldn't make the HMR work at all.
The problem is: when I start (debug) the ASP.NET web app it shows me a '/ not found' page. It looks like the UseProxyToSpaDevelopmentServer redirects all requests to the Webpack DevServer which has no index.html at all because I just want to use it to provide HMR functionality for the ASP.NET site.
Here are all version changes:
net5.0 > net6.0
webpack: v4.43.0 > v5.64.4
webpack-cli v3.3.12 > v4.9.1
webpack-dev-server v3.11.0 > v4.6.0
The ASP.NET code is the same:
app.UseSpa(spa =>
{
spa.UseProxyToSpaDevelopmentServer("http://localhost:8888");
});
The ASP.NET web site url is: https://localhost:44331
The DevServer configuration changed because there are lot of changes between v3 and v4 (https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md).
This is the previous (which was working) devServer config:
devServer: {
compress: true,
contentBase: false,
hot: true,
port: 8888,
public: 'https://localhost:44331',
publicPath: '/dist', //this is a subfolder under the wwwroot
serveIndex: false,
},
This is the new (which is not working) devServer config:
devServer: {
hot: true,
port: 8888,
host: 'localhost',
client: {
webSocketURL: 'https://localhost:44331', //V3: devServer.public
},
devMiddleware: {
publicPath: '/dist', //V3: devServer.publicPath
},
static: false //V3 ?
}
I'm not sure about the 'static' property (the contentBase was false previously) but I don't really think that can cause the problem.
Try this I think?
devMiddleware: {
index: false, // If false (but not undefined), the server will not respond to requests to the root URL.
publicPath: '/dist'
},
The project is https://github.com/easychessanimations/htmltest .
I studied all the answers related to webpack dev server auto page reload.
When I do npm run start locally, it auto builds / reloads page on source change, so the dev server config must be right:
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 8080,
hot: true,
watchContentBase: true,
watchOptions: {
poll: true
},
},
When I do the same from the gitpod terminal, online, the page is auto rebuilt, but not auto reloaded ( no matter whether I open it in a gitpod window or in a full blown browser tab ). If I reload manually, the changes are reflected.
What extra config do I need to make it work under gitpod?
You can play around with it using this link ( of course first you need to authorize gitpod with your github account ):
https://gitpod.io/#https://github.com/easychessanimations/htmltest
in the gitpod terminal type:
npm install
npm run build
npm run start
Webpack HMR needs to be configured accordingly.
Adding the following three properties to the webpack.conf does the trick:
devServer: {
// make HMR work - start
host: '0.0.0.0',
disableHostCheck: true,
public: require('child_process').execSync('gp url 8080').toString().trim(),
// make HMR work - end
contentBase: path.join(__dirname, "dist"),
port: 8080,
hot: true,
watchContentBase: true,
watchOptions: {
poll: true
},
},
Here is a working snapshot:
https://gitpod.io/#snapshot/daa14130-2f44-430d-93ab-2d4ed980fc2c
I have my React webpack devserver set up like the following:
devServer: {
port: 3000,
historyApiFallback: true,
proxy: {
'/api': 'http://localhost:8080'
}
},
Now I also need to add disabledDotRule: true to the historyApiFallback.
Can someone help me to do that?
If I try just to change it to
historyApiFallback: {
disableDotRule: true,
},
I get the following ECONNREFUSED error:
Error occurred while trying to proxy request /api/.../ from localhost:3000 to http://localhost:8080
I guess the problem is that historyApiFallback: true is missing. How do I keep that while also adding disabledDotRule: true?
Apologies, I misunderstood your question.
Could you try the following things and see if any work:
(1) Replace "http:localhost:8080" with "http://[::1]:8080" like so:
proxy:{
"/api":"http://[::1]:8080"
}
(2) Run the API on a different port like 8081 and see if you get the same error
I'm trying to build my react library however it fails on mode: production. When I import my library to another application I get the following message:
Uncaught TypeError: Cannot set property props of #<TWithProps> which has only a getter.
Followed by:
The above error occurred in the <_class3> component
The problem is that it does seem to bundle up my library, however when importing the bundled libary, I get the 2 errors above. Additionally This does not happen in development mode.
I tried following many guides, however they all lead to the same result. My first assumption is that it's likely due to my minimizer plugin (I've tried both UglifyPlugin and TerserPlugin) however that is not the case. I've also read on webpack's documentation that it should use the minimizing plugin if given one. However it doesn't seem like it?
This is my webpack
module.exports = {
mode: 'production',
entry: {
index: [
'babel-polyfill',
'./src/index.js',
],
},
output: {
path: srcBuild,
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
libraryTarget: 'commonjs',
libraryExport: 'default',
},
optimization: {
noEmitOnErrors: true,
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {
mangle: false,
compress: {
reduce_funcs: false,
reduce_vars: false,
keep_classnames: true,
keep_fnames: true,
keep_fargs: true,
pure_getters: true,
},
},
}),
],
}
I'm expecting my library to run just fine as it does in mode: development.
May I ask how are you consuming your library from the other application? You have libraryTarget: 'commonjs' in your config. If you don't know how your clients will consume your library, the suggested option is to set the export to umd by setting libraryTarget: 'umd'.
This should allow you to use ES6 import or just require it, webpack or the other app's bundler will take care of resolving them.
Solved it by adding this plugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),