Develop Reference

Error in starting project after webpack update to version 5

I'm getting 23 errors of this kind when I'm trying to run my project:
ERROR in ./node_modules/#remotelock/react-week-scheduler/index.mjs
5:0-42 Module not found: Error: Can't resolve 'date-fns/add_hours' in
'C:\Users\platform2-frontend\node_modules#remotelock\react-week-scheduler'
Did you mean 'index.js'? BREAKING CHANGE: The request
'date-fns/add_hours' failed to resolve only because it was resolved as
fully specified (probably because the origin is strict EcmaScript
Module, e. g. a module with javascript mimetype, a '.mjs' file, or a
'.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully
specified. Add the extension to the request.
I tried updating the date-fns library to the latest version as well as the react-week-scheduler library, also I changed the way I'm importing date-fns function: instead of importing the whole library in my files I'm important like this:
import { format } from 'date-fns'
I also updated react to the latest version 18 instead of version 16.14 which I used to have.

Jekyll Converters::Scss build issue: No such file or directory # dir_chdir - /github/workspace/docs

I keep getting this error when I try to publish a site to GitHub pages.
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
19
No such file or directory # dir_chdir - /github/workspace/docs
When I try to change the folder to root, it publishes the readme.md file. When I change it to doc, I get this error.
The file runs fine locally. I don't know what the problem is. I searched online but did not find a solution that helps. Any help works.
The error is on my main branch when I try to publish it.
Links to the repo and the error on GitHub:
https://github.com/Rsmdo/dadport2
https://github.com/Rsmdo/dadport2/tree/main
I tried making a new repo but this did not solve the issue, also I went through the code to see if there were any parsing errors but there were none.

https://talk.jekyllrb.com/t/cannot-deploy-site-via-github/6883/11 says that "Jekyll can’t find the files the theme uses". The page also suggests using root instead of docs or any folder.
There are options to set the directory where Jekyll writes files to and reads file from, for example: bundle exec jekyll s -s /docs, which leads to errors in my case due to the non-existing path based on the root path (the path can also be relative I guess).
See Source: /docs, the other path do not show the docs path though.
PS C:\Users\User\usr.github.io> bundle exec jekyll s -s /docs
Configuration file: none
Source: /docs
Destination: C:/Users/User/usr.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Error reading file C:/Users/User/usr.github.io/_layouts/archive.html: No such file or directory # rb_sysopen - C:/docs/Users/User/usr.github.io/_layouts/archive.html
This may help:
https://jekyll.one/pages/public/manuals/jekyll/user_guide/configuration/
https://github.com/burtlo/jekyll-core/blob/master/site/docs/configuration.md

Error: Can't resolve 'net' after adding the rabbitode package to my React app

Just added rabbitode to my React TypeScript app so I can read from RabbitMQ. The instructions are quite straightforward, however, I hit a number of issues after installation. My module doesn't compile at all. There were a number of issues related to my using webpack 5, as described here this answer. Most of these could be resolved with the provided answer (util, buffer and querystring-es3) but I'm getting no joy with stream-browserify. Also, there are a couple of errors that I can't track down at all:
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connect.js 155:11-33
Module not found: Error: Can't resolve 'net' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connect.js 157:11-33
Module not found: Error: Can't resolve 'tls' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
The lines the error is about are:
if (protocol === 'amqp:') {
sock = require('net').connect(sockopts, onConnect);
}
else if (protocol === 'amqps:') {
sock = require('tls').connect(sockopts, onConnect);
}
else {
throw new Error("Expected amqp: or amqps: as the protocol; got " + protocol);
}
Thought this could be related to my node version as net and tls are available libraries
according to the docs but the issue remains.
Any idea about how to fix it??
Also, the stream error is:
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connection.js 18:13-37
Module not found: Error: Can't resolve 'stream' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
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: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
That I tried resolving by running npm install stream-browserify and adding stream: require.resolve("stream-browserify"), to the the fallback object in the webpack config. Why would this not work??
UPDATE
I think the problem is related to a couple of key facts:
I bootstrapped my application with the create-react-app and therefore by webpack config was ignored
rabbitode is relying on packages that were not meant for browser use.
I think the solution here is to look for a library that is more fit for purpose (or add an SseEmitter into my SpringBoot backend that reads from the queue, then read its contents in the client via an EventSource

I'm the author of the package, unfortunately it's not meant for use on frontend applications it's meant for node.js servers.
If you did find a workaround to get it working on the frontend I'd love to hear it and I'll see if I can add native support to it :)
Thanks
Evan

Webpack with target node/electron-main not recognizing import node:process

I updated the node module fix-pathbecause it was crashing intermittently.
After updating the node module I cannot use it in my main.js file as it throws the following error:
So instead of using it in the main js, I moved this piece of code to a different file which goes through the webpack build process. But then the webpack build fails as it does not recognize 'node:process'.
ERROR in ./node_modules/default-shell/index.js
Module not found: Error: Can't resolve 'node:os' in '/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell'
resolve 'node:os' in '/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell'
Parsed request is a module
using description file: /Users/shashi/projects/trici-atman-desktop/node_modules/default-shell/package.json (relative path: .)
resolve as module
/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell/node_modules doesn't exist or is not a directory
/Users/shashi/projects/trici-atman-desktop/node_modules/node_modules doesn't exist or is not a directory
/Users/shashi/projects/node_modules doesn't exist or is not a directory
/Users/shashi/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/shashi/projects/trici-atman-desktop/node_modules
using description file: /Users/shashi/projects/trici-atman-desktop/package.json (relative path: ./node_modules)
using description file: /Users/shashi/projects/trici-atman-desktop/package.json (relative path: ./node_modules/node:os)
no extension
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os doesn't exist
*
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os* doesn't exist
.js
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.js doesn't exist
.json
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.json doesn't exist
as directory
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os doesn't exist
[/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell/node_modules]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node_modules]
[/Users/shashi/projects/node_modules]
[/Users/shashi/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os*]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.js]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.json]
# ./node_modules/default-shell/index.js 2:0-33 12:18-26
# ./node_modules/shell-env/index.js
# ./node_modules/shell-path/index.js
# ./node_modules/fix-path/index.js
# ./desktopServices/AppService.js
# ./desktopServices/desktopServices.js
After seeing the answer to this question, I tried changing the target of my webpack from electron-main to node. But it still did not recognize.
How do I fix this?

This was fixed by upgrading webpack from 4 to 5.

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.

You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.