React package but no named import showing - reactjs

I am creating a react component package.
I am exporting the components in a index.js file which is compiled to a index.min.js file once i build it using rollup.
But the problem is once i install the package and tried to import, vs code is not showing me the named imports as in import {A} from 'a-package'
What's i am missing?
EDIT
import React from 'react'
import a from './components/A'
import b from './components/B'
export const A = (props) => return (<a {...props} />)
export const B = (props) => return (<b {...props} />)

I solved the issue,
the issue was, since i was using rollup as a package and using the output format as umd rather than cjs
Now when i changed the format the problem is solved

Related

react: export {ModuleName} was not found (module has no exports)

React CRA sometimes can not find react tsx modules.
React version: 18.2.0
Node version: 19.2.0
I've tried to lower Node version. I've tried change export from export * from './ModuleName to export {ModuleName} from './ModuleName and change import from something like import {ModuleName} from ./ModuleName to import {ModuleName} from ./ModuleName/ModuleName. Sometime it helps, sometimes not.
All components written in next pattern:
type ModuleNameProps = {/* some props *.};
export const ModuleName = ({/* props */}: ModuleNameProps): JSX.Element => { /* Component body */};
export * from './ModuleName';
P.S. Application still works with such errors and other developers on a project don't have such errors
P.P.S. Such errors seem to occur only when path to component contains repetitions. For example: './ComponentName/ComponentName/ComponentName.tsx'

TypeError: Object(...) is not a function in React when importing JSS file using material UI

I am trying to import my jss file to React component (.jsx) and I have this error :
I looked through related questions and I tried all solutions, mostly about updating versions of material-ui. Here is my package.json file:
the way I write jss file :
import { makeStyles } from '#material-ui/styles';
const useStyles = makeStyles((theme) => ({
root:
{
margin: '10px'
}
}));
export default useStyles;
And jsx file :
import React from 'react';
import DateBar from './DateBar';
import Grid from '#material-ui/core/Grid';
import useStyles from './Board.jss';
export default function Board()
{
const classes = useStyles();
return(
...
Am I missing something or Do I need additional packages for using jsx and jss in React?
I have been trying all the solutions but didn't work..
Note: When I put the code inside of Jss into Jsx file, code works fine. Importing/Exporting might be an issue..
Edit: Still couldn't fix even though I created a new app and installed dependancies from the beginning..

How to integrate recoil library with react-native?

I'm trying the new state management library from facebook recoil, I tried the Getting started example on a reactjs project and it worked perfectly. After that I tried recoil on a react-native project but I got an error:
Here's the code I've tried:
App.js
import React from 'react';
import {RecoilRoot} from 'recoil';
import RecoilTest from './RecoilTest';
const App = () => {
return (
<RecoilRoot>
<RecoilTest />
</RecoilRoot>
);
};
export default App;
RecoilTest.js
import React from 'react';
import {useRecoilState} from 'recoil';
import {View, Text} from 'react-native';
import {textState} from './Atoms';
const RecoilTest = () => {
const [text, setText] = useRecoilState(textState);
return (
<View>
<Text>{text}</Text>
</View>
);
};
export default RecoilTest;
Atoms.js
import {atom} from 'recoil';
export const textState = atom({
key: 'textState',
default: 'initial value',
});
Recoil don't has a fully support to react native yet
Towards release
See here
Hi everyone! FYI we've published a "nightly build" branch for testing purposes. If you want to try out recoil with react native before we release next version, try install the nightly branch with the "install git branch" feature of npm/yarn:
npm install https://github.com/facebookexperimental/Recoil.git#nightly
Or
yarn add https://github.com/facebookexperimental/Recoil.git#nightly
It is supported in nightly build. If you want to try before it is released with next version, you can install it doing:
yarn add https://github.com/facebookexperimental/Recoil.git#nightly
The update can be followed in this PR
Update:
RN support is now there in Recoil.js as Experimental.
https://github.com/facebookexperimental/Recoil/releases/tag/0.1.1
Try using 'useRecoilValue' instead in your RecoilTest.js file
const [text, setText] = useRecoilValue(textState);

TypeError: react__WEBPACK_IMPORTED_MODULE_6___default.a.lazy is not a function for react#16.5.2

I'm trying to use lazy loading for my create-react-app with react#16.5.2 and I did this :
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<Header />
</React.Fragment>
</BrowserRouter>
);
}
}
export default SomeFile;
Do you know why this error occurs ? is it because of my react version ? based on this everything seems fine!
Edit
What does this mean? based on reactjs.org :
Note:
React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.
React.lazy is only available from v16.6.0 https://reactjs.org/blog/2018/10/23/react-v-16-6.html
In your comand line interface, try updating React using the following command:
npm i react#latest
Restart Development Server, if you still face issue try the above steps:
Search for REACT_EDITOR on the Readme.md file, and insert =atom in front of it, like as follow:
REACT_EDITOR=atom
Then, save, restart the development server. It should work now

Loading SVG Files with TypeScript

I added react-svg-loader and tried to import an svg per the documentation, yet I keep running into "Can't find the module.."
import * as React from 'react';
import FlickrLoader from './FlickrLoader.svg';
// tslint:disable-next-line:variable-name
const Loader = props => (
<FlickrLoader className="center" />
);
export default Loader;
In the root folder, I have custom.d.ts which as declare module '*.svg';
Can anyone think of something that I may be missing as to why TypeScript won't pick up the .svg file in the same directory?

Resources