How to use react-native-qrcode-svg for react-native-web? - react-native

i want to use the package react-native-qrcode-svg for my react native web project, but hit this error:
Compiled with problems:X
ERROR in ./node_modules/react-native-qrcode-svg/src/index.js 29:4
Module parse failed: Unexpected token (29:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| return (
<G x={logoPosition} y={logoPosition}>
|
|
I tried installing the react-native-svg-web and managed to used .svg file only, it didn't work for this package.

Related

Why might webpack/babel stop compiling randomly?

I have encountered a few times that either the babel loader in webpack begins throwing errors unexpectedly despite nothing directly relating to webpack or babel etc being altered. As an example I was recently unable to compile due to babel not being able to handle private methods in classes, despite this supposedly being covered as part of babel 7.14+
ERROR in ./node_modules/pdfjs-dist/build/pdf.js 1413:9
Module parse failed: Unexpected character '#' (1413:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class PDFDocumentLoadingTask {
> static #docId = 0;
|
The problem persisted even after I rolled back changes to the previous working commit and in the end I was only able to get webpack to compile after reinstalling all npm packages.
What are the possible causes of this?

Libraries installed but didn't work in react-native environment

Anytime I install Library, whether it is, native base or react-native text-input effects.it gives the same error every time..
I don't know what's causing an issue here.
error: bundling failed: Error: While trying to resolve module
native-base` from file `/home/jas/Hopper/screen/Home.js`, the package `
/home/jas/Hopper /node_modules/native-base/package.json` was successfully
found. However, this package itself specifies a `main` module field that
could not be resolved (`/home/jas/Hopper/node_modules/native-base/dist
/src/index.js`. Indeed, none of these files exist:
Delete the build folder in /node_modules/native-base/android/app

How to use pdfjs with aurelia-cli

Has anyone got pdfjs (https://github.com/mozilla/pdf.js) working with the Aurelia cli?
I'm getting nowhere fast with getting it up and running.
I followed the docs here (http://aurelia.io/docs/build-systems/aurelia-cli#adding-client-libraries-to-your-project) and guessed that main needed to be set to webpack, but the paths in that file seem to be interpreted incorrectly.
------- File not found or not accessible ------
| Location: /home/ubuntu/workspace/public/pdfjs-dist/build/pdf.js
| Requested by: /home/ubuntu/workspace/public/src/modules/admin/admin.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package
------- File not found or not accessible ------
| Location: /home/ubuntu/workspace/public/src/worker-loader.js
| Requested by: /home/ubuntu/workspace/public/src/modules/admin/admin.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package

Webpack errors on Publish using Angular 4.2.5

I created an app with the SPA Templates. The Angular app is using the primeng components for the UI. In order to get the bootstrap, fontawesome and primeng themes running I ran webpack --config webpack.config.vendor.js so that I could add the css files to the nonTreeShakableModules array. Everything seems to work until I publish.
When I attempt to publish I get the following error
ERROR in ./$$_gendir/~/primeng/components/menu/menu.ngfactory.ts
Module parse failed: .\$$_gendir\node_modules\primeng\components\menu\menu.ngfactory.ts Unexpected token (14:32)
You may need an appropriate loader to handle this file type.
| import * as i3 from '#angular/router';
| import * as i4 from 'primeng/components/dom/domhandler';
| export const MenuModuleNgFactory:i0.NgModuleFactory<i1.MenuModule> = i0.?cmf(i1.MenuModule,
| ([] as any[]),(_l:any) => {
| return i0.?mod([i0.?mpd(512,i0.ComponentFactoryResolver,i0.?CodegenComponentFactoryResolver,
# ./$$_gendir/ClientApp/app/components/locations/locations.component.ngfactory.ts 9:0-99
# ./$$_gendir/ClientApp/app/components/list/list.component.ngfactory.ts
# ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
# ./ClientApp/boot.server.ts
I have this error for every primeng component that is used.
You might be experiencing this because The ASP.NET core 2.0 / Angular Template uses different typescript loaders for development and for production : awesome-typescript-loader and angular2-template-loader in development, and #ngtools/webpack in production.
From my experience, #ngtools/webpack doesn't do well with loading some third party angular components. You could try using awesome-typescript-loader and angular2-template-loader for both development and production.

aurelia - error using material-components-web with skelton-esnext project

I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?
SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';