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...
Related
How can I better organize my cypress code for testing so that I only need to import some functions?
I want to start by creating a file in which to authenticate on the page, and then I want to import it in a test with several functions.
I tried the following export code and it seems to have been incorrect, with errors:
export function login() {
cy.visit('https://*********')
cy.get('input[name="Parameter.UserName"]').type('*****')
cy.get('input[name="Parameter.Password"]').type('*****')
cy.contains('Login').click()
}
export default {login};
And in test :
import {login} from 'elements/pages/login.js'
Your import needs a relative URL
import {login} from '../elements/pages/login.js' // relative from cypress/integration
or if under cypress/suport/elements
import {login} from '../support/elements/pages/login.js'
Absolute imports (where path has no leading ./ or ../) are presumed to be library packages in node_modules.
Cypress provides something called the Custom commands for this purpose, you can read about it here.
Go to cypress/support/commands.js and write all your code here like:
Cypress.Commands.add('login', () => {
cy.visit('https://*********')
cy.get('input[name="Parameter.UserName"]').type('*****')
cy.get('input[name="Parameter.Password"]').type('*****')
cy.contains('Login').click()
})
And then in your any of your test, you can directly add:
cy.login()
all cys must be excuted in testing content, maybe u can try like this:
export default {
// props
visit: (url)=> { return cy.visit(url) }
get: (el)=> { return cy.get(el) }
// methods
login(){
cy.visit('https://*********')
cy.get('input[name="Parameter.UserName"]').type('*****')
cy.get('input[name="Parameter.Password"]').type('*****')
cy.contains('Login').click()
}
}
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';.
I have a config file setup that exports a bunch of values...
const dev = {
...,
someRandomLink: 'https://google.com'
}
const config = process.env.REACT_APP_STAGE === 'production' ? prod : dev;
export default {
...config
}
I then import this file and try to use the value for a href but it outputs [Object object].
import someRandomLink from '../constants/config';
...
<a href={someRandomLink}...
What is the correct way to extract that config variable as a string for the link?
You are exporting an object that contains someRandomLink as property.
When you import the default export, you are importing the entire object and giving it a name, instead of import the specific property.
Try to use it like this
import { someRandomLink } from '../constants/config';
...
<a href={someRandomLink}...
or like this is possible as well:
import config from '../constants/config';
...
<a href={config.someRandomLink}...
export default {
...config
}
So you are trying to export as default an object (I guess it's not config, it's dev).
There's 2 ways to export some info from a file:
1) export default myFunction this is importing one single method/object/any value you want to do. Then to import it it's as easy as import myFunction from './myFile'. Since it's a default export, you could name it as you wish: import Hello from './myFile' would work as well.
2) export {myFunction} this is the way to import it as a module, and not a default. With this technique you can import multiple functions like export {myFunction, myOtherFunction, myAwesomeThirdFunction}. The way to import it then it's like import {myFunction} from './myFile'.
In your case you have a mixup between default and the module exports. My suggestion would be:
const config = { // I corrected this dev variable name
...,
someRandomLink: 'https://google.com'
}
export {config}
import {config} from '../constants/config';
...
<a href={config.someRandomLink}...
Notice that since you exported a method, you need then to access to that property. Otherwise, you would attempt to do something like:
<a href={{someRandomLink: 'myUrl.com', otherProperties: 'otherProperties'}}...
So that wouldn't work.
I want to write a javascript library with two files:
snabbpixi.js
export function init() {
}
pixiapi.js
export function createElement() {
}
I want to use this library like this:
import { init } from 'snabbpixi';
import { createElement } from 'snabbpixi/pixiapi';
If I don't do anything and set the package.json for library as:
{
"main": "src/snabbpixi.js"
}
second import doesn't work (import { createElement } from 'snabbpixi/pixiap')
If I compile this library and export as umd format using webpack it also doesn't work.
How can I configure my library so I can import like this:
import { createElement } from 'snabbpixi/pixiap'
I normally do this sort of thing in TypeScript rather than straight JavaScript, but hopefully this works in basically the same way...
Try creating a new file (typically named index.js), with contents like this:
export * from './snabbpixi'; // Adjust paths as needed for your particular case.
export * from './snabbpixi/pixiapi';
Then make index.js your main.
The import you would use would then be flattened-out, however, looking more like:
import { init, createElement } from 'snabbpixi';
When you are using import { Something } from 'somewhere' you are calling on a named export from a given file or directory.
If the two files are in different directories then you can add an index.js file to each directory and then use export { default as function } from './file'
To do this you would have to export the default file from pixiapi and snabbpixi.
If you have both files importing into your index.js then you will still want to export them as defaults. But then you would do the following..
import file1 from './file1'
import file2 from './file2'
export default {
file1,
file2,
}
This will allow you to use the named imports as well and keep them in the same directory
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: