We Keep Coding

Using nodejs script with socket.io inside an angular/electron application

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,
}
}

Webpack bundling a library that uses another library that contains WebAssembly gives several files as output, but the paths to them are not relative

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)

Vue-cil3 multi-entry page after npm run build problems

Two different single-page application entries are set through the page property of vue.config.js, which is normal when running in npm run serve mode, but it runs the service with serve -s dist after npm run build, regardless of the entry of the route. Always use index.html
vue.config.js
-->
pages:{
index: {
entry: './src/main.js',
template: './public/index.html',
filename: 'index.html',
chunks: ['chunk-vendors','chunk-common','index']
},
mindex: {
entry: './src/views/Mobile/main.js',
template: './public/mindex.html',
filename: 'mindex.html',
chunks: ['chunk-vendors','chunk-common','mindex']
}
}

Webpack 4 ./src directory not found

I am trying to split the webpack config to base, dev and prod configs. Here is my entry section of webpack.base.babel.js file
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
Here is the entry section of webpackdev.babel.js file:
module.exports = require('./webpack.base.babel')({
mode: 'development',
// Add hot reloading in development
entry: [
require.resolve('react-app-polyfill/ie11'),
'webpack-hot-middleware/client?reload=true',
path.join(process.cwd(), 'app/app.js'),
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
My start script in package.json looks like: "start": "webpack-dev-server --mode development"
But when I run npm start I get the bellow error:
ERROR in Entry module not found: Error: Can't resolve './src'
. I am on Windows 10. Could anybody explain what's wrong with my webpack config. I am specifying the entry file as app/app.js but still webpack is defaulting to src/index.js.
Thanks in advance.

Just hand in your webpack config explicitely by changing your npm start script to:
"start": "webpack-dev-server --config webpackdev.babel.js"
Webpack searches for webpack.config.js in the root folder automatically. Starting with v4, Webpack also claims to be a zero config bundler, so it will use opinionated defaults, if no config can be located. E.g.:
entry point of your project is assumed to be src/index
output will be put in dist/main.js
production mode will minify and do optimizations
Your config seems to be right, but Webpack can't find it and assumes the default entry, thus your error Can't resolve './src'.

How can I dynamically import a peer dependency in a file bundled with webpack?

I am working on a plugin that uses jQuery as a peer dependency. When I try importing this plugin into my main project (that has jQuery already installed) I get the error Module not found: Error: Can't resolve 'jquery' in <(plugin's folder)>. It seems that when I try to dynamically import jQuery (a peer dependency) webpack looks in the plugin's node_modules folder when compiling, rather than the root project's node_modules, even though it is a peer dependency. How can I get webpack to look in the root project's node_modules rather than the plugin's node_modules?
Webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
watch: true,
resolve: {
alias: { jquery: "jQuery" }
}
};

I think I found the solution by adding this to my webpack config's resolve option:
modules: [
path.resolve('./node_modules'),
path.resolve('../node_modules')
]
Edit: The issue seemed to go away completely once I actually imported the project from npm, whereas before I was using an npm link. The above solution is no longer required.