React Native import external stylesheet - reactjs

For some reason I can import the style if it's within the project director:
import styles from '../../../styles/style
But once I try to import from an external stylesheet, using the following line of code:
import styles from 'https://.....js';
I receive the error "Requiring unknown module https://.....js. If you are sure the module is there, try restarting the packager."
Is there a different method to importing externally? Thanks!

Related

Attempted import error in react when importing Typogaphy and TexxtField from MUI

I work in a group project in gitlab, and when i try to run yarn dev for my react project I get the following error:
Attempted import error: '#mui/material/Typography' does not contain a default export (imported as 'Typography').
And the same error from TextField
This is how I import Typograpgy:
import Typography from '#mui/material/Typography';
Other imports works fine, but not TextField and Typography
Does anyone know the solution for this problem? I am the only one in the group that gets this error
I have tried to import by using
import {Typography} from '#mui/material'
instead, but that doesn't work either
I remember that I got a similar issue using material ui, one default export cannot be found and I fixed it by deleting node_modules folder and run :
npm install

Do I need to import react in every file?

I've found out that components without import React from 'react'; lines works well.
I've added import React from 'react'; to the first line of .jsx files conventionally. And I saw many open source with this line.
Then why do we add this line unnecessarily?
You no longer need to import React from "react". Starting from the release 17 of React, JSX is automatically transformed without using React.createElement.However, other exports like hooks must be imported.
if you use a builder like esbuild, unfortunately you will need to import react in every file because it would be an error: Uncaught ReferenceError: React is not defined
but if you use the default builder you don't have to import react in each file

Import react-native libraries in Ionic-React Project

I just trying to work with react-native-svg in my ionic react project and I was able to make it successful with react-native-web. But then if I do import like
import {StyleSheet, View} from 'react-native';
it says
cannot find module react-native.
how can i solve this?

How can I use Wavesurfer.js plugins in a React Typescript App?

I am trying to use the Wavesurfer.js plugins in my React Typescript application. When I try to import the plugins, I keep getting "module not found: can't resolve" error. I'm guessing this has something to do with defining the types for the plugins. Does anyone know how I could use these plugins in React Typescript?
import React from "react";
import WaveSurfer from "wavesurfer.js";
import CursorPlugin from "wavesurfer.cursor.js";
Try
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';

Unable to import outlined svg icon component material-ui

I am using material icons in by react application.
I wanted to use circular check.
I could import and use the check_circle icon as follows
import CheckCircle from 'material-ui/svg-icons/action/check-circle';
There is another icon called circle_check_outline which I am unable to import by the normal import line
import CheckCircleOutline from 'material-ui/svg-icons/action/check-circle-outline';
It gives Can't resolve 'material-ui/svg-icons/action/check-circle-outline' error
I tried downloading the icon and render it as suggested in Marson Mao's answer to a similar question in stackoverflow
import SvgIcon from 'material-ui/SvgIcon';
import CheckCircleOutline from '../../assets/check-circle-outline.svg';
<SvgIcon>
{CheckCircleOutline}
</SvgIcon>
Then I got the following error
Uncaught TypeError: Cannot read property 'svgIcon' of undefined
at SvgIcon.render
I also tried Joey T 's answer in the same question. Installed #material/icons package using npm install #material-ui/icons#2.0.0-beta.1
and imported the icon as follows
import CheckCircleOutline from '#material/icons/CheckCircleOutline';
Still getting the error
Can't resolve '#material/icons/CheckCircleOutline'
I am using material-ui v0
The material-ui does not have check-circle-outline icon, hence it gives an error when importing. What you can do is get the latest icons from #material-ui/icons and then import them
Install the package by using the following command
npm install #material-ui/icons
Then import it,
import CheckCircleOutline from '#material-ui/icons/CheckCircleOutline';
Try this.
import CheckCircleoutline from '#material-ui/icons/CheckCircleOutline';
Use <CheckCircleoutline />

Resources