I want to import a js file that I received which has over 50k lines of code into my vue js file.
I tried multiple ways of doing it
1.
import DNAVisual from '../../composables/dna/dna-visualisation';
DNAVisual.drawDNA(document.getElementById('dna-visual'), DNAData);
this returned:
The requested module '/src/composables/dna/dna-visualisation.js' does not provide an export named 'default'
2.
import * as DNAVisual from '../../composables/dna/dna-visualisation';
DNAVisual.drawDNA(document.getElementById('dna-visual'), DNAData);
this returned:
DNAVisual.drawDNA is not a function
which is:
imgLink
3.
import '../../composables/dna/dna-visualisation';
this returned:
drawDNA is not defined
Related
I am trying to set up my vue application so customers can send emails to a address. My application was working fine but when I installed the firebase, send grid and node mailer packages, this error gets displayed
error in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
ERROR in external "https://smtpjs.com/v3/smtp.js?vue&type=script&lang=js&"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
# ./src/views/Home.vue 2:0-75 3:0-70 3:0-70 10:2-8
# ./src/router/index.js 3:0-37 17:13-17
# ./src/main.js 4:0-30 12:2-8
my main.js file
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
I have ran some test emails and they seem to be sending fine, but I can't deploy my application now.
I believe you should convert your dynamic imports to static like converting this:
Import ... from moduleName();
To this
import ... from 'moduleName':
I've been trying to get storybook working with a Vue 2 + composition API project for a while now and I keep running into the error:
Unexpected error while loading ./ProductCard.stories.js: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
So I assume I need to include it before any file/story gets called.
When I try and import it into my storybook's main.js file like this:
import Vue from "vue";
import VueCompositionApi from "#vue/composition-api";
Vue.use(VueCompositionApi);
module.exports = {
//... storybook config
}
I get the console error:
import Vue from "vue";
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've also tried:
const Vue = require("vue");
const VueCompositionApi = require('#vue/composition-api');
Vue.use(VueCompositionApi);
Which appears to work but I still get the top error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
Does anybody know where I'm meant to import the composition API so it's loaded before it's called?
I've tried putting it in the preview.js file as well with the same error.
Whats causing it is the component ProductCard loads a composable called useUiStatewhich uses vue-composition-api.
I would have thought it's called vue.use already.
My vue-cli version is 4.5.15, but it cannot resolve # as ./src and all paths using '#' are not found. Why did this happen and how could I solve it?
Your statement tries to import a file which does not exist: import Layout from '#/layout' would work with layout.vue or layout/index.js, neither of which is present.
To fix this, you can either import the single components with their full path (as mentioned in #wittgenstein's comment): import Footer from '#/layout/Footer'
Or you can create layout/index.js which exposes all components inside the directory:
import Footer from './Footer.vue'
import Header from './Header.vue'
// ...
export default {
Footer, Header, // ...
}
Then you can import components like that: import { Footer, Header } from '#/layout'
It is not possible to import a folder, you will have to import a single file from the layout folder:
import Footer from "#/Layout/Footer.vue"
import Header from "#/Layout/Header.vue"
import Index from "#/Layout/Index.vue"
import Sidebar from "#/Layout/Sidebar.vue"
import Sidebar2 from "#/Layout/Sidebar2.vue"
If you want to import every file, you will have to this all manually, because you cannot import a folder.
Hope this will work for you!
I have known what the problem is. It's because I used 'Index.vue' as the name before and git is insensitive to capital. So it cannot find the path.
Vue has supported
import xxx from "#/xxx"
if the name of your file you want to import is "index.vue".
Thanks a lot for your answers!
I have below folders
src
-common
-> test.js
-views
->test
-1.vue
I need to call common folder in 1.vue.
I have tried below script, but its not working.
import { common } from '../common'
Is there any suggestion on how can I call common folder from 1.vue?
If test.js is a default export then:
import Test from '../../common/test';
If it's a named export then:
import { Test } from '../../common/test';
I have file: components.js:
import Vue from 'vue'
import SelectCategory from './components/SelectCategoryComponent'
import CommentsManager from './components/CommentsManagerComponent'
Vue.component('select-category', SelectCategory);
Vue.component('comments-manager', CommentsManager);
In app.js I imported this file:
window.Vue = require('vue');
import './components'
But when page is loading I get error: Vue is not defined. When I add import Vue from 'vue' in every component then all working good. But how I can add Vue globally, without add import Vue from 'vue' in every component?
But how I can add Vue globally, without add import Vue from 'vue' in every component
You should not use global variables. Put import Vue from 'vue' in every file.
Now, if you still want to, use global instead of window. And make sure that file is loaded first. Or, you might want to set window= in your html file, and leave it out of every file.
As I can see within your components.js you have imported Vue and you have imported another Vue and you have put it to window object. so you have imported 2 different Vue within your application, as well there is no need to use components.js and app.js that can be confused later. so I suggest you put all your requirement within app.js file.
so app.js file will be like this :
import Vue from 'vue'; // es6 syntax
window.Vue = Vue;
import SelectCategory from './components/SelectCategoryComponent'
import CommentsManager from './components/CommentsManagerComponent'
Vue.component('select-category', SelectCategory);
Vue.component('comments-manager', CommentsManager);