I have created a package with multiple components and exported it in it's index.js file. I am trying to
import those components and us it. as follows:
**package index.js**
export {default as F1Button } from './f1Button';
export {F1ButtonGroup} from './f1ButtonGroup';
export {F1Label} from './f1Label';
**Used it in New.js**
import { F1Button,F1ButtonGroup,F1Label } from 'package';
function App() {
return (
<div className="App">
<F1Button name='test' buttonText="hi"></F1Button>
<F1ButtonGroup symbols={symbols}></F1ButtonGroup>
<F1Label text="label"></F1Label>
</div>
);
}
Getting error as :
Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for
composite components) but got: undefined. You likely forgot to export your
component from the file
it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
How to export multiple components in index.js and import it our file?
Exporting a single component as default
export default sample
Exporting multiple components
export {
sample1,
sample2
}
Importing a default component (here its not required to import as the same name)
import Hello from './sample'
Importing Multiple components (you need to use the exact name of export)
import {sample1, sample2} from './sample'
Related
I am trying to make use of this guide to create a dropdown refinementlist instead of the default. I first created a Dropdown.js with contents form here
import React, { Component } from 'react';
import { connectRefinementList } from 'react-instantsearch/connectors';
import PropTypes from 'prop-types';
const cx = label => `ais-DropdownRefinementList-${label}`;
/// Rest of the code from the above link follows
export default connectRefinementList(DropdownRefinementList);
I then import it into my search.js component, which builds my interface like so:
import { DropdownRefinementList} from "./Dropdown"
And use it like so:
<DropdownRefinementList attribute="major" />
This gives me the following error:
×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `SearchGrid`.
SearchGrid is just my search component. The issue goes away when I remove <DropdownRefinementList attribute="major" />, so that has to be the problem.
Is there something wrong with my implementation? How can I fix this?
It should be import DropdownRefinementList from "./Dropdown"
This is because you're exporting default from your Dropdown.js file.
I am importing SVG's into my component and importing them as components using ReactComponent, for example
import { ReactComponent as D1 } from '../../../assets/images/characteristics/D1.svg';
When I run Jest/Enzyme to test the component, I get the following error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Does it appear that I need to mock this? How could I do that?
Although the solution pointed out by #skyboyer worked for me, it showed the following error in the console when running the tests:
<SvgrURL /> is using incorrect casing. Use PascalCase for React components,
or lowercase for HTML elements.
Changing to the following inside the mock file worked for me as a solution:
import React from 'react';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);
export const ReactComponent = SvgrMock;
export default SvgrMock;
reference
Earlier today, I tried running create-react-app, but I got an error about templates and how my version of React may be out of date. So I removed React globally and then reinstalled. I ran create-react-app again and it started working again.
I was trying to create an app afterwards but I keep getting the following message:
×
Error:
Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
object. You likely forgot to export your component from the file it's
defined in, or you might have mixed up default and named imports.
Check the render method of App.
I never got this message before while using React. Here is my code so far:
App.js
import React, { Component } from 'react';
import UserOutput from './Components/UserOutput';
import UserInput from './Components/UserInput'
class App extends Component {
render() {
return (
<div>
<UserInput />
<UserOutput username="Test" />
</div>
)
}
};
export default App;
UserOutput.js
import React from 'react';
function UserOutput(props) {
return <h1>this is my username: {props.username} </h1>;
}
export default UserOutput;
UserInput.js
import React from 'react';
function UserInput() {
return <input>Name</input>
};
export default UserInput;
I tried searching for a fix for my error, but could not find a solution. I believe I am importing everything correctly and it complies without error in my IDE, but I get the error in my browser.
In my App's React Component library, I have a UIC called Branch which has:
Brand.Logo
Brand.WordMark
Brand.WorkMarkLogo
Brand.Logo and Brand.WordMark work fine but Brand.WorkMarkLogo outputs the following error in storybook:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Please see here: https://codesandbox.io/s/hmfnu
What am I doing wrong?
In the export default pattern, curly braces are not used.
import {Brand} from "./Brand";
correct code.
import Brand from "./Brand";
Only in the 'export' pattern, curly braces are used.
export const abc = () => {};
import {abc} from '...';
When you import and wrap them in curly braces, you're importing a named export, not a default export.
In your brand/index.js file, you have on line 10:
export default Brand;
To import a default export in the module, you'll have to omit the curly braces.
So in your root/index.js file, change line 3 to
import Brand from "./Brand";
Alternatively, you can choose to NOT export a default in your brand/index.js file, and change put the export in front of your class like this:
export class Brand extends React.Component {
static Logo = Logo;
static LogoWordMark = LogoWordMark;
}
With this method, you can add additional classes like in the same brand/index.js file by adding :
export class Brand2 extends React.Component {
static Logo2 = Logo2;
static LogoWordMark2 = LogoWordMark2;
}
Then you'll be able to import both named exports like: https://codesandbox.io/s/react-example-955rf
I'm new to reactjs and I'm using it in an electron project. I have component A and B defined in a.jsx and b.jsx separately using the following syntax:
//a.jsx
'use babel';
import React from 'react';
export class A extends React.Component {
render() {
return (
<div>some text</div>
);
}
}
//b.jsx
'use babel';
import React from 'react';
export class B extends React.Component {
render() {
return (
<div>
<A />
</div>
);
}
}
and I render them in the html page:
<!-- index.html -->
<script>
var a = require('./a.jsx');
var b = require('./b.jsx');
React.render(React.createElement(b.B, null), document.body);
</script>
How could I reference component A from component B(e.g. using the A tag in render function of B as illustrated in b.jsx above)? I've tried adding:
import A from './a.jsx'
but got the error:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `B`.
What is the right way to do it?
The code above can run without error if the reference of component A is removed in b.jsx.
It's a good idea to stay away from mixing the new module syntax (import, export) with the old commonjs style (require, module.exports).
If your file exports just one component, then you can use a default export.
// a.jsx
import React from 'react';
export default class B extends React.Component {
}
Then you can reference the class using the import syntax in your main file.
import B from './b.jsx';
This is basically shorthand for assigning the default export from this module to a new variable B.
Alternatively, you can have named exports for modules that export multiple values. This is actually what you had before.
export class A extends React.Component {
}
This creates a named export called A that can be referenced from other files with a destructuring import.
import { A } from './a.jsx';
If your file only exports one value it's probably a good idea to stick to default exports.