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";
Related
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.
In my vue app I had following import in my component
import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
treemapInit(Highcharts);
Now I have nuxt and I need to import this part only for client side, because it fails with an error on server-side.
How to do this? Please don't suggest me Nuxt plugins, since I want to use it local due to performance.
Thanks!
The code executes twice - on server-side and then on client-side. The first run is done in an environment that lacks window and causes Highcharts to be loaded, but not initialized. The fix is to place all modules inits in if checking if Highcharts is an object or a function. It should be an object for module initialization:
import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
if (typeof Highcharts === "object") {
treemapInit(Highcharts);
}
Docs: https://github.com/highcharts/highcharts-vue#readme
Similar thread: https://github.com/highcharts/highcharts-vue/issues/73
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 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.