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!
Related
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
For my RN project, I use '#videosdk.live/react-native-sdk'.When I try to import a method from the library I get undefined. I can't figure out what's going on. I did everything according to the instruction and set it up correctly.
The problem is not even in the setup, but I installed the package '#videosdk.live/react-native-sdk', but I can't import methods from it.
import VideoSdk from '#videosdk.live/react-native-sdk'; I used this import but got undefined
You can't import VideoSdk. You need to import some other components like:
import {
MeetingProvider,
useMeeting,
useParticipant,
MediaStream,
RTCView,
} from "#videosdk.live/react-native-sdk";
I am trying to use flow in my current react-native project. After some research, I discovered that all the types I need are in this file, but I have no idea how I am supposed to import these types.
For instance, I need to import the ViewLayoutEvent from there. What am I supposed to write in my file?
I tried the following:
import type { ViewLayoutEvent } from 'react-native';
import type { ViewLayoutEvent } from 'react-native/Libraries/Components/View/ViewPropTypes';
To no avail.
Update:
Or maybe it is in this file
For my Flutter project, I have my dependencies setup as such:
// Dependencies
// ------------
// Packages
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
// Widgets
import '../widgets/ring-swipe.dart';
However, when I use Reformat Code in IntelliJ, my comments turn into:
// Dependencies
// ------------
// Packages
import 'package:cached_network_image/cached_network_image.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import '../widgets/ring-swipe.dart';
I can't seem to find where this setting is set for Dart/Flutter projects. Is this non-configurable?
This behavior seems related to issue IDEA-171179 (and duplicates), which is still open, unfortunately.
See, specifically, this Dart example, which seems to match.
Before reformat code:
// ignore: unused_import
import 'package:polymer_elements/iron_flex_layout_classes.dart';
// ignore: unused_import
import 'package:polymer_elements/app_layout/app_header/app_header.dart';
After reformat code:
import 'package:polymer_elements/iron_flex_layout_classes.dart';
import 'package:polymer_elements/app_layout/app_header/app_header.dart';
// ignore: unused_import
// ignore: unused_import
Valid for the old IDEA 2017.1
To mitigate the issue, remove the Optimize imports check.
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);