How can I bundle react-components, defined in jsx-files, in an index.js file?
In a way that the components can be accessed by import module from "/module"; let C = module.Component;.
With:
/module
index.js
Component.jsx
To re-export the component as a default export:
export { default } from './Component';
To re-export the component as a named export:
export { default as NamedComponent } from './Component';
You should prefer exporting as default from index.js since it will likely be the only export from the index.
Your component import will look like this:
import Component from './module';
or this, if you use a named export:
import { NamedComponent } from './module';
Assuming you're using webpack to bundle your files, to make sure your imports can use './Component' instead of './Component.jsx', include .jsx as an extension in your resolve property in webpack.config.js:
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
},
};
export Component from "./Component"
You should not use export default for your use case. There is only a single default export per module. This value is to be considered as the "main" exported value since it will be the simplest to import. Refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export for more detail
Inside index.js
export { default as ComponentName } from './Component';
Then In App.js [Import it Like this]
import {ComponentName} from './module'
Related
i have following file structure
.components
.coma
app.js
i have tried
import myname form "./app.js"
and also
import myname form ".//app.js" in compa
Check out this codesandbox link
There are two ways that you can export a function, component, etc:
Default exports:
To export:
export default function Component() {
return <div></div>;
}
To import
import Component from './Component';
Named exports:
To export:
export function Component() {
return <div>Component</div>;
}
To import
import { Component } from './Component';
See this link for more information about exporting components in React
EDIT:
You can declare your components and functions and export them in another line.
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 try to simplify my Components import, from:
import Component1 from './components/Component1'
import Component2 from './components/Component2'
To something like that:
import {Component1, Component2} from './components/'
I have tried to create an index.js file into components directory (following this post import modules from files in directory):
export * from 'Component1';
export * from 'Component2';
But I still have a "Module not found" error.
Any clue ?
Thanks,
Orb
You need to add a dot to indicate it is a local file, not an npm-published module. Change your exports line like so
export * from './Component1';
UPD
To resolve next issue with named import you need to give a name to default export from Component1.js file
export Component1 from './Component1';
Follow this answer
Are you sure the path is correct?
Try to specify the absolute path like:
import Component1 from '/home/your_username/components/Component1'
import Component2 from '/home/your_username/components/Component2'
You can see the correct path of your directory from terminal with the command "pwd".
Be sure to have the access to the directory and file.
You can try to run the program as root.
While exporting components from your Component1 and Component2 instead of *, you should export it as objects -
//In Component1.js(x)
export { Component1 };
and
//In Component2.js(x)
export { Component2 };
With this you should be able to import like:
import { Component1 } from '...';
import { Component2 } from '...';
Yeah I do the same thing with my imports and it's a lot nicer when they are being exported from the same file. Here's an example of how I achieve this:
components/index.js
import Component1 from './Component1';
import Component2 from './Component2';
module.exports = {
Component1,
Component2
};
Then to import them
import { Component1, Component2 } from './components';
If you are using Webpack, check out webpack resolve to get rid of your relative paths.
Example using Webpack resolve
//Will work at any nested level
import { Component1, Component2 } from 'components';
And just for clarification, Component1 and Component2 should be using a default export
export default class Component1 extends React.Component {...}
or
var Component1 = createReactClass({...});
module.exports = Component1;
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'
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.