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";
Related
Is the JavaScript import statement only used to import frameworks, or can it be used to import other things? What other things can it be used to import?
You can import variables, objects and basically anything as long as it's JavaScript. Note that frameworks usually export an object.
// file.js
export const a = 30;
// default.js
const object = { a: (param) => doSomething(param), ... };
export default object;
// main.js
import { a } from "file.js"; // console.log(a) -> 30
import Whatever from "default.js"; // import and name the default export
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
}
on my freshly installed app i try to import my components like this:
import {Cards , Chart , CountryPicker} from '../components'
and i made an index.js directory:
export {default as Cards} from './Cards/Cards'
export {default as Chart} from './Chart/Chart'
export {default as CountryPicker} from './CountryPicker/CountryPicker'
but it return error :Uncaught SyntaxError: Unexpected token 'export'.
i am doing this trying to copy a tutorial and it looks like it works for the tutor but not me!
This is the basic format for Reactjs.
for more you can Basic example here
//Card
import React from 'react';
const Card = (props) => {
return (
// JSX code
)
}
export default Card;
//Chart
import React from 'react';
const Chart = (props) => {
return (
// JSX code
)
}
export default Chart;
//CountryPicker
import React from 'react';
const CountryPicker = (props) => {
return (
// JSX code
)
}
export default CountryPicker;
//index.JSX
import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';
I think you should first define the components individually and each component should be exported at the bottom of the definition page like so...
import React from "react"
const Cards = () => {
//Helper functions here
return (
//Jsx here
)
}
export default Cards
And then you can now import this component in your App.js component based on the relative path like so...
import Cards from "./components/Cards/Cards";
This is assuming Cards is 2 folders deep from your home directory.
the problem was that i have not put my component folder inside the src folder. hence webpack did nothing about it and it was interpreted as a raw js file which resulted in the error. moving it to the src folder did the trick!
If one file has an export default:
export default {
function,
function2
}
How can I import these two functions in a separate file? When I try restructuring it with
import { function, function2 } from 'path'
I get an error saying function is not exported from 'path'
Since it's a default export, you will have to do it like below
export default {
function1,
function2
}
import Path from 'path';
Path.function1();
Path.function2();
Look into this ressource.
Basically, you can achieve this, by writing:
export const myExport1 = function
export const myExport2 = function2
And then:
import { myExport1, myExport2} from 'path'
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"