Develop Reference

React.js application deployment issue [Working on local but occurs on deployment]

I am facing an issue while deploying React app on Vercel (same happens on Netlify). The problem is the application is working well locally but, when I try to deploy it, it fails to resolve the context that I have implemented. The following image shows the error:
Import statements at App.js
The project created using Vite.
[enter image description here][1]
import { UserProvider } from './contexts/user/UserContext';
import { LoadingProvider } from './contexts/loading/LoadingContext';
ERROR on Vercel:
Could not resolve './contexts/user/UserContext' from src/App.jsx
error during build:
Error: Could not resolve './contexts/user/UserContext' from src/App.jsx
at error (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:198:30)
at ModuleLoader.handleResolveId (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:22508:24)
at /vercel/path0/node_modules/rollup/dist/shared/rollup.js:22471:26
Error: Command "npm run build" exited with 1

The error message contexts/user/UserContext shows that it's expecting to find
contexts/user/UserContext
in
/vercel/path0/node_modules/rollup/dist/shared
I suspect you may not have a subfolder called contexts at that location at build time in the build environment.
Check your use of the relative path in your imports. You will need to ensure the folder ends up in the right place at build time, and that the import path resolves correctly in the build environment.

this.util.TextEncoder is not a constructor only in electron app (works in chrome)

I am creating a body segmentation app using tensorflow bodypix model. It works fine in the browser. I am using webpack to use its modules(see below)
import * as wasm from "#tensorflow/tfjs-backend-wasm";
import * as tf from "#tensorflow/tfjs-core";
import * as bodyPix from "#tensorflow-models/body-pix";
wasm.setWasmPaths("./wasm/");
tf.setBackend("wasm").then(() => {
//some simple vanilla js code
});
//some more vanilla js code...
It works exactly fine in chrome and giving output as expected after running npx webpack .
However when irun it with electron simply by creating a main electron file it outputs nothing but a blank white screen with the following error in console-
Uncaught TypeError: this.util.TextEncoder is not a constructor
at new <anonymous> (main.js:2)
the line where it is pointing is from a minified codew which looks like this-
...SOME_CODE...&&Me().setPlatform("node",new class{
constructor(){this.util=n(758),this.textEncoder=new this.util.TextEncoder}...SOME_MORE_CODE...
i thought that electron is simply chrome without top bars, but this seems wrong. can someone help me here
i am using following versions-
"nodejs v12.16.3", "electron11.1.1", "tfjs2.8.2"
see the screen shot of chrome and electron-
IN CHROME(click to enlarge)
................................................
IN ELECTRON(click to enlarge)

THE SOLUTION
i previously had
wasm.setWasmPaths("./wasm/");
tf.setBackend("wasm").then(() => {
//some simple vanilla js code
});
in my main code, and i have copied the folder from wasm(dist/) to project's folder.
Deleting the same from my project's folder and changing the code to -
wasm.setWasmPaths("../node_modules/#tensorflow/tfjs-backend-wasm/dist/"); //or start from ./ if your main file is in same folder as node_modules
tf.setBackend("wasm").then(() => {
//...
});
How i recahed here?
at first thanks to #edkeveked for his effort and pointing me to
Error loading TensorflowJS in Electron App (Nodejs)
i got the solution by creating an electron hello world project and then adding tfjs, then tfjs-backend-wasm. the new project is working correctly but however even moving the node_modules from new project to older one is not working for the older. but as soon i changed the wasm path, it worked giving no error.
Update:
now I have encountered the problem several times and everytime it's solved by creating a new folder, first installing electron and creating a simple electron app first, and then installing other dependencies and copying old code in the new folder.(warning: don't copy the node modules folder)
It seems to be a bug in tfjs or electron

Window is not defined when bundling js files via webpack

I am importing a third party javascript file. When building via webpack I am getting error as 'Window is not defined' . I am able to find the cause of this issue. The reason is when building this javascript file, execution is not happening in browser environment. But I am stuck with how to fix the issue. Any help is appreciated

Solved it using https://www.npmjs.com/package/exenv package.
import ExecutionEnvironment from 'exenv';
if (ExecutionEnvironment.canUseDOM) {
require("third-party-file.js");
}

How Should I Add Toastr to my Angular 2/MVC Application

I am developing a project using Steve Sanderson's excellent template as a starting point (Angular Template for Visual Studio). I want to add Toastr functionality (Toastr) but every time I try and use it I get an error that "toastr is not defined".
I went about the following:
Added a dependency for "toastr": "2.1.2" to my package.json file.
Added both "toastr" (for the javascript) and "toastr/build/toastr.min.css" (for the css) to my webpack.config.vendor.json file.
From the command line ran webpack --config webpack.config.vendor.js.
I checked inside my vendor.css and could clearly see toastr styles. I checked inside my vendor.js and could see toastr methods. My application references both my vendor.css and vendor.js files. In fact Angular and Bootstrap styling all works fine so the references should be good.
To test Toastr functionality I wrote a very simple script
<script>toastr.success('Success')</script>
and placed it after the </body> but I got a console error in, Chrome F12, that toastr was not defined. I also tried to run the script within a click handler in an Angular component but received the same error.
Update
In my simple toastr.service.ts file which I created I added an import statement as follows: import * as toastr from "toastr"; and to prevent Typescript errors I then added: declare let toastr: any;.
The good news is My toastr service works. Frustratingly I have an error on my import statement saying "cannot find module toastr". Close.
Any suggestions why I am getting the warning and how to solve it very welcome.

Haste Haskell->JS compiler does not work on OSX, displaying specific error message when calling hastec

I've tried setting up Haste using the official installation guide. Trying to compile a Hello World produces the following error:
Compiling Main into .
Linking haste-compiler/test.js
Linking Main
Linking GHC.Types
Linking GHC.IO.Handle.Text
hastec: /Users/vhsmaia/.haste/jsmods/base/GHC/IO/Handle/Text.jsmod: openBinaryFile: does not exist (No such file or directory)
I've then tried to compile the portable version. The error is now:
hastec: user error (Haste needs to be rebooted; please run haste-boot
Running haste-boot does not amend the error.

I think the problem you have, is that hastec expects your module to have a Main module. Try renaming your file to Main.hs and add a module Main where declaration to the top of the file.