I'm getting warnings in my console when I save changes or reload my React application and its also very slow when reloading
Instead of using create-react-app, I followed along on Traversy Media's video https://www.youtube.com/watch?v=deyxI-6C2u4 of setting up webpack from scratch.
It was actually working fine for the first few days but suddenly started acting very slow whenever my application reloaded after saving. These are the console warnings that display for second but then disappear once the application reloads:
[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because ./src/Components/Layout/Home.js is not accepted
Update propagation: ./src/Components/Layout/Home.js -> ./src/Components/App.js -> ./src/index.js -> 0 at hotApply(http://localhost:8080/index_bundle.js:476:30) at http://localhost:8080/index.bundle.js:314:22
and this is what displays in my console when the application is running
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(md|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
}
I'm assuming I have to add something in my webpack file. Can somebody explain to me what I have to put in there to make my application run smoothly again? Thanks
You have this warning
Update propagation: ./src/Components/Layout/Home.js ->
./src/Components/App.js -> ./src/index.js
Because you changing the the code in Home.js but Home.js is the child off App.js and App.js is child of index.js so it's kinda like nested tree. So webpack don't know how to reload your page because it's deeply nested inside 2 or 3 level of file. That is just a warning of webpack that it cant do hot reload so basically everything is working fine.
Related
I'm setting up a node server to render React JSX components into images.
The server uses express, and the React components render to HTML using ReactDOMServer. I'm also using TypeScript. I bundle the whole thing using webpack. My webpack config is:
const path = require('path')
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node-modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
target: 'node'
};
The html will be rendered to an image using node-html-to-image (https://github.com/frinyvonnick/node-html-to-image)
The server starts without problems, but when a request hits the server and the html should be rendered I get an error in the console.
This is the code for the server that executes:
app.post('/', (req, res) => {
const element = <User name={req.body.name} login={req.body.login}/>
const html = ReactDOMServer.renderToStaticMarkup(element)
nodeHtmlToImage({
output: './image.png',
html: html
}).then(() => console.log("image created successfully!"))
})
and the error I get is: UnhandledPromiseRejectionWarning: Error: Unable to launch browser, error message: Could not find browser revision 737027. Run "npm install" or "yarn install" to download a browser binary.
I suspect that the problem has to do with the chromium installation coming with puppeteer not being bundled correctly by webpack but I'm not sure.
EDIT: setting an explicit executablePath works, but removes the portability of my bundle.js.
I'm trying to build an application that scrapes a dynamic webpage with the node module "puppeteer-core". The idea is to make the user click a button that will trigger a function. This function will scrape the content and return it to the user.
I set up webpack (correctly, I think), but when I build the project for production, webpack is not capable to bundle "puppeteer-core". I have the following error:
"Can't resolve 'ws' module in 'path/to/node_module/puppeteer-core/lib" (https://i.imgur.com/KmTFcnd.png)
Why am I having this error and how to solve it? It's possible to scrape a dynamic webpage in a deployed application (not using server-side nodejs)?
Webpack version: 4.28.2
I tried to use "webpack-node-externals" but with no success.
// webpack.config.js
const path = require("path")
module.exports = {
entry: {
main: './Client/js/main.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'wwwroot/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{ loader: "babel-loader"}]
}
]
},
}
I would like the achieve what I mentioned above. Allow the user to:
Click the button > Scrape Dynamic Website > Return the Information
Can anyone direct me in the right direction?
So i've setup the webpack-dev-server with the truffle suite demo, just to get a basis on the foundation of my app. So my config file includes index.html & app.js, yet it try to display a console.log output to from app.js nothing shows via the console?
webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports =
{
entry: './app/javascripts/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.js',
},
plugins: [
// Copy our app's index.html to the build folder.
new CopyWebpackPlugin([
{ from: './app/index.html', to: "index.html" }
])
],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
loaders: [
{ test: /\.json$/, use: 'json-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
]
},
devServer: {
compress: true,
disableHostCheck: true, // That solved .
quiet: false,
noInfo: false,
stats: {
// Config for minimal console.log mess.
colors: true,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false
}
}
}
app.js
// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'
// Import our contract artifacts and turn them into usable abstractions.
import metacoin_artifacts from '../../build/contracts/MetaCoin.json'
import dextre_artifacts from '../../build/contracts/Dextre.json'
console.log("starting!");
Output when running webpack
Project is running at http://localhost:8080/
webpack output is served from /
Asset Size Chunks Chunk Names
app.js 1.93 MB 0 [emitted] [big] main
index.html 19.8 kB [emitted]
webpack: Compiled successfully.
Where can view the "starting!" output, this is a real annoyance as i need to tackle errors. I've tried viewing at http://localhost:8080// and http://localhost:8080/webpack-dev-server//, but no luck.
I had this same problem. As far as I can tell, the problem is that Webpack does not actually run the generated code on the server. The process that runs on the server simply checks for file changes and re-compiles when necessary. The code is actually all running on the client. So, the only way to view output from console.log() is to view the client browser's console.
Part of the confusion here is that while normally, node runs javascript on the server, in this case, node is delegating to a separate program entirely. You can run this whole thing without node installed at all, just using a standalone installation of the webpack executable. Node's execution environment is never used, thus you can't log to it.
Since you are using webpack-dev-server the console.log is gonna be printed into the browser console. If you want to see console.log printed in your terminal you can add a console.log inside webpack.config file.
If you are not providing the webpack-dev-server a port your app should run on 80 so opening the browser there and opening the browser console and you should be able to see the "starting! log.
I've set up a Webpack project with 2 entries. I can connect to the dev server and there are no error messages. Though, when I change one of the entry files, Webpack recompiles (without any errors), the client notices and tries to fetch a JSON, wich doesn't exist. Here is the full log after connecting to the dev server:
[HMR] Waiting for update signal from WDS...
main.js:20 [WDS] Hot Module Replacement enabled.
2 main.js:20 [WDS] App updated. Recompiling...
main.js:20 [WDS] App hot update...
main.js:20 [HMR] Checking for updates on the server...
main.js:1 GET http://localhost:8080/68003e2dfaa592e9b4dc.hot-update.json 404 (Not Found)
main.js:20 [HMR] Cannot find update. Need to do a full reload!
main.js:20 [HMR] (Probably because of restarting the webpack-dev-server)
I didn't restart the dev server...
Here's my config:
const path = require("path")
const webpack = require("webpack")
var buildEntryPoint = function(entryPoint){
return [
entryPoint,
'webpack/hot/only-dev-server',
'webpack-dev-server/client?http://localhost:8080'
]
}
module.exports = {
entry: {
main: buildEntryPoint("./src/main.js"),
channel: buildEntryPoint("./src/channel.js")
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
contentBase: path.join(__dirname),
hot: true,
inline: true,
port: 8080
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
I've tried searching in the different folders of my project to see if the file was there, but with no luck. Webpack is at version 2.7.0 and the dev server at 2.6.1.
Where's the issue here, why does it request a file that doesn't exist?
I need to disable AMD on 4 files and load video.js first before loading the other 3 files, because they depend on it. When I tried doing it in webpack.config.js like so:
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
devServer: {
inline: true,
contentBase: './src',
port: 3333
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules|lib/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-2'],
plugins: ['transform-class-properties']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /[\/\\]lib[\/\\](video|playlist|vpaid|overlay)\.js$/,
exclude: /node_modules|src/
loader: 'imports?define=>false'
}
]
}
}
It doesn't really work, because it just loads video.js (with disabled AMD) and completely ignores the other 3 files.
My folder structure is like so:
▾ lib/
overlay.js
playlist.js
video.js
vpaid.js
▸ node_modules/
▾ public/
200.html
bundle.js
▾ src/
App.js
index.html
main.js
LICENSE
package.json
README.md
webpack.config.js
Now, I found something that takes me 1 step back, because now even video.js doesn't load:
require('imports?define=>false!../lib/video.js')
require('imports?define=>false!../lib/playlist.js')
require('imports?define=>false!../lib/vpaid.js')
require('imports?define=>false!../lib/overlay.js')
and instead just throws these kinds of warnings:
WARNING in ./~/imports-loader?define=>false!./lib/video.js
Critical dependencies:
15:415-422 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/video.js 15:415-422
WARNING in ./~/imports-loader?define=>false!./lib/playlist.js
Critical dependencies:
10:417-424 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/playlist.js 10:417-424
WARNING in ./~/imports-loader?define=>false!./lib/vpaid.js
Critical dependencies:
4:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/vpaid.js 4:113-120
WARNING in ./~/imports-loader?define=>false!./lib/overlay.js
Critical dependencies:
10:416-423 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./~/imports-loader?define=>false!./lib/overlay.js 10:416-423
So, my question is, how can I make this work in webpack.config.js so that I don't get these warnings?
I have solved the problem! To make this work you need this:
{
test: /[\/\\]lib[\/\\](video|playlist|vpaid|overlay)\.js$/,
exclude: /node_modules|src/
loader: 'imports?define=>false'
}
and this
require('script-loader!../lib/video.js')
require('script-loader!../lib/playlist.js')
require('script-loader!../lib/vpaid.js')
require('script-loader!../lib/overlay.js')
together!
Now, if you use this (instead of script-loader):
require('imports?define=>false!../lib/video.js')
require('imports?define=>false!../lib/playlist.js')
require('imports?define=>false!../lib/vpaid.js')
require('imports?define=>false!../lib/overlay.js')
It's not gonna work! (you need both imports-loader and script-loader working in unison.