Single-spa import utiltity module in a Vite.js application - vite

I'm tring to import a utility module named #hexagone/styleguide in a Vite.js application named #hexagone/login without success. The documentation isn't helpfull in this particuliar case. cf utility-modules
I successfuly import the module in a equivalent Vue.js application.
In the vite.config.js file of my utility module, i'm declaring my module #hexagone/styleguide external (the build is ok).
build: {
rollupOptions: {
external: [/^#hexagone\/.+/],
}
}
And i'm importing it in my Vite.js application like that :
import { publicApiFunction } from '#hexagone/styleguide'
And my root-config project :
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa/lib/system/single-spa.min.js",
"vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js",
"#hexagone/root-config": "http://localhost:9002/hexagone-root-config.js",
"#hexagone/styleguide": "http://localhost:8080/hexagone-styleguide.js",
[...]
}
}
</script>
The error in the devtools console :
GET http://localhost:5173/src/components/Login.vue net::ERR_ABORTED 500 (Internal Server Error)
app-errors.js:11 Uncaught TypeError: application '#hexagone/login' died in status LOADING_SOURCE_CODE: Failed to fetch dynamically imported module: http://localhost:5173/src/main.js
The error in the Vite.js application console :
The following dependencies are imported but could not be resolved:
#hexagone/styleguide (imported by C:/git/login/src/components/Login.vue?id=0)
Are they installed?
Failed to resolve import "#hexagone/styleguide" from "src\components\Login.vue". Does the file exist?
16:30:09 [vite] Internal server error: Failed to resolve import "#hexagone/styleguide" from "src\components\Login.vue". Does the file exist?

Related

Cannot resolve native module in package when building Angular CLI project

Background
I'm creating an application that allows users to interact with basic web controls which output controller events through emulated virtual controllers (so user slides a slider, and that manifests in the system as an axis being changed on a virtual controller). I'm building this as an Electron app which contains an Angular CLI project.
To get the virtual controller functionality I'm consuming a project which wraps native virtual controller functionality and exposes it for node applications. (node-ViGEmClient)
Issue
I've created the basic project and imported the required package. However, when I build the project with ng-build I get the following errors:
./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\deskpad\node_modules\vigemclient\lib'
Tracking these errors down, they come from files like this:
Looking further into the package's structure, it should be looking for vigemclient.node in build/Release, and that file is indeed present:
I feel like there is some configuration I need to do in Angular (something to do with webpack?) but I don't know what it is. Can anyone point me in the right direction?
In case anyone wants to poke around with my (currently barebones) project, it's located here: DeskPad
Project Details
Node: v16.17.0
Angular CLI: v14.2.3
REPRODUCING
Create a new Angular CLI project:
ng new testProj
Install ViGEmClient package:
npm install vigemclient
Note: This seems to require libraries related to building C++ code which are prompted during the initial install for Node.
Add this line to tsconfig.json to allow synthetic default imports:
"allowSyntheticDefaultImports": true,
Reference the package in the default app component so that it is used:
import { Component } from '#angular/core';
import ViGEmClient from 'vigemclient';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'vigTestAngular';
client = new ViGEmClient();
}
Attempt to build the project with the command "npm run build"
Outcome: These errors should be produced:
./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/ViGEmClient.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/ViGEmTarget.js:5:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/X360Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
I was experiencing the exact same error with a native package. In my case this is also an Electron app with angular ~14.2 on Windows.
A friend pointed me to the problem: I was importing the native package from the angular web app code (renderer), but apparently when using native packages in an Electron application, they can only be imported in the Electron main process (main.ts).
Hope this helps!

Module not found: Can't resolve 'child_process', Module not found: Can't resolve 'http2'

I am trying to create a web-page using nodeJS and nextJS that stores documents on google drive. For this I installed the NPM module "googleapis" but when I import this module in my particular JS file it throws an error as mentioned below,
./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'
Import trace for requested module:
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js
To solve this error I have tried the below solution and this method resolved my issue, I have added this below solution in next.config.js
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
fs: false,
path: false,
child_process: false,
}
}
return config
},
This solution solved my issue but throws another error as mentioned below,
./node_modules/googleapis-common/build/src/http2.js:16:0
Module not found: Can't resolve 'http2'
Did you mean './http2'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
Import trace for requested module:
./node_modules/googleapis-common/build/src/apirequest.js
./node_modules/googleapis-common/build/src/index.js
./node_modules/googleapis/build/src/index.js
This http2 module is deprecated by NPM.
How to resolve this http2 module issue or does anyone know that how to tackle this child_process issue?

Uncaught Error: Cannot find module 'os' - using (ip) from "ip" - in react application

I have a react application that I am trying to get the server IP that the application is hosted on.
I am using the npm ip package:
https://www.npmjs.com/package/ip
Within my react application I am importing like:
import os from 'os';
import { ip } from "ip";
But I keep Uncaught Error: Cannot find module 'os' .
How can I resolve 'os' in order for my ip package to work and return me back my IP address?

Node.js - An error occurred during import third party library

Guys I am still new to Node.js and facing a problem during importing a third-party module. The module name is #azure/storage-blob and my package.json file is using "type": "module" setting.
When I try to import this module with the following syntax. I am getting an error.
import { BlobServiceClient } from "#azure/storage-blob";
SyntaxError: The requested module '#azure/storage-blob' does not provide an export named 'BlobServiceClient'
at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:107:20)
at async Loader.import (internal/modules/esm/loader.js:179:24)
But with this setting, this project is working fine on my other machine and I still don't understand it.
When I use this syntax instead of directly import the error goes away.
import AzureStorageBlob from "#azure/storage-blob";
const { BlobServiceClient } = AzureStorageBlob;
Could you please help me to understand this issue?

Error setting up react-snap for Reactjs/nodejs app hosted on heroku

I'm trying to set up react-snap in my reactjs project being hosted on heroku. I followed the instructions on the react-snap READme and have included the following in my client-side index.js:
import { hydrate, render } from 'react-dom';
const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
hydrate(<App />, rootElement);
} else {
render(<App />, rootElement);
}
When I try to deploy to heroku i get the following error:
Error: Failed to launch chrome!
.../client/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
I ran npm i puppeteer on the client side, and am able to locate the puppeteer directory, but it only includes win64-722234. Is there something special I need to do to get the linux directory to install?
I am developing in a windows environment

Resources