How do I import JavaScript files that uses functions in other local files in Vue cli without getting undefined errors?

Question

I have been trying to convert an HTML template (includes JS and CSS) to VueJS app. The template is structured and modularised in such a way that JavaScript functions from other local JavaScript files are used repeatedly within other local files.

The problem now is that I am getting undefined variable errors in my JavaScript files when imported within a Vue single-page app.

For example:

file validate.js has validate_username() and validate_email()

file login.js has login()

file register.js has register() but uses validate_username() and login() from other files.

How I tried to import the files in Vue:


import './assets/validate.js';
import './assets/login.js';
import './assets/register.js';

I am getting validate_username() not defined in register.js

are using a bundler like vue cli or webpack? please share also one file content — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 26, 2020 at 19:29

Dan · Accepted Answer · 2020-12-26 19:36:18Z

1

You have to export the functions from their files:

// login.js
export const login = function() {
  ...
}

So that you can import them:

import { login } from './assets/login.js';

Alternatively, you could create a default export rather than a named export:

export default function() {  // login
  ...
}

import login from './assets/login.js';

edited Dec 26, 2020 at 19:36

answered Dec 26, 2020 at 19:29

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I import JavaScript files that uses functions in other local files in Vue cli without getting undefined errors?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related