const { _: slug } = event?.context?.params;
Running npm run lint always throws an
Unsafe usage of optional chaining. If it short-circuits with 'undefined' the evaluation will throw TypeError no-unsafe-optional-chaining
Error.
Any help would be appreciated.
Related
Following these steps:
Install fresh vuejs 2. Don't change package.json.
Install vue-notion package. This is a renderer for the Notion based on vuejs.
Inject the NotionRenderer object into any page like in an official example: import { NotionRenderer } from 'vue-notion'
Run npm run serve or yarn serve (I've tried both)
... I get the following error while compiling:
error in ./node_modules/vue-notion/dist/esm.js
Module parse failed: Unexpected token (1793:175)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // return empty notion decorated text if row is empty
> return (this === null || this === void 0 ? void 0 : (_this$properties = this.properties) === null || _this$properties === void 0 ? void 0 : _this$properties[columnId]) ?? [[" ", false]];
| },
|
# ./src/main.js 9:0-44
# multi (webpack)-dev-server/client?http://192.168.0.107:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
The problem is the nullish coalescing operator (??) at the end of the string.
I've tried to add #babel/plugin-proposal-nullish-coalescing-operator into babel.config, but it still doesn't work:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
],
plugins: [
'#babel/plugin-proposal-nullish-coalescing-operator',
],
}
How can I fix it? What kind of a loader should I use to compile the code?
Thank #Jonathan. I've solved this problem by adding a transpile directive into vue.config.js:
module.exports = {
transpileDependencies: ["vue-notion"]
}
Let's see the error first:
jest-haste-map: Haste module naming collision: #stevemoretz/yoohoo
The following files share their name; please adjust your hasteImpl:
* <rootDir>/.yalc/#stevemoretz/yoohoo-ratchet-expo/.yalc/package-name2/package.json
* <rootDir>/.yalc/package-name1/package.json
Failed to construct transformer: DuplicateError: Duplicated files or mocks. Please check the console for more info
at setModule (/Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:543:17)
at workerReply (/Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:614:9)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Promise.all (index 27)
at /Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:426:22 {
mockPath1: '.yalc/package-name1/.yalc/#stevemoretz/yoohoo/package.json',
mockPath2: '.yalc/package-name2/package.json'
}
What's happening? I'm using a nested yalc package in another yalc package, so I get this error, how do I solve that?
Getting rid of .yalc folder, fixes this but we can't do that because yalc won't work well 🙂.
But we can exclude it from the metro bundler that fixes it, how?
https://stackoverflow.com/a/41963217/10268067
so in our case it becomes:
const exclusionList = require("metro-config/src/defaults/exclusionList");
// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.
module.exports = {
resolver: {
blacklistRE: exclusionList([/.yalc\/.*/]),
},
};
I've got a project. It's currently available on a certain website. I need to implement some changes. When I download a project from gitlab and run it throws me an error:This must be called within a setup function.
path: .nuxt/composition-api/index.js
const useContext = () => {
const vm = CompositionApi.getCurrentInstance();
if (!vm)
throw new Error("This must be called within a setup function.");
return {
...(vm[globalNuxt] || vm.$options).context,
route: CompositionApi.computed(() => vm.$route),
query: CompositionApi.computed(() => vm.$route.query),
What is wrong?
I need to run the project to make some changes but can't deploy it on my local server.
Update:
useContex is in default.vue
...
setup (_, { isServer, refs }: any) {
// console.info(context)
// const refs = context.refs
const { store } = useContext()
const { scrolllock } = scrollLock(store)
const locationName = computed(() => store.getters.locationName)
const location = computed({
set (val: boolean) {
store.dispatch('setLocationModal', val)
},
get () {
return store.getters.locationModal
}
})
...
cmd output when I'm trying to go the site
[Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.
ERROR [Vue warn]: Error in data(): "Error: This must be called within a setup function." 22:50:04
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
ERROR [Vue warn]: Error in data(): "Error: This must be called within a setup function." 22:50:05
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
ERROR [Vue warn]: Error in data(): "Error: This must be called within a setup function." 22:50:24
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
From my experience, npm can't install #nuxtjs/composition-api older versions, or stuff like that, so I did uninstall its older version and install the new version and it's worked
here is what I've done
rm -rf node_modules && rm -rf package-lock.json && npm uninstall #nuxtjs/composition-api && npm i #nuxtjs/composition-api && npm i
From the look of things, it seems you
You created another plugin for the VueCompositionAPI when it is installed already e.g #nuxtjs/composition-api
I would advise you to remove any other composition-api from your project and stick to the latest version of the official #nuxtjs/composition-api with Vuex v4 for Nuxt 2
In the latest version of #nuxtjs/composition-api, you could use
const store = useStore();
// OR
const { store } = useContext();
NOTE: You have to define the helper functions like const router = useStore() directly inside your setup() function, and not inside your method, to avoid This must be called within a setup function error.
For those that want to use route
To smooth your upgrade to Nuxt 3, it is recommended not to access route, query, from and params from useContext but rather to use the useRoute helper function.
I don't know what happened there. I deleted that repository and cloned it again.
Next up I did this:
npm init
and then
npm run dev
And it works.
ESLint is yelling at me for this Prop definition in a Vue single-file component written in Typescript:
#Prop({
default: () => ""
}) Query!: string
Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Expression expected at ›here‹ 2:4:
#Prop({
default: () => ""
^
}) Query!: string
It also complains here:
get RemainingTime() {
if(!this.myData.objectProperty) return null
return some_data
}
Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Expression expected at src/views/list/ProjectBox.vue:79:8:
get RemainingTime() {
if(!this.myData.objectProperty) return null
^
In my eslint.rc:
parserOptions: {
parser: '#typescript-eslint/parser',
}
What expression is expected here -- or what else causes the linter error?
I’m happy to provide further information, but since I’m unfamiliar with the technology stack I don’t know what to include—and I don’t want to dump each configuration file here. The project was setup using vue-cli.
I am getting the following error:
system.src.js:123 Uncaught (in promise) Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8000/dist/jquery.js
Error: XHR error (404 Not Found) loading http://localhost:8000/dist/jquery.js
Error loading http://localhost:8000/dist/jquery.js as "jquery" from http://localhost:8000/jspm_packages/npm/toastr#2.1.2/toastr.js
How do I go about fixing this?
I have done npm install and jspm install.
Thanks!
You need to make sure that jquery is mapped to the correct path in node_modules and also any modules that depend on jquery have the dependency explicitly declared:
map: {
'jquery' : 'path_to_jquery'
},
meta: {
'file_that depends_on_jquery' : {
deps: ['jquery']
}
}