I am building electron/angular app - its working fine;
I have another nodejs script that open socket.io server; (I am using typescript + webpack for creating all files in a single bundle js file).
I am trying to include this script inside the anguler/electron. But its looks like socket.io (or some others included libraries in the script) depends on nodejs built-in packages and its not possible to use it in the angular application. That makes sense for me because you cant start socket server on the browser directly - but its a desktop eletron app.
This error appears when I am trying to build the angular app for packages:
path, os, http, https, crypto, tty, zlib, util
Error: Module not found: Error: Can't resolve 'util' in '..\src\app'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
webpack.config of the nodejs script
const path = require('path');
module.exports = {
entry: './src/index.ts',
mode: 'production',
target: 'node',
module: {
rules: [
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'script.min.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'umd',
libraryExport: 'default'
},
};
I could include this script not inside the angular app but inside the main.js where is the electron app starting from ... but this way I will not have access to the content in the script from Angular inside;
Where I am failing in this logic?
The wanted result is an electron/angular desktop app where I have a button and when click it its start socket.io server with provided Configurations.
You can fix this by simply adding this to your webpack config. I don't use Angular but in React I add this to webpack.renderer.config.js I would recommend reading about creating a secondary windows in Electron and run all of these things though.
resolve: {
// all your other configs
fallback: {
"util": false,
}
}
Related
I'm making a custom element using Svelte, that I plan to publish to NPM as a library. The component uses a library I made, that uses WebAssembly. When I build the Svelte library with Webpack, it gives me three files.
1.1.js
[hash].wasm
bundle.js
bundle.js references both the wasm file and 1.1.js. This works in the project folder itself, but when I npm pack it and try to use it in another project, it can't find the 1.1.js file or the wasm file. Apparently, the paths are relative to the website root instead of eg. /1.1.js instead of node_modules/packageName/1.1.js. I really have no clue how to fix this. Any ideas?
The start of my webpack config file looks like this:
const config: webpack.Configuration & WebpackDevServer.Configuration = {
entry: {
bundle: [
'./src/main.ts',
],
},
resolve: {
alias: {
// Note: Additional aliases will be loaded automatically from `tsconfig.compilerOptions.paths`
svelte: path.resolve('node_modules', 'svelte'),
},
extensions: ['.mjs', '.js', '.ts', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main'],
},
output: {
path: __dirname + '/public/build',
filename: '[name].js',
chunkFilename: '[name].[id].js',
},
...
I have tried both importing the bundle.js directly with HTML, and importing the package using import x from y syntax in a JavaScript file, and running Webpack on the project that uses the Svelte component. I get errors such as this ChunkLoadError: Loading chunk 1 failed. (error: http://localhost:8080/1.1.js)
I am trying to setup webpack's dev server and HMR to work with Shopify theme development. When running the server and opening the local IP, I get this error from Shopify's DNS provider, CloudFlare.
How can I properly setup webpack to inject hot changes (css/JS) to my proxied Shopify store (the mystore.myshopify.com url)?
My webpack config as follows:
const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
mode: "development",
devServer: {
contentBase: false,
hot: true,
https: true,
proxy: {
"**": {
target: "http://mystore.myshopify.com",
secure: false
}
},
},
entry: "./src/scripts/index.js",
output: {
filename: "./app.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
//postcss here (autoprefixer, babel etc)
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
};
My proposed solution for hot reloading with webpack and shopify.
In your package.json you will want the following scripts
A webpack build script that watches for changes. I have also added a progress parameter so I can see when it updates. This will be watching your /src folder for changes.
"webpack:build": "cross-env NODE_ENV=development webpack --watch --progress",
A shopify theme serve script that uploads the theme files from a /dist folder that is the output of a webpack build.
"shopify:serve": "cd dist && shopify theme serve"
You can link these two scripts together into one using the following.
"deploy:serve": "run-p -sr webpack:build shopify:serve"
So what happens is the webpack build script listens for changes in your /src code. When a change is main it re-builds the output to the /dist folder that shopify theme serve is listening on. When that updates, shopify uploads the changes.
Voila.
Here is the repo for this implementation if you want to play around - https://github.com/Sambuxc/9119-shopify-theme/
As of writing this, my dev versions are:
Node 18.7.0
Npm 8.15.0
Shopify Cli 2.21.0
Good luck and I hope this helps future developers.
Please reach out to me with any further questions if you get stuck.
I am trying to use Python Flask with a React Frontend. Here is my webpack file:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
"./js/app.jsx",
"./scss/main.scss"
],
output: {
path: __dirname + '/static',
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
},
exclude: /node_modules/
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new ExtractTextPlugin({ // define where to save the file
filename: '[name].bundle.css',
allChunks: true,
})
]
};
I am not sure if this file is the problem, but for some reason, my app is not hot-reloading. Here is a simple repo that I setup for which hot reloading does not work: https://github.com/rishub/Flask_React
I am using
webpack version: 3.8.1,
node version: 6.11.5,
npm version: 3.10.10
I cannot seem to figure out why it is not reloading.
I run python app.py in one terminal and webpack --watch in the other.
The terminal with webpack seems to detect the changes to the React jsx files, however, the app does not reload on the browser unless I force refresh, even a regular refresh does not work.
If someone would be able to point out the problem or fork/make a PR to the repo, that would be great
With watch, you're only compiling the updates themselves & not interfacing with the application.
--watch is not a flag for hot reloading in your browser. It regulates registered files for changes and recompiles the Webpack output whenever there is a change within those files. However, it does not necessarily forward that output to the browser.
Your force refresh was syncing up with the new version served up by Webpack, and also disrupting the browser cache.
Hot Module Reloading needs to be done with some kind of additional tool like Webpack HMR and a configured Webpack Dev Server.
From the docs, Hot Reloading entails all of the following:
The application asks the HMR runtime to check for updates.
The runtime asynchronously downloads the updates and notifies the application.
The application then asks the runtime to apply the updates.
The runtime synchronously applies the updates.
I have a React based application, running off a NodeJS based server, and would like to allow it to download a non-static file, without the use of xhr.
I am thinking of using Express, but I am not sure how I would make it co-exist with React in the same container? Can anyone suggest how I would go about this? I am still learning webpack and React, and I having trouble finding examples of this?
The React server is started via webpack:
node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --port 8081 --hot --inline
With the webpack-dev-server.js, looking as follows:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
The './src/index.js' is React type code.
Disclaimer: I've never used webpack-dev-server extensively myself (at least not directly), but I can think of two solutions.
One is to use setup in the webpack-dev-server configuration. As stated here:
setup: function(app) {
// Here you can access the Express app object and add your own custom middleware to it.
// For example, to define custom handlers for some paths:
// app.get('/some/path', function(req, res) {
// res.json({ custom: 'response' });
// });
}
Alternatively, which is a method I use myself, is to use webpack-dev-middleware, which is a middleware for Express. So basically, you create your own Express server that has the same functionality as webpack-dev-server.
Here's an excerpt from one of my projects (where app is the Express app instance):
// Webpack (only when not running in `production` mode):
if (process.env.NODE_ENV !== 'production') {
debug('setting up webpack middleware');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.dev');
const compiler = require('webpack')(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
noInfo : true,
publicPath : webpackConfig.output.publicPath
}));
app.use(webpackHotMiddleware(compiler));
}
In addition to #robertklep's answer, based on some further research, you can 'compile' your React project and then just make use of those resources without nodejs.
Use node & webpack to 'compile' your project:
node node_modules/.bin/webpack
This will create a bundle.js file which contains the compiled project. Other files, such as the images, external Javascript and stylesheets will need to be copied, for example (assuming there is a dist folder):
cp bundle.js dist/
cp index.html dist/
cp -rf img css frameworks dist/
Everything in the dist folder then can be served via a traditional web server, such as Nginx or Apache, with NodeJS.
I've set up a basic react application with webpack but I couldn't get the webpack-dev-server running properly.
I've installed webpack-dev-server globally and tried running the command sudo webpack-dev-server --hot as hot reloading was required.
The project seems to be working fine with just webpack cmd. It builds into my build folder and I can get it working via some server but it wont work with webpack-dev-server. From terminal its clear that the build process has completed with no error being thrown [webpack: bundle is now VALID.] and its in fact watching properly because on any change it does trigger the build process but it doesn't really gets built [it doesn't serve my bundle.js]. I tried changing the entire config and still couldn't get the issue resolved.
It would be much appreciated if someone can help.
Following is my webpack.config.js file.
var path = require('path');
module.exports = {
devtool: '#inline-source-map"',
watch: true,
colors: true,
progress: true,
module: {
loaders: [{
loader: "babel",
include: [
path.resolve(__dirname, "src"),
],
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0'],
}
}, {
loader: 'style!css!sass',
include: path.join(__dirname, 'src'),
test: /\.scss$/
}]
},
plugins: [],
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/',
filename: '[name].js'
},
entry: {
bundle: [
'./src/index.js'
]
},
devServer: {
contentBase: "./",
inline: true,
port: 8080
},
};
I've got the issue resolved by myself. Silly as it sounds but the issue was with the publicPath under the output object. It should match the path property instead of just /build/, i.e.,
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
In my case I had to check where the webpack is serving the file.
You can see it:
http://localhost:8080/webpack-dev-server
Then I could see my bundle.js path > http://localhost:8080/dist/bundle.js
After that I used that /dist/bundle.js in my index.html <script src="/dist/bundle.js"></script>
Now it refreshes any file changes.
webpack-dev-server serves your bundle.js from memory. It won't generate the file when you run it. So bundle.js is not present as a file in this scenario.
If you wan't to use bundle.js, for example to optimize it's size or test your production deployment, generate it with webpack using the webpack command and serve it in production mode.
By the way, started from Webpack v4 it is possible to write in-memory assets to disk:
devServer: {
contentBase: "./",
port: 8080,
writeToDisk: true
}
See doc.
The fix to this for me was:
devServer: {
devMiddleware: {
writeToDisk: true,
}
}
https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
Dev-server keeps the compiled file in memory, and I can't access it directly...
BUT! THE SOLUTION is that you have no need to access it, in development(even when you run your project on node server or localhost) use localhost:8080 to access your page, and that's where webpack-dev-server is serving your page and you can feel all advantages of using it(live reload!), BUT! it doesn't compile your bundle.js, SO! before production, you need to manually run webpack build command, and that's it! there is no way for dev-server to compile your bundle.js file! Good Luck!
Please refer to this - https://github.com/webpack/webpack-dev-server/issues/24
According to this, webpack dev server no longer writes to the disk. So, you wont be able to see the build file. Instead, it will be served from the memory. To get it working you have to set the proper path.
Example: in index.html loads the build file from '/dist/main.js' so in webpack config file set the output.publicPath to '/dist/'
In my case I was using VS Code and I had to restart it. I have noticed that vs code bugs up sometimes. The changes you make in configuration files (package.json, webpack.config.js etc.) do not take effect sometimes. So, in case you encounter a situation where something doesn't work even with the correct settings, just restart vs code.
I can't see any bug reports related to this. So that's strange. I'm thinking this bug is triggered if you change one of the configuration files some time later after you have already built the project multiple times.
If this is actually what's happening then it's a huge bug. I'll try switching to Visual Studio instead of Code and see if this still happens. If it does then it's probably an issue with webpack.