I'm trying to build a dev server with webpack-dev-server using our own SSR architecture. This means our bundle compiles the react, and the server uses React.RenderToStaticMarkup to generate the HTML string. This is my webpack-dev-server config:
{
port: 5001,
open: true,
static: `${config.distDir}`,
client: {
overlay: {
warnings: true,
errors: true,
},
progress: true,
},
devMiddleware: {
writeToDisk: true,
},
Both the overlay and the progress properties don't seem to work at all, I do get compilation errors in the terminal, but nothing in the browser.
Since I'm doing dynamic SSR, this means the bundle generates a JS file and the server uses React.renderToStaticMarkup for generating the html string.
Can this setup even work with the dev server? What do I need to do to have the overlay and progress show in the browser?
Related
I've got a React monorepo (build in TypeScript) and I've recently been switching over from Webpack to Vite. However I'm having real difficult in getting HMR working correctly within Vite (I believe because we separately build our packages).
I'm open to options to get this working (although I think I still need to be able to build my packages, for Jest/ESLint performance).
Project Structure
\apps
\main
\packages
\domainA
\foo
\package.json
\build
\src
At the moment each package gets build using tsc "tsc --project tsconfig.lib.json" into the build directory. The package.json defines the following:
"name": "#ig/foo",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
"/build"
],
I can spin up the main application and if I make a change in /packages/domainA/foo/src/index.ts then it'll build (currently using a watcher) and I get a full page reload.
I'd like to eliminate the page reload and instead use HMR. I don't think changing the entry point to "main": "./src/index.ts" will work for my use-case due to the slowness in the other tools unfortunately. However I'm happy to try and bypass this and re-point Vite to the source files if necessary.
I've tried all sorts of permutations, having looked at a few sample repos. But not managed to get anything working, e.g.
resolve: {
alias: [{
find: '#ig/foo',
replacement: '../packages/domainA/foo/src/index.ts',
},
}
Here is my current Vite config:
import react from '#vitejs/plugin-react';
import fs from 'fs';
import path, { resolve } from 'path';
import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';
import svgrPlugin from 'vite-plugin-svgr';
export default defineConfig({
// optimizeDeps: {
// include: ['#infogrid/solution-views-occupancy'],
// },
build: {
outDir: 'build/public',
sourcemap: true,
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
base: resolve(__dirname, 'index_base.html'),
},
}
},
server: {
port: Number(process.env.PORT),
// setting to true allows external ip
host: true,
},
plugins: [
react({ fastRefresh: true }), // Primarily used for HMR
svgrPlugin({ svgrOptions: { icon: true } }), // Turns svgs into react components
mkcert(), // Allows for HTTPS during local development
]
}
I am using browserify with babelify to transpile React code from ES6 and everything went smoothly until trying to minify using Uglify and discovered that Uglify doesn't do ES6 syntax, so I switched to terser through grunt-terser but I cannot seem to find the appropriate options needed to minify React code and so I get the error "Unexpected token operator (<)" on basic React syntax when trying to use ReactDOM.render inside of my bundled javascript file.
The only other solutions I am seeing around the web is to switch from grunt to webpack but I don't want to make such a change and it not work, is there any way to make this work with terser and/or grunt?
module.exports = function(grunt) {
grunt.config.set('terser', {
dist: {
src: ['.tmp/public/concat/production.js'],
dest: '.tmp/public/js/app.js'
},
options: {
ecma: 6,
parse: {
ecma: 6,
module: true,
toplevel: true,
},
mangle: {
module: true,
keep_fnames: false,
toplevel: true
},
compress: {
unsafe_comps: true
}
}
});
grunt.loadNpmTasks('grunt-terser');
};
I have tried several different options to try and minify and all give the same error.
I'm trying to migrate my react project from webpack to vite and I'm facing this issue with proxies:
I've configured my proxy like so:
port: 8000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
'/graphql': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
But if I use it like that, then vite starts requesting localhost:8080/api for clientside files like localhost:8080/api/index.ts which throws a MIME type error.
What’s the cause for this behavior and how can I fix it? The http-proxy documentation offers no details(which is what Vite uses)
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'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