Hello i need to have a multiple export in react js but i have this error
Line 84:3: Parsing error: Only one default export allowed per module.
this is my code :
export default App;
export default dashboardRoutes;
What i should to do to resolve this problems please !
You can export only one default component and the other like this:
export default MostImportantComponent
// other components
export {
Component1,
Component2,
// ... etc
}
Notice that when you import the other components from other files you need to
import DefaultComponent from '...'
import { Component1, Component2 } from '...' // for other components
There are basically two types of exports.
1.Named Exports(Zero or more exports per module): This allows you to export multiple modules from a javascript file which is the case in your issue.
Solution to your case goes as follows
modules.js
export {
App,
DashboardRoutes
};
app.js
import {App,DashboardRoutes} from './modules.js'
You can equally change the names of those modules in the import file as follows
Default Exports(One per module): This allows you to export only one module, which is the reason it showed you the error you have. This gives you the advantage of using a name of your choice in the file you import it from.
modules.js page
const module1=()=>console.log('module1');
export default module1
app.js
The page that is using the modules
import MyModule from './modules.js'
You can read more about it here
you can use named export or one as default and other as named export.
Define functions
function sum(a, b) {
return a + b
}
function sub(a, b) {
return a - b
}
function mul(a, b) {
return a * b
}
Define export
export { sum, sub, mul }
Import functions you need
import { sum, sub } from 'myfile'
or all the functions
import * as myfunctions from 'myfile'
and call as
sum(1+1) or myfunctions.sum(1+1)
src: https://flaviocopes.com/how-to-export-multiple-functions-javascript/
Related
I found many files were exported like this, but I don't understand why these were exported this way.
Are there any advantages or reasons?
index.ts
export { default } from './Something'
Something.tsx
cosnt _Something= () => {
some codes....
}
cosnt Something = memo(_Something)
export default Something
These two tsx file exist same directory.
You're looking for default export and named exports.
in export default Something case, you can use it with import Something from 'path'. So you only want to export one thing. It can be used as a namespace also. It equals export { myFunction as default };
in export { Something } case, you can use it with import { Something } from 'path'. You can export many things with names. It increases the readability. For sure, you can also import { Something as Another} from 'path'.
These two appoarches are not conflict. But only one default can be assigned.
// index.ts
export default function Something(){
}
export const CONST_A = 'A'
export const CONST_B = 'B'
// use.ts
import { default as Something, CONST_A, CONST_B} from './index.ts'
Its just a pattern, instead of importing exact paths:
import Nav from 'components/Nav.react';
import Tooltip from 'components/Tooltip.react';
Sometimes you want a merge:
import { Nav, Tooltip } from 'components';
It requires exports from index file located at the target folder ('components' in this case):
// src/components/index.ts
export * from './Nav.react';
export * from './Tooltip.react';
// Or
export { Nav } from './Nav.react'; // Has a named export
export { default as Tooltip } from './Tooltip.react'; // Has default export
See more context in other question How to intellisense alias module path in VSCode.
I can see there are two different ways to import:
import React from 'react'
import { render } from 'react-dom'
The second one has brackets. What is the difference between the two? And when should I add brackets?
Well, the difference between whether you should import your components within brackets or without it lies in the way you export it.
There are two types of exports
Default Export
Named Export
A component can have one default export and zero or more named exports.
If a component is a default export then you need to import it without brackets.
E.g.,
export default App;
The import it as
import App from './path/to/App';
A named export could be like
export const A = 25;
or
export {MyComponent};
Then you can import it as
import {A} from './path/to/A';
or
import {A as SomeName} from './path/to/A';
If your component has one default export and few named exports, you can even mix them together while importing
import App, {A as SomeName} from './path/to/file';
Similarly in case of react and react-dom, React and ReactDOM are default exports respectively whereas, for instance Component is a named export in react and render is a named export in react-dom. That's the reason you can either do
import ReactDOM from 'react-dom';
and then use
ReactDOM.render()
or use it like mentioned in your question.
First of all, a big thank you to all the other answers.
Here is a summary of all the above, in one answer.
Context with examples
import React from 'react'; // Importing without braces
import { render } from 'react-dom'; // Importing with braces
To be able to understand import, it's important to firstly understand export and its types.
Types of exports
There are mainly two types of exports, 'default' and 'named'. Whether to use braces or not, depends entirely on which type of exported variable is being imported.
So, the short answer is that variables exported as default, do not need braces, but named variables do need to be imported with braces.
Now, let's look at some practical examples of how to import and export both types.
Default: How to export and import
exporting
// Module1.js
export default App;
// Module2.js
export default myVariable;
// Module3.js
export default myFunction;
// Please note that there can only be one default export per module!
importing
import App from './Module1'
import AppRenamed from './Module1'
import myVariable from, './Module2'
import myFunction from './Module3'
// Please note that default modules can be renamed when importing
// ... and they will still work!
Named: How to export and import
exporting
export const A = 42
export const myA = 43
export const Something = 44
export { cube, foo, graph };
// Note how there can be several named exports per module
// exported in groups or individually
importing
import { A, myA } from './my-module.js';
import { Something as aRenamedVar } from './my-module.js';
import { cube } from './my-module.js';
import { foo, graph } from './my-module.js';
// Likewise, named exports can be imported in groups or individually
Other notes
let's revisit the very first example we saw above
import React from 'react'
import { render } from 'react-dom'
please note that although, React doesn't use braces, and render does, render is actually a part of react-dom.
therefore it is also possible to import the entire default react-dom
without braces and then use render
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render()
Consider primitives.js,
export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;
It can be imported like this,
import sum, { sub, sqr } from './primitives';
In this case, sum is called a "Default Export" and a module may contain a single "Default Export" only.
sub and sqr are called "Named Export" and a module may contain multiple named exports.
Curly braces are used to import single(specific) property, whereas the word without braces is import entire object form that file.
For example,
import React, { Component } from 'react';
Here the word React represents to import entire object from the file 'react'.
{Component} means we specify to import the particular property from the file.
There isn't any need to add brackets if you are exporting as default. You can have only default in the module.
Case 1:
export default function(num1, num2) {
return num1 + num2; }
Case 2:
function sum(num1, num2) {
return num1 + num2; }
export { sum as default };
Case 3:
function sum(num1, num2) {
return num1 + num2; }
export default sum;
You can import the default
import sum from "./test.js";
console.log(sum(1, 2));
I'm new to the ES6 module system so this may sound silly.
In the React Native Starter App that uses NativeBase, can anyone explain how native-starter-kit/js/components/home/index.js can do
import myTheme from '../../themes/base-theme`;
when the file it is importing from, native-starter-kit/js/themes/base-theme.js did not have any code that export default the variable myTheme?
The 2nd file you are refering to is an entire export default.
On line 5 :
export default {
// Badge
badgeBg: '#ED1727',
badgeColor: '#fff',
...
}
So when they do import myTheme from '../../themes/base-theme; the myTheme is the variable name they chose for the imported module. In this case, the transpiler is going to look for the default export.
If they would have done import { myTheme } from '../../themes/base-theme; then there would have been an issue since it is not explicitly named in the export. Doing this is not refering to the default export but rather the one explicitly called myTheme
I am not sure I made sense, you may want to give https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import a read
Exporting without default means it's a named export.
You can have multiple named exports in a single file.
Example 1:
export class Theme {}
Here you have to import this export using its exact name.
To use this component in other file you should do this,
import { Theme } from '../../themes/base-theme'
Example 2:
If you export as the default export as,
export default class Theme {}
Then in another file you import the default export without using the { }, like this,
import Theme from '../../themes/base-theme'
There can only be one default export per file.
Although its React's convention to export one component from a file, and to export it is as the default export.
You're free to rename the default export as you import it.
import myTheme from '../../themes/base-theme'
Trying to do something I would think would be very simple. I would like to import an existing JavaScript library and then call it's functions. So for example I would like to import blah.js and then call blah().
import React from 'react';
import {blah} from 'blah/js/blah.js';
class MyClass extends React.Component {
constructor() {
super();
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize() {
blah.blah();
}
render() {
....
}
}
export default MyClass;
Just wondering what magical combination of things I have to do to make this work. Maybe I'm just missing the point. The example gives the error "TypeError: _blah.blah is undefined".
Named exports:
Let's say you create a file called utils.js, with utility functions that you want to make available for other modules (e.g. a React component). Then you would make each function a named export:
export function add(x, y) {
return x + y
}
export function mutiply(x, y) {
return x * y
}
Assuming that utils.js is located in the same directory as your React component, you can use its exports like this:
import { add, multiply } from './utils.js';
...
add(2, 3) // Can be called wherever in your component, and would return 5.
Or if you prefer, place the entire module's contents under a common namespace:
import * as utils from './utils.js';
...
utils.multiply(2,3)
Default exports:
If you on the other hand have a module that only does one thing (could be a React class, a normal function, a constant, or anything else) and want to make that thing available to others, you can use a default export. Let's say we have a file log.js, with only one function that logs out whatever argument it's called with:
export default function log(message) {
console.log(message);
}
This can now be used like this:
import log from './log.js';
...
log('test') // Would print 'test' in the console.
You don't have to call it log when you import it, you could actually call it whatever you want:
import logToConsole from './log.js';
...
logToConsole('test') // Would also print 'test' in the console.
Combined:
A module can have both a default export (max 1), and named exports (imported either one by one, or using * with an alias). React actually has this, consider:
import React, { Component, PropTypes } from 'react';
import * as utils from './utils.js';
If you do the above, you will be able to use functions in utils.js as
utils.someFunction()
Check out the working code here :
Link to the Netlify React App using Javascript :
https://paint0183.netlify.app/
Source Code of Microsoft Paint Clone:
Github Source Code
Faced the same problem but the answer was simple
why not import directly?
import {file-name} from "./file-path";
For example :
import {jscolor} from "./jscolor";
The only thing which you need to add to make sure the javascript loads after the DOM has loaded :
window.onload=function() {
// your entire javascript code here
}
I'm using babel / ES6 with webpack. I'm importing the same 'actions' file - which exports a bunch functions - in two different places. At one place it returns a module, the other undefined:
actions.js
export function test() { ... }
export function test2() { ... }
App.js
import actions from './actions'
class App extends React.Component { ... }
console.log(actions); //<-------- Object{test:function,test2:function)
export default connect((state) => { ... },actions)(App);
edit
the reason App.js worked was because it was actually using import * as actions as sugested below, I just retyped it wrong in the example
NestedComponent.js
import actions from './actions'
class NestedComponent extends OtherComponent { ... }
console.log(actions); //<-------- logs undefined
export default connect((state) => { ... },actions)(NestedComponent);
Is this related to the order in which webpack defines the modules/files?
I ran into a similar issue, caused by circular dependencies. Tried to import a constant in file 'A' from file 'B' which in turn tried to import from file 'A'.
This shouldn't work in either case because you are importing the wrong values. import foo from '...' imports the default export of the module, but you don't have a default export, you only have named exports.
What you should use is
import {test, test2} from './actions';
// or
import * as actions from './actions';
Another common case where this happens is if you're testing with Jest and auto-mocking behavior is enabled. Much grief, such gotcha.