i want to create a dashboard as a component. but i always get this error in my cmd
"export 'default' (imported as 'DashboardLayoutComponent') was not found in '#syncfusion/ej2-vue-layouts'
does anyone know how i can fix this issue?
According to the docs, it appears DashboardLayoutComponent is a named export, thus you must import it as such:
import { DashboardLayoutPlugin } from '#syncfuion/ej2-vue-layouts';
Note the { }.
vue component should be register with default example:
import { ComponentA } from './ComponentA.vue' // if exported as normal
// import ComponentA from './ComponentA.vue' // if exported as default
export default { // component registoring with default
components: {
ComponentA
},
// code
}
Related
I use vueup/vue-quill for Vue 3 and want to use kensnyder/quill-image-drop-module.
This is my code :
Main.js
import { QuillEditor } from '#vueup/vue-quill';
import '#vueup/vue-quill/dist/vue-quill.snow.css';
import Quill from 'quill';
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop)
createApp(App).component('QuillEditor', QuillEditor).mount('#app')
Editor.vue
<template>
<QuillEditor :modules="modules" theme="snow" />
</template>
<script>
import { QuillEditor } from '#vueup/vue-quill';
import '#vueup/vue-quill/dist/vue-quill.snow.css';
export default {
components: {
QuillEditor,
},
data() {
return {
modules: {
imageDrop: true,
},
};
}
}
</script>
If I run the code above, I got an error :
How to fix this error?
Are quill-image-drop-module works on Vue 3?
Provide to <QuillEditor> a prop called toolbar (ex. toolbar='minimal').
vue-quill is creating options for Quill and only when toolbar prop is present it creates an object key modules that it uses to register other modules.
I am trying to test few test cases for a function where it takes two parameters. these two parameters along with the result I have defined it in three different files and then exporting it. I am using Jest for the same, but it is throwing "TypeError: (0 , _index.default) is not a function" error. Can some one tell where I am going wrong. Testing this in the sandbox
test file:
import appendToFilter from "./index";
import { res1, res2, res3, res4, res5, res6, res7, res8 } from "./Results";
import { src1, src2, src3, src4, src5, src6, src7, src8 } from "./Source";
import { ip1, ip2, ip3, ip4, ip5, ip6, ip7, ip8 } from "./Input";
test("case1", () => {
expect(appendToFilter(src1, ip1)).toBe(res1);
});
index.js
export function appendToFilter(filter, inputObjects) {
// logic here
}
Link: https://codesandbox.io/s/optimistic-mirzakhani-pogpw-so-b47y8
You are importing the function as a default import but you exported it as a named export. Go to your index.js and
export default appendToFilter
or import the function as the named import it is by doing:
import { appendToFilter } from "./index";
instead of:
import appendToFilter from "./index";
It's because you don't have any default export and you are importing appendToFilter from index without named import.
use
import { appendToFilter } from "./index";
instead of
import appendToFilter from "./index";
I just tried to use a simple HOC with react.
Here is the function :
import React from "react"
const withOptions = (WrappedComponent) => {
return class extends React.Component {
render() {
return <WrappedComponent { ...this.props } />
}
}
}
export default withOptions
The problem seems to be in the way i export/import it.
Imported and used in a simple way, it works :
import withOptions from "./Options"
...
class BilanClimatique extends React.Component{
...
}
const StyledBilanClimatique = withStyles(styles)(BilanClimatique)
export default withOptions(StyledBilanClimatique)
But if i use an intermediate file like index.js
import withOptions from "./Options"
export {
withOptions
}
And import it in my component like that
import {
withOptions
} from "./index"
Here is what i get
Can someone help me understand this ?
EDIT :
I found that the component that is using the HOC is imported from the same file as the HOC :
import withOptions from "./Options"
import BilanClimatique from "./BilanClimatique"
export {
withOptions,
BilanClimatique
}
And that causes the problem, but I don't understand why...
Here is a sandbox with the problem https://codesandbox.io/s/r074735yvo
This seems to be a problem with hoisting of 'exports'. From what I can see, the imports get hoisted, but I could not see anything similar for exports.
The flow which causes problem (codesandbox):
App.js:
import { BilanClimatique } from "./components/index";
./components/index.js:
// just using the "re-export" shortcut
export { default as BilanClimatique } from "./BilanClimatique";
export { default as withOptions } from "./Options";
./components/BilanClimatique.js:
import { withOptions } from "./index";
./components/Options.js:
const withOptions = WrappedComponent => {
return ... //snipped code
export default withOptions;
When App.js asks index.js for BilanClimatique, it in turn asks the same index.js for withOptions. But since exports don't seem to be hoisted, index.js has not yet made withOptions available.
How to solve:
Ordered exports:
in ./components/index.js, change the order of exports as per your dependency:
// just using the "re-export" shortcut
export { default as withOptions } from "./Options";
export { default as BilanClimatique } from "./BilanClimatique";
I would not recommend it. It is very fragile.
Use index.js to only expose to outside your namespace. Inside your namespace, rely on explicit imports.
i.e. in ./components/BilanClimatique.js:
import withOptions from "./Options";
If you have a very large codebase, use multiple index.js for exporting your "contracts". Take a look at the codebases of various library authors, I think that is the strategy they take.
I would personally recommend #2 over #3 unless you run into problems with #2.
. doesn't look as a great import path. Try to import from 'index' file.
import {
Logo,
withOptions
} from "./index"
I came to a codebase that did this
//index.js
export { default } from './Tabs'
export { default as Tab } from './Tab'
//Tab.js
export default class Tab extends Component {
render() => 'Something'
}
It's understandable that the author put Tab files under a Tab folder so that in other place he can just do import './Tabs' but why within the index.js he need to deconstruct?
Lots of people follow this nomenclature where the index file is just exports which then makes the imports easier.
It lets you import from the Tabs folder without explicitly saying the index.js filename. Most importantly it lets you import things from the folder Tab in just one statement.
For Example:
// Tab/Tab.js
import React, { Component } from "react";
class Tab extends Component {
render() {
return <span>Tab</span>;
}
}
export default Tab;
// Tab/Tabs.js
import React, { Component } from "react";
class Tabs extends Component {
render() {
return <span>Tabs</span>;
}
}
export default Tabs;
// Tab/index.js
export Tab from "./Tab";
export Tabs from "./Tabs";
// Main file
import React from "react";
import { render } from "react-dom";
import { Tab, Tabs } from "./Tab";
const App = () => (
<div>
<Tab />
<Tabs />
</div>
);
render(<App />, document.getElementById("root"));
demo: https://codesandbox.io/s/rr6klxj5j4
You can have a single default export from your file, Also writing
//index.js
export Tabs from './Tabs'
export Tab from './Tab'
will export them as a named export which you can later import as
import { Tabs, Tab } from './Tabs'
Also to understand the point default import is nothing different from an export named as default, so when you write
//index.js
export { default } from './Tabs' // Exports the Tabs as default
export { default as Tab } from './Tab' // imports the default from Tab and exports it as Tab
You could also write the above as
export { default } from './Tabs'
export Tab from './Tab'
In the above two cases you would import them as
import Tabs, { Tab } from './Tabs'
Check Error Exporting a component without importing for some more details
I am getting this eslint error:
Prefer default export
import React, { Component } from 'react';
class HomePage extends Component {
render() {
return (
<div className="Section">HomePage</div>
);
}
}
export { HomePage };
I have tried doing:
export { default as Homepage };
and then I get a fatal parsing error.
Then I changed it to:
export default HomePage;
Which clears the eslint error.
But then throws:
'./HomePage' does not contain an export named 'HomePage'.
Because I am calling HomePage like this:
import { HomePage } from './HomePage';
If I remove the brackets then I get this error:
"export 'default' (imported as 'HomePage') was not found in
'./HomePage'
import HomePage from './HomePage';
<PrivateRoute exact path="/" component={HomePage} />
What would be the proper way of changing this to the preferred default export?
From eslint-plugin-import
When there is only a single export from a module, prefer using default export over named export.
class HomePage extends Component {
//....
}
export default HomePage
In another file :
import HomePage from './Hello';
Check here codesandbox
Here's an example using functions:
function HomePage() {
function aHelperMethod() {
//
}
return {
aHelperMethod,
}
}
Now to import it in another file
import HomePage from './Hello';
And to use it you'll have to instantiate it
const homePage = HomePage()
homePage.aHelperFunction()
In some cases there should be more than one named export in the module.
export const foo = 'foo';
export const bar = 'bar';