In the MDN docs they use export default class {} and importing it with:
import Whatever from './myFile'
should work.
This is not working in my case, because I export my class like this:
export default class LoginForm extends Component { }
And import it like this:
import LoginForm from './user/LoginForm';
Resulting in the following error:
123:30-39 './components/user/LoginForm' does not contain an export named 'LoginForm'.
When i add export default LoginForm at the end of my LoginForm file it works, but this feels unneccessary.
Why does it complain about a name anyways if it is a default export?
Thanks in advance,
Mike
When i add export default LoginForm at the end of my LoginForm file it works, but this feels unneccessary.
It might seem unneccessary, but this is a convention that you will often see.
I guess you are creating a React Component here, keep in mind, that you often have HoC (higher order components) that need to wrap your component export.
Here is an example:
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
Therefore it makes sense, to put exports at the end of your file.
Note: I could not reproduce your error, when I exported a component like this:
export default class App extends Component { ... }
This worked for me.
Related
Can someone explain the differences between export default Example; , export { default } Example;, and export default class Example extends Component {};
I've seen all 3 used in examples online. I've run into issues using export default class Example extends Component {} where react says that I can only have 1 default export in a module.
Which one(s) do I avoid, are there advantages to using one over the other?
Let's look at an example class
export default class MyComponent extends React.Component {
...
}
Another example of the same component could be written as follows
export class MyComponent extends React.Component {
...
}
export default MyComponent
Finally, you could have more than one class available in a component file.
export MyComponent extends React.Component {
...
}
export MyComponent2 extends React.Component {
...
}
Now, when I import MyComponent using
import MyComponent from "../components/MyComponent"
The default class will be exported.
Now, if I want to export specific components from a file that has components combined. I can do the following:
import { MyComponent2 } from "../components/MyComponent"
The brackets allow you to import a single feature of the class/object/file that you are importing. Syntax aside momentarily, this is the behavior that the default keyword creates. This allows you to import only specific functionality from libraries and frameworks instead of having to import everything, which is what "default" usually implies.
This was already answered here:
Javascript (ES6), export const vs export default
What is the major benefit of writing
import React, { Component } from 'react';
class Link extends Component {
...
}
instead of
import React from 'react';
class Link extends React.Component {
...
}
when it comes to react 15.4.x??
In my perspective and in my case (correct me if I am wrong) it does not matter at all since:
I am using a webpack2 for making my bundles;
I use code splitting to split my app code from vendor code;
I use webpack.optimize.CommonsChunkPlugin plugin with minChunks: Infinity setting to make sure that all vendor code is included only once.
From understanding how ES6 imports work I understand that by using named import of {Component} I state that I want to use only Component component in my code, which looks.. cleaner.
But since whole React package is still used in the app, I can create my classes with extension from React.Component instead of just Component and in result webpack will still produce the same amount of code and my bundle size will be the same in both cases.
Am I correct?
There is no difference, React.Component is the same object as Component, the second way is more eloquent in my opinion, because it really explains that you are using the Component object from the React library.
The first one seems to refer a member,
but, it comes from the pre modules era of javascript, where everything had to be attached to the exported global namespace (just to avoid global namespace pollution).
something that could be under the hood:
// this should be assumed as an example only.
class React { ... }
class Component { ... }
React.Component = Component;
// ES6
export {Component}
export default React;
// ES5
window.React = React;
Note: as someone said, you also need to import React because JSX needs to have it on scope, but, if you want to avoid it, you can expose React globally (window.React = React)
This import statement:
import React, { Component } from 'react';
is really doing two things. It imports the default export, under the name React (which is just a convention, you could call it what you want). It also imports a named export, Component.
The reason that the default React is imported is actually to make JSX work. When your JSX code is transpiled, then it substitutes <div> for React.DOM.div(), so React must exist otherwise things break!
Importing both things separately means that your JSX works but you get to write Component instead of React.Component in your code.
When you do import anything from "react", then the whole file is going to get included either way - any attempt to reduce the bundle size (e.g. Dead Code Elimination, Tree Shaking) is an additional, separate step, which doesn't depend on your import statements but the parts of the code that you use.
In the case of this library, the sane thing happens: the child Component of the default export refers to the same thing as the named export Component.
However, bear in mind that this isn't guaranteed to be the case! If the React library code contained the following:
export default {
Component: "foo"
};
export const Component = "bar";
Then React.Component === "foo" and Component === "bar".
I was working with create-react-app and came across this issue where I get an error:
Home does not contain an export named Home.
Here's how I set up my App.js file:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'
class App extends Component {
render() {
return (
<div className="App">
Hello
<Home />
</div>
)
}
}
export default App;
Now in my layouts folder I have the Home.js file, which is setup like following:
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<p className="App-intro">
Hello Man
</p>
)
}
}
export default Home;
As you can see, I am exporting the Home component. But I get an error in my console saying this:
What is going on?
The error is telling you that you are importing incorrectly. Here's the code you have to add:
import { Home } from './layouts/Home';
This is incorrect because you're exporting as the default export, not as a named export. Check this line:
export default Home;
You're exporting as default, not as a name. Thus, import Home like this:
import Home from './layouts/Home';
Notice there are no curly brackets. Further reading on import and export.
Use
import Home from './layouts/Home'
rather than
import { Home } from './layouts/Home'
Remove {} from Home
This is a case where you mixed up default exports and named exports.
When dealing with the named exports, if you try to import them you should use curly braces as below,
import { Home } from './layouts/Home'; // if the Home is a named export
In your case the Home was exported as a default one. This is the one that will get imported from the module, when you don’t specify a certain name of a certain piece of code. When you import, and omit the curly braces, it will look for the default export in the module you’re importing from. So your import should be,
import Home from './layouts/Home'; // if the Home is a default export
Some references to look :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
https://medium.com/#trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0
I just ran into this error message (after upgrading to nextjs 9 some transpiled imports started giving this error). I managed to fix them using syntax like this:
import * as Home from './layouts/Home';
We also can use
import { Home } from './layouts/Home';
using export keyword before class keyword.
export class Home extends React.Component{
render(){
........
}
}
For default
import Home from './layouts/Home';
Default export class
export default class Home extends React.Component{
render(){
........
}
}
Both case don't need to write
export default Home;
after class.
put export { Home }; at the end of the Home.js file
Crazy as it may sound, i spent almost an hour to resolve a similar issue, restarted the localhost and it picked up by itself. Ridiculous but something restart fixes everything.
For me component in question was logout.
I imported like :
import {Logout} from './components';
with this define dint he Logout component
export default Logout
You can use two ways to resolve this problem, first way that i think it as best way is replace importing segment of your code with bellow one:
import Home from './layouts/Home'
or export your component without default which is called named export like this
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export {Home};
This is the solution:
Go to your file Home.js
Make sure you export your file like this in the end of the file:
export default Home;
I'm studying React-Redux and I have an example like this
const todoApp = combineReducers({
todos,
visibilityFilter
})
export default todoApp /*from reducers*/
then I have
import reducer from './reducers'
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
So, it didn't export anything as reducer in ./reducers, and the syntax import is not either import * as reducer in ES6. Why does it work ?
export default todoApp
So when the import reducer from './reducers' is called the todoApp is stored inside reducer. Thats why we use the default keyword. The variable name doesn't need to be reducer it can be anything.
By using default keyword a single value or a fallback value is passed to the file that imports it
Similarly if we exported a function without default
eg
export function someFunc(){...}
We can import it by
import {someFunc} from '/file/path.js'
EDIT : There can only be one default export from a file. When we import other components we need to specify the component name as identifier(eg {someFunc}). For default imports we can use any identifier we want.
Read more about import here
export default todoApp
So whenever you "'import xyz from './reducers'" ,reducer.js will return
todoApp beacuse by default reducer.js is returning it. No matter what
name you give ,you can change 'import reducers from "./reducers"' to
'import red from ./reducers' it will work in that case also .
only one thing you should keep in mind ,that whenever importing
default element you should avoid applying '{}' around the imported
element . so in your case "import {reducer} from './reducer'" would
be wrong.
But if you write "export const todoApp" in reducers.js ,then in that
case you have to give exact name while importing it, now you have to
import it as 'import {todoApp} from './reducers'
And There should be only one default export from a file.
When you export something as default from a module, you basically exporting an anonymous variable. So when you import anything like this import something from 'somewhere' the something can be any name you choose to use inside the file that does the import.
I need some help looking for where to start with this error I'm getting. Nimbus is the name of my app but I'm not sure what it means when it says check the render method of 'Nimbus'. Which render method? I have a functional component at app/index.js called Nimbus but obviously that doesn't render anything just returns a component.
I've checked similar error messages for RN on here and most people are just forgetting to export a component properly but I've checked my components and all are being exported correctly from what I can tell. The repo is below if you want to take a look at my project structure, etc. There are only a few files right now. Sorry I can't provide more information that's all I've got right now.
https://github.com/MaxwellGover/Nimbus
Because the AppContainer is a default export:
export default class AppContainer ...
And you proxy it from the containers/index.js like this:
export { AppContainer } from './App/AppContainer'
This tries to import a named export called AppContainer. Instead, you'll need to import the default export explicitly:
export { default as AppContainer } from './App/AppContainer'
in your index.js you need to import component.
change following.
import { NimbusNavigator } from './Navigator/NimbusNavigator'
import { SplashContainer } from './Splash/SplashContainer'
import { AppContainer } from './App/AppContainer'