I have a file call common.js where I want to collect component that I installed via npm.
I do this
import 'dropdown-group/style.css' // this is ok
export 'dropdown-group'
it doesn't work? I tried this too
import 'dropdown-group/style.css'
import dropdown_group from 'dropdown-group'
export dropdown_group
You need to first import the component and then export it.
import DropdownGroup from 'dropdown-group';
export DropdownGroup;
I am not sure what is importable from your component, whether it has default export for DropdownGroup or as object {DropdownGroup}. Please check this with your installed plugin.
Related
Im totally new in Ts so, i was wondering if I can import all classes i have into one ts file then export it from there, so whenever i want any class i can import it directly from this file
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export default { Login, MyAccount,Settings, DataProvider};
Yes, You can do it. But there can be atmost one default export in a file. So, you can have it or not, its optional.
So, for example :
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export default DataProvider;
export { MyAccount,Settings, DataProvider} ;
or
import Login from "./Login/login_page";
import MyAccount from "./AccountSettings/myAccount_page";
import Settings from "./AccountSettings/settings_page";
import DataProvider from "../utils/data-provider/data-provider";
export {DataProvider, MyAccount,Settings, DataProvider} ;
When I run my react app, the console said
Failed to compile.
./src/components/login/index.js
Attempted import error: 'Login' is not exported from './login'.
Here is the folder structure:
├── index.js
├── login.js
└── register.js
index.js file:
export { Login } from "./login";
export { Register } from "./register";
login.js file:
import React from "react";
import ReactDOM from 'react-dom';
import loginImg from "../../login.svg";
class Login extends React.Component {
constructor(props){
super(props);
}
render() {
return(
// correct code
)
}
}
export default Login;
At first, I thought it was due to typo or sth like that, but I checked the spelling and syntax and still confused by the error. Really want to get some help!
The problem is your Login component has default export. And you imported it as named export.
Your import statement must be
import Login from './login'
import { default as Login } from './login'
Or you should export your Login component as
export { Login }
You used export default but your index.js does not import the default export. Change to:
export { default as Login } from "./login";
export { default as Register } from "./register"
When you export anything as default then you have to import it as
import Login from "./login";
not
import { Login } from "./login";
if you are exporting multiple functions or components you can import like
import { Login } from "./login";
But in your case you are exporting a single component itself. So you can import like
import Login from "./login";
since Login is the only thing that is being exported from login.js.
i think you should remove {} over your component.
replace this:
import {Login} from "./login"
with this:
import Login from "./login"
If it happens when you use Jest to run tests, maybe this helps you:
In my case was because I started the command "npm run test" and later created a new JS file in a new folder (data/heroes.js), and it was not finding that new file, showing this error:
Cannot find module '../data/heroes' from 'src/base/08-imp-exp.js'
But VsCode editor detected imports and exports correctly, so I restarted the terminal instance that was running the tests, and it worked !
Restart the tests terminal !
I have a files like this:
components/carousel.js
import hammerjs from 'hammerjs';
import React from 'react';
export default () => <div>...</div>;
components/layout.js
import React from 'react';
export default () => <div>...</div>;
components/index.js
export { default as Carousel } from './carousel';
export { default as Layout } from './layout';
Now in my server side rendered app I import layout like so:
import { Layout } from './components';
I get an error about window not being defined, because it's reading through components/index.js and seeing hammerjs dependency inside the Carousel export, which requires window and isn't available on the server.
Why is it reading the code in the Carousel component when I'm only trying to import the Layout component? How do I avoid this happening?
In short - why is it reading the Carousel component?
You are exporting two defaults in your components/index.js which is not a supported operation. Export the named components individually or one default objet that holds both.
1) From MDN on import/exports - You can have multiple named exports per module but only one default export. link
In your components index file you're exporting both as default - export the named variable. Then import the named variable.
2) The HammerJS dependency shouldn't matter. Your react code will be run through some sort of transpiler that will take the node modules and turn them into something the browser can understand.
My code is organised as follows:
where,
Resources/ActionLog/Components/Layout.js
import React from 'react';
export default class Layout extends React.Component {
render() {
return (
<p>Test</p>
);
}
}
Resources/ActionLog/Components/index.js
export * from './Layout';
Resources/ActionLog/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './Components'; // <--- ISSUE HERE.
const app = document.getElementById('app');
ReactDOM.render(
<Layout/>,
app
);
Why does Layout not get imported using this setup??
If i change the line to read,
import Layout from './Components/Layout';
it works fine, but otherwise Layout is always undefined! Even when if i try,
import Layout from './Components/index';
I am using webpack as my module bundler, and have achieved something similar before, I just don't see why/how this is different..
Why does Layout not get imported using this setup??
Layout.js has a default export. However, export * from './Layout.js will only export the named exports (of which there are none). In other words, Components/Layout.js doesn't have any exports at all, so nothing can be imported.
But even if it did have named exports, import Layout from './Components/index'; imports the default export, but Components/index.js doesn't have a default export.
There are a couple of ways this could be solved. The one that makes the most sense is probably to export the default export of Layout.js as named export in Components/index.js. You will presumably have multiple files each exporting a component. I assume Components/index.js should export a map of all these components in which case you have to use named exports.
The changes you have to make:
// in Components/index.js
export {default as Layout} from './Layout';
// in ActionLog/index.js
import {Layout} from './Components'; // use a named import
In ES6, is it possible to shorten the following code. I have an App.js file and an index.js.
index.js
import App from './App';
export default App;
Something like this
index.js
export default App from './App.js'
If you use proposal-export-default-from Babel plugin (which is a part of stage-1 preset), you'll be able to re-export default using the following code:
export default from "./App.js"
For more information see the ECMAScript proposal.
Another way (without this plugin) is:
export { default as App } from "./App.js"
The above is a very common practice when separate files, each with its own export, have all something in common, for example, utils, so if, for example, one would want to import 3 utility functions, instead of having to write multiple imports:
import util_a from 'utils/util_a'
import util_b from 'utils/util_b'
import util_c from 'utils/util_c'
One could import any of the utilities in a single-line:
import { util_a, util_b , util_c } from 'utils'
By creating an index.js file in the /utils folder and import all the defaults of all the utilities there and re-export, so the index file will serve as the "gateway" for all imports related to that folder.
This is a bit of repetition from the previous answers, but to clarify the difference in two options:
1. Default export
(This appears to be what OP wants)
// index.ts
export { default } from './App'
Then, in a different file:
import App from './index'
2. Named export
export { default as App } from './App'
Then, in another file:
import { App } from './index'
Bonus: named → default export
If ./App uses a named export, but you want to re-export it as a default export, you can do that too:
export { App as default } from './App'
Then, in another file:
import App from './index'
These will work with react as vsync's answer states.
Bonus #2: export everything
Say you have a file that exports multiple items:
// App.ts
export const first = 1
export const second = 2
const final = 3
export default final
You can then re-export them directly:
// index.ts
export * from './App'
You can now import these easily:
import final, { first, second } from './index'
Bonus #3: * import
You can import all variables exported by another file as a single variable.
// index.ts
import * as App from './App'
App.first === 1 // true
import App from './App';
export default App;
⬇
Babel 7 (with #babel/preset-react) can transform the below:
export { default as App } from './App.js';
Related discussions:
TC39 proposal:
https://github.com/tc39/proposal-export-default-from#common-concerns
The only working solution is :
import App from './App';
export default App;
If you export your module like this
export { default as App } from './App.js';
Then it's not a default export anymore and you'll get an error if you try to import it as a default import.
import App from './App';
export default (App);
This work for me in default 'create-react-app' application