I've imported createSchema in my schema.js file as follows
// First, we must import the schema creator
import createSchema from 'part:#sanity/base/schema-creator'
// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:#sanity/base/schema-type'
import { userSchema } from './userSchema'
// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
// We name our schema
name: 'default',
// Then proceed to concatenate our document type
// to the ones provided by any plugins that are installed
types: schemaTypes.concat([
userSchema
]),
})
The error doesn't reference any of the files I have created. How can I figure out what is being referenced?
This is the specific error I receive
ReferenceError: createSchema is not defined
at Object. (/static/js/app.bundle.js:174890:18)
at __webpack_require__ (/static/js/vendor.bundle.js:713:30)
at fn (/static/js/vendor.bundle.js:118:20)
at Object. (/static/js/app.bundle.js:17264:19)
at __webpack_require__ (/static/js/vendor.bundle.js:713:30)
at fn (/static/js/vendor.bundle.js:118:20)
at Object. (/static/js/app.bundle.js:38269:38)
at __webpack_require__ (/static/js/vendor.bundle.js:713:30)
at fn (/static/js/vendor.bundle.js:118:20)
at Object. (/static/js/app.bundle.js:99879:26)
Related
I'm using Ionic with VueJs and JSON-Server. I'm calling a get request with an OnMounted, but when I run Ionic Serve I get the following error:
export 'default' (imported as 'Axios') was not found in 'axios' (module has no exports)
It still compiles, and when I click the page where the OnMounted is, I get this error:
ReferenceError: module is not defined
at eval (index.js?f8df:1:1)
at ./node_modules/axios/index.js (src_views_EventsPage_vue.js:277:1)
at __webpack_require__ (app.js:233:33)
at fn (app.js:486:21)
at eval (AxiosService.js:5:63)
at ./src/services/AxiosService.js (src_views_EventsPage_vue.js:73:1)
at __webpack_require__ (app.js:233:33)
at fn (app.js:486:21)
at eval (EventsService.js:12:71)
at ./src/services/EventsService.js (src_views_EventsPage_vue.js:84:1)
From what I can tell, the Axios index.d.ts file is as it should be, containing many exports. I've run npm i axios --save.
I use the same code in another project that does not run Ionic but has Vite and a few other things included.
I'm struggling to understand how to use functions in Vue 3 from 3rd party JavaScript libraries. I am trying to use the interactive fiction library inkjs in my Vue 3 project. I installed it using: npm install inkjs. I am using the composition API. However, I cannot access the functions in inkjs. Specifically, this does not work:
import { ref } from '#vue/reactivity'
import getStory from '../ink/story.js'
import { inkjs } from 'inkjs'
export default {
name: 'HomeView',
setup() {
const { storyContent } = getStory()
const story = new inkjs.Story(storyContent.value)
return { displayText, story }
}
}
Story is the main function in the inkjs library.
It gives this console error:
HomeView.vue?43d0:29 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Story')
at setup (HomeView.vue?43d0:29:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7160:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:7114:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5468:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5443:1)
at patch (runtime-core.esm-bundler.js?d2dd:5033:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5655:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
How can i hide api key in preact , in react i used .env file , but don't know how to do it in preact ?
index.js?2e9b:8 Uncaught (in promise) ReferenceError: process is not defined
at eval (index.js?2e9b:8)
at Generator.next (<anonymous>)
at asyncGeneratorStep (index.js:5)
at _next (index.js:7)
at eval (index.js:7)
at new Promise (<anonymous>)
at eval (index.js:7)
at getSeriesInfo (index.js?2e9b:7)
at Object.eval [as __] (index.js?2e9b:14)
at j (index.js?a178:361)
Preact is just a UI library, but I'll assume you're referring to Preact-CLI, which is an actual build tool. Let me know if this is incorrect.
Our wiki covers this under "Use Environment Variables in your Application". process will not exist outside of Node so you'll need to specify the variables you want to use using DefinePlugin.
Add the following to your preact.config.js file:
export default (config, env, helpers) => {
config.plugins.push(
new helpers.webpack.DefinePlugin({
'process.env.MY_VARIABLE': JSON.stringify('my-value'),
}),
);
};
If you specifically want to read from a .env file, you will also need to add some utility to read it, such as dotenv:
import dotenv from 'dotenv';
dotenv.config();
export default (config, env, helpers) => {
config.plugins.push(
new helpers.webpack.DefinePlugin({
'process.env.MY_VARIABLE': JSON.stringify(process.env.MY_VARIABLE),
}),
);
};
I'm trying to integrate the use of Vuex into a very small Vue 3 application, but I'm unable to load things for reasons that are totally unclear to me. My main.js is very simple and does a use() statement on the Vuex store as documentation indicates I should do:
import { createApp } from "vue"
import App from "./app.vue"
import store from "./store.js"
const app = createApp(App)
app.use(store)
app.mount("#app")
The store itself is pretty simple with the first relevant lines looking like the following:
import axios from "axios"
import { createStore } from "vuex"
export default {
store: createStore({
However, when I load my app after it compiles successfully without any warnings, I get this in the debugger:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
at Proxy.events (event-list-by-day.vue?04a6:61)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
at Proxy.render (event-list-by-day.vue?04a6:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
What am I missing? I know it's something basic here. Note that installed Vuex as npm install --save vuex#next as the Vuex documentation indicated I should do to support Vue 3.
You're exporting it as an object {store: Store} but what you really want to do is export the Store instance created by createStore().
On your store.js
const store = createStore({
...
...
})
export default store
or
export default createStore({
...
...
})
I recently added a typescript definition file for the open source redux-ui-router library, but I'm now getting errors like the following with Typescript 1.7.3:
error TS2656: Exported external package typings file
'C:/.../node_modules/redux-ui-router/index.d.ts' is
not a module. Please contact the package author to update the package
definition.
I am trying to import this library with code like this in my typescript files:
import ngReduxUiRouter from "redux-ui-router";
I'm new to Typescript, and I can't find a clear description of what exactly this definition file should look like when included with an npm package. There's a wiki entry that talks about typings for npm packages, but outside of repeating the direction that an external module should be used, there's not a concrete example to work from.
CORRECTION
I've tried removing the declare module "redux-ui-router" { code, and that seemed to work after restarting webpack, which I'm using to compile everything (I removed the comments for brevity):
export interface ReduxUIRouterAction {
type: string;
payload: any;
}
export interface ReduxUIRouterState {
currentState: Object;
currentParams: Object;
prevState: Object;
prevParams: Object;
}
export function router(state: ReduxUIRouterState, action: ReduxUIRouterAction): ReduxUIRouterState;
export var ngReduxUiRouter: string;
export function stateGo(to: string, params?: Object, options?: Object): ReduxUIRouterAction;
export function stateReload(state: any): ReduxUIRouterAction;
export function stateTransitionTo(to: string, params?: Object, options?: Object): ReduxUIRouterAction;
export default ngReduxUiRouter;
Is this set of changes what would be expected when including this in an npm package?
Is this set of changes what would be expected when including this in an npm package?
Yes. The exports need to be root level at the file.
In other words : an ambient file is not an external module