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

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.

Related

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.

Why Typescript is not recognizing min.js and .js import?

Hi I am trying to import some js file of a installed dashboard in a typescript file of React app. But it is not working, Below I have added a screenshot of the imports and error.
Please help:
The error msg tells you precisely what to do:
npm i --save-dev #types/adminbsb-materialdesign
In order for typescript to work with external libraries you need to import type definitions (*.d.ts) for them. --save-dev makes the package available in dev time only.

Realm and React error. Can't resolve 'react-native' in app created with create-react-app

I'm attempting to add the Realm package to a project created with create-react-app. I simply run the create script, install the project, then install realm. When I attempt to import or require 'realm' I get a Can't resolve 'react-native' error.
npx create-react-app my-app
cd my-app
npm i
npm i --save realm
npm start
At this point, if I attempt to import realm anywhere in the project, for instance by adding:
import Realm from 'realm';
or
Realm = require('realm');
to App.js or Index.js
I get the following error.
./node_modules/realm/lib/browser/index.js
Module not found: Can't resolve 'react-native' in '/Users/scolobey/Desktop/Projects/realm-blog/node_modules/realm/lib/browser'
As far as I have been able to tell, this seems to be related to webpack. Opening the console on this error page, I see:
./node_modules/realm/lib/browser/index.js
Module not found: Can't resolve 'react-native' in '/Users/scolobey/Desktop/Projects/javascript/my-app/node_modules/realm/lib/browser'
console.<computed> # index.js:1
r # backend.js:6
handleErrors # webpackHotDevClient.js:173
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:212
Create React App is for regular React apps (not mobile/“React Native” apps). Your app is complaining because it expects to find the “react-native” package, which doesn’t come included with Create React App.
You’ll note that Realm’s Installation Guide specifically instructs you to set up react native before installing the package.
As mentioned in the React Native Docs - Getting Started (which is linked to in the above Realm installation guide), you likely want to use expo instead of Create React App.
Once the React Native app is set up, you can proceed with installing Realm.

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.

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

Resources