i have shared components folder when i created some components and i want to export all of them to index.js file and then export all of them from that file. thats how it looks from one of the components file:
export default ToggleSwitch;
now in the index file i try to export them again, it looks like this:
export { default as ToggleSwitch } from './ToggleSwitch';
export { default as Input } from './TextField';
export { default as Button } from './Button';
when i try to import one of the components if i import like this:
import Button from '../../shared/components';
i get this error saying that '../../shared/components' does not contain a default export
and when i try to import it like this,
import { Button } from '../../shared/components';
i get error saying Button is not exported from '../../shared/components'.
what am i doing wrong here?
Have you tried importing as import { Button } from 'shared/components';?
For reference, the current codebase I work with has a similar structure for stores (flux stores) and this pattern works.
An example from the codebase: import { ClickStore } from 'stores';.
Related
export default withModalMounter(injectIntl(Poll));
I want to extract Poll while importing it in a different component. It looks that that while importing I am just able to import withModalMounter component and not the methods of Poll.
Since you want to import Poll component without withModalMounter too. You can export it like below
const withInjectIntl = injectIntl(Poll);
export { withInjectIntl as Poll };
export default withModalMounter(withInjectIntl);
Post this you can import it like
import PollWithMounter, { Poll } from 'path/to/poll';
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 just started using nuxt for vue. I added a component in the /components folder and I am trying to use it in one of my pages.
Unfortunately, I get this warning, upon compilation:
"export 'AddPlaceModal' was not found in '~/components/AddPlaceModal.vue'
I am trying to use it via:
<script>
import {mapActions, mapGetters} from 'vuex';
import {AddPlaceModal} from '~/components/AddPlaceModal.vue';
export default {
components: {
'add-place-modal': AddPlaceModal
},
...
The component itself looks like:
<script>
export default {
data() {
googleLocation: null;
},
...
Any ideas why this may be?
You need to import from default export, not a named export
import AddPlaceModal from '~/components/AddPlaceModal.vue';
you have to remove the curly brackets
do this:
instead of:
Preface
I'm using create-react-app to generate an application.
Problem
TodoList === undefined
Code
components/index.js
export { default as App } from './App/App.js';
export { default as TodoList } from './TodoList/TodoList.js';
containers/index.js
export { default as VisibleTodoList } from './VisibleTodoList.js';
components/App/App.js
import { VisibleTodoList } from '../../containers/index.js';
containers/VisibleTodoList.js
import { TodoList } from '../components/index.js';
components/TodoList/TodoList.js
export default function TodoList({ todos, onTodoClick }) { ... }
TodoList is now undefined. I believe it may have something to do with the fact that I have some sort of circular issue.
The thing is, if inside containers/VisibleTodoList.js I import using the following method, everything works fine.
import TodoList from '../components/TodoList/TodoList.js';
What is so special that breaks the import, if I try to import using a 'middleman' (the components/index.js file).
Full code
I have created a CodeSandbox that contains my full code, as it stands in my application. The application is pretty simplistic, but more complicated than I have outlined here.
https://codesandbox.io/s/m54nql1ky9
The problem is caused by the order of exports in your components/index.js file.
export { default as App } from './App/App.js';
export { default as TodoList } from './TodoList/TodoList.js';
Since App.js imports VisibleTodoList which needs to import TodoList and pass it to the redux connect function before it can export itself, you end up with a conflict.
I'm not sure if this is a implementation quirk of babel, or if this is a logical result from how the ES import spec is defined.
In any case, changing the order of exports fixes the bug.
export { default as TodoList } from './TodoList/TodoList.js';
export { default as App } from './App/App.js';
As a rule of thumb, if you can't refactor your files to avoid the import loop, you should put the outer layer component last in the list, since it might rely on imports higher up in the list.
Full working codesandbox here: https://codesandbox.io/s/74mlwnwyy1
I have a Vue 2 project, and I've written a simple function for translating months in dates, which I would like to import in one of my components, but I'm getting an error:
export 'default' (imported as 'translateDate') was not found in '#/utils/date-translation'
The relative file path from the src folder is correct, and I am exporting the function like this:
export function translateDate(date) {
// my code
}
And then I am importing it in the component like this:
import translateDate from '#/utils/date-translation'
What am I doing wrong?
You have to specify default explicitly:
export default function translateDate(date) {
..
}
Either specify default as mentioned above, or if you're trying to export multiple items from the same file you need to import them with curly brackets.
So you would have:
export function doWork(){}
export const myVariable = true;
And then you'd import them in a separate file as:
import { doWork, myVariable} from "./myES6Module"
In my case I had to remove '{' and '}' arround the imported component :
import { CustomComponent } from './CustomComponent';
with
import CustomComponent from './CustomComponent';
Maybe you have two files with the same name.For example, "test.vue" and "test.js"
You need to set symlink setting in vue.config.js
config.resolve.symlinks(false);
Rather than using
export function translateDate(date) {
// my code
}
use
function translateDate(date){
//code
}
export default translateDate;
it worked for me...