Vite esbuild failing for old Non-ESM package - reactjs

I'm trying to use glsl-transpiler(https://github.com/stackgl/glsl-transpiler) with my vite project but am running into issues with esbuild, which outputs
[ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "escaper". The package may have incorrect main/module/exports specified in its package.json.
Adding optimizeDeps: {exclude:['glsl-transpiler']} to defineConfig in vite.config.js allows the app to build, but I get a require is not defined error when I try to use the package due to the https://github.com/stackgl/glsl-transpiler/blob/master/index.js ll:8.
Does anyone know how I can successfully use this old package and its old dependencies in my project?

Related

"You may need an additional loader to handle the result of these loaders." error ( React, Typescript )

So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.

create-react-app error while using yarn 3

I'm using yarn 3.2.0(latest) and node 17.6.0(latest)
As instructed in CRA documentation I ran yarn create react-app myapp. It completed installation and was able to start the app using yarn start. However after making changes to the App , I always get the following error
ERROR
Failed to load config "react-app" to extend from.
Referenced from: D:\myapp\package.json
If I install any packages, I get module not found error like below
ERROR in ./src/App.js 6:0-39
Module not found: Error: Can't resolve 'styled-components' in 'D:\myapp\src'
Anyone know what's going on?
I had a similar issue. And found that the reason why this was happening to me was due to my Antivirus. Try disabling your antivirus on windows if you have one and re-create your project and if that fixes your issue.

Unable to resolve published NPM module in project

I recently published a simple React module that I wrote in TypeScript. I tested my module by importing the local package into a project, and it worked flawlessly. However, now that I've published the module, whenever I try to import it into a project, I get the following error:
Failed to compile.
./src/...
Module not found: Can't resolve '<module>' in '.../src/...'
Package is listed in both package.json and package-lock.json, and the module shows up in node_modules. Additionally, VS Code doesn't throw any fits, so I'm not quite sure what could be the issue.
NPM, being the "Node Package Manager" interprets packages as node modules. in the documentation, it says it will try to load a folder by looking for a package.json file, and resolving the path in main relative to the folder it found.
So when publishing a package with a build step, always make sure to build it before its published (there is a prepublish hook for this, in the scripts object in package.json).
The other thing is to make sure that the package being published refers to the correct main, bin (if applicable), and module (if applicable) paths in the package.json file. if the source file is src/mylib.coffee and the built file is dist/mylib.js, the package.json must contain { "main": "dist/mylib.js" } in order that someone installing this module as a dependency into their node_modules folder would require the correct file.
in short make sure "main" in package.json points to the right file!

Trying to compile React Native app and I am getting an error about React.js not existing

I am trying to compile my first React Native project, and it all works fine from the CLI, until I try to install a new library.
After installing any library, I get various errors, culminating in this:
error: bundling failed: Error: While trying to resolve module `react` from file `/Users/myname/Desktop/Projects/ProjectName/App.js`, the package `/Users/myname/Desktop/Projects/ProjectName/node_modules/react/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/myname/Desktop/Projects/ProjectName/node_modules/react/index.js`. Indeed, none of these files exist:
I have, indeed, confirmed that those files exist.
What is going on here? I'm constantly having these errors as I am trying to use React Native, even when rebuilding the app multiple times and trying over.
Do the following steps:
Stop metro bundler
Delete node_modules folder
cd into your project folder and run:
'npm install'

React Package is not getting loaded from node-modules

I have created the package for learning purpose nik-drop presently available in npm.
now testing purpose I tried to use that package in my another demo project but when I try to use this package from npm-moduls. I unable to access that package.
Even through Package is available in node-module folder.
import DropDownMob from 'nik-drop';
I'm getting error
Module not found: Can't resolve 'nik-drop' in '/home/nikhil/Documents/React-Project/sec/sec/src'
This is not node module path, react trying to access it from local directory.
How can I resolve it.

Resources