React Package is not getting loaded from node-modules - reactjs

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.

Related

Vite esbuild failing for old Non-ESM package

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?

webpack SplitChunk not working while using a specific NPM package

I'm using a NPM package in my project that has a lot of dependencies but all of them imported dynamically and also some of them lazy loaded, but when I import that package in my React project and bundle my project, all the dependencies and sources of that package comes to my app bundle, I also tried to use webpack SplitChunk but it doesn't help me and just create separate file for that package and all the dependencies of that package will load on first load.
Anyone has an idea what should I do? Due to I just import a package I don't know what source code should I share here but if you need any, comment it please.

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'

Module parse failed with custom npm package

I'm new to React and new to npm module publishing, there is a beginning for all things!
I have created a react module.
I have created a react app (using create-react-app) and i have imported the module directly (not via a npm install).
On this case, i got no errors. The app is compiling without problems.
However, when i'm trying to use my module by importing it from npm (after it's get published), it fails.
To get this issue, i have created another react app (always by using create-react-app) then i have installed my package using npm i --save my-module-name.
I'm importing it commonly by using import { SomeComponent } from 'my-module-name' instead of importing it directly.
And i got the following error
Module parse failed: Unexpected token (59:37)
You may need an appropriate loader to handle this file type.
| }
|
| generateRecoverActionsContainers = () => {
|
After some searchs, it seems to come from the Webpack configuration. But, during my searchs, i saw that people recommand to not touch the react Webpack default configuration.
From there, i'm a bit lost on how to fix that and also, why it was compiling when the module was imported directly and not compiling when it was importing from node_modules... Should i had a webpack configuration in my npm module?
Thanks in advance for your precious help!
When you publish a module on npm, you should publish compiled code. Webpack doesn't compile node_modules

REACT QRCODE: Unable to import module [cirocosta/qcode-decoder]

I am working on a React Web App which requires a QR Code Scanner,
I imported the package QCodeDecoder through npm, still when I did import QCodeDecoder from 'qcode-decoder';
it throws an error that the module not found. I checked in the npm_modules and it is there.
I think qcode-decoder is not an npm package. I see it contains a package.json but the file they are using as main doesn't exist.
In the documentation they claim the package should be installed through bower so you might need to give it a try that way.

Resources