i am using expo to build a app.
here,
`import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase("db.db");
is not working while
import { SQLite } from "expo-sqlite"; is working.
when i use the first method, it is getting SQLite.openDatabase is not a function error.
actually what is the difference with these? anyone have an idea?
When you do import * as SQLite from 'expo-sqlite'; you are actually importing all the modules from the expo-sqlite by writing * as SQLite , and its stored as SQLite variable which then you are using to create an openDatabase.
But when you do import { SQLite } from "expo-sqlite"; you are only importing the SQLite module from the expo-sqlite package. And after that you are using it to create a database.
Basically its like sometimes in some file you have multiple functions like suppose App.js
export const add =() => {
}
export const bol = () => {
}
Then suppose in Home.js you need to import ,
So if you want only the add function then you will do
import {add} from 'App.js'
or you want both so <
import {add,bol} from 'App.js'
and another way of importing both is by
import * as Func from 'App.js'
And now you can access each by Func.add and Func.bol
Hope it helps. feel free for doubts
Related
Given the files below:
mutation-types.js
export const SET_VALUE = 'SET_VALUE'
export const SET_PLACEHOLDER = 'SET_PLACEHOLDER'
my-file.js
import * as types from './mutation-types'
gives an error saying Uncaught TypeError: types__WEBPACK_IMPORTED_MODULE_1_.default is undefined. Even the official vuex repo uses this syntax with the same version of Vue, 3. Here you can check it.
Why isn't it possible to use the import like import * as name from './something'?
You can see VueX is importing from ../api (api/index.js), which does not write export const as you do.
If you read the message closely it says ".default is undefined". So try it with export default.
Take an example from
Canonical way to define common constants in Vue.js
const SET_VALUE = 'SET_VALUE'
const SET_PLACEHOLDER = 'SET_PLACEHOLDER'
export default {
SET_VALUE: SET_VALUE,
SET_PLACEHOLDER: SET_PLACEHOLDER
}
I'm trying to import multiple components from a folder conditionally. The first example works, but I need to get it working conditionally like in the last example that doesn't work. Otherwise I'd have to always go and change which components should import manually, after adding one to the project folder.
I've also tried wrapping the imports into a function, but I can't get the import * as components syntax to work. Importing one component works fine, but not with * return () => import * as components '#/components/index'
This works
import * as components from '#/components/index'
export default {
components: {
...loadedComponents
}
}
index.js and electronIndex.js
export {
default as one
}
from './One.vue'
export {
default as two
}
from './Two.vue'
This of course doesn't work, but demonstrates what I need
I also tried importing conditionally via functions like stated above, but can't get that to work either.
const IPC = window.ipcRenderer
if (IPC) {
import * as components from '#/components/electronIndex'
} else {
import * as components from '#/components/index'
}
export default {
components: {
...loadedComponents
}
}
In other to avoid multiple imports into my vuejs app I created an index.js file and imported all the files in it like so:
import AddMember from "./AddMember.vue";
import EditMember from "./EditMember.vue";
export {
AddMember,
EditMember,
};
Then in my component compenent I imported them like so:
import * as Members from "../members/index.js";
export default {
name: "members-table",
components: {
AddMember: Members.AddMember
EditMember: Members.EditMember,
},
}
The EditMember Component is a dialog that opens up per the member clicked. But Anytime I click on a member on a the table I get and error that looks like this: even though the name prop was defined in all the components.
Unknown custom element: <edit-member> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I resolved the problem my importing the EditMember.vue file itselfimport EditMember from './EditMember';. My question however, is there a way I can achieve this. Or better still what I'm I missing or did wrong.
well if it`s reusable components your trying to do so wouldnt it be better to create base components? and then you dont need to import them each time?
import { AddMember, EditMember } from "../members/index.js"; this should work like #Asimple said
Maybe you can try to import them separately?
Like this:
import { AddMember, EditMember } from "../members";
Update:
Changed import source, please, try it.
Working example here
Try this, you may need to create alias as:
components: {
'AddMember': Members.AddMember, // use single quotes
'EditMember': Members.EditMember,
},
thanks in advance
Iam using watermelon db in react native android it returns undefined for the collection.
const handleDB = async () => {
const myCollection = database.collections.get('data_items')
await database.action(async () => {
const newPost = await myCollection.create(post => {
post.ItemID = 9
post.ItemParentItem_ID = 8
})
})
}
And i call this from same Functional Component
handleDB()
Is there any work around
My DB
import { Database } from "#nozbe/watermelondb";
import SQLiteAdapter from "#nozbe/watermelondb/adapters/sqlite";
import { dbModel } from "./"
import { mySchema} from "./schema"
const adapter = new SQLiteAdapter({
dbName: 'Northel',
schema: mySchema
});
export const database = new Database({
adapter,
modelClasses: [dbModel],
actionsEnabled: true,
});
If I console log myCollection I get undefined.
i have imported the database as
import { database } from '../model/database'
Have you defined your models, schemas and relationships correctly? See how here:
Schema, Model and Relation.
If everything is fine, did you add this table later to the database and not update the schema version? If so, update the schema version and reinstall your mobile application.
If that doesn't work, share your model and schema definitions, it will help to identify the problem.
The same thing happened to me.
Make sure you have completely configured the database, in my case, forget to add the Model to modelClasses [].
This usually happens when you have not named the model correctly or imported the model in the database setup
Given I have two imports:
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
What is the difference between these two?
I understand that LogMonitor is the "default" export, and that the bracketed import can import several different exports at once in a comma delimited list. However, is there some difference in the usage?
I feel like I am missing some fundamental.
However, is there some difference in the usage?
No. Default and named imports/exports can have any JavaScript value. It really just depends on how the module you are importing is organized.
import { createDevTools } from 'redux-devtools';
is a shorthand for:
import DevTools from 'redux-devtools';
const createDevTools = DevTools.createDevTools;
So your going directly to the property of your default export object.
If still, someone is looking for further details with simple example. Look at the MDN web docs
The import statement is used to import bindings which are exported by
another module. Imported modules are in strict mode whether you
declare them as such or not. The import statement cannot be used in
embedded scripts unless such script has a type="module"
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";