ESLint Expects Expressions at Random Places in Code - vue.js

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.

Related

ESLint object-shorthand error in Vue2 project, when I use #vue/reactivity-tranform macros and defineExpose()

I use Vue3 Reactivity Transform macros and defineExpose() in Vue2 Project By unplugin-vue2-script-setup. I hope I can use eslint object-shorthand rules , but it was error when I use $$ and the key and value of property are same. What should I do to make ESLint not report error.
my code:
defineExpose({ myCode: $$(myCode) })
ESLint config:
rules: {
'object-shorthand': ['error', 'always'],
},
I find that code will be transformed to defineExpose({ myCode: (myCode) }) by reactivity-transform. The key myCode and value myCode are the same. So it could have been simplified but it wasn't. ESLint object-shorthand will throw error.
In ESLint object-shorthand source code, it uses AST Node property shorthand, if the key and value are same ,and the value of shorthand is false,it will throw error. Maybe , if the compiler result of reactivity-transform is simplified , the ESLint object-shorthand rules will not error ?

Can I use #vercel/og without React?

I'm trying to create an API on Vercel which returns images, generated based on the request. I would like to use #vercel/og for this, because it can generate images from HTML, and it is very quick. However, it seems to require React, which seems entirely unnecessary for something serving no actual HTML at all.
I have an edge function in api/test.ts:
import { ImageResponse } from '#vercel/og';
export const config = {
runtime: 'experimental-edge',
};
export default function () {
return new ImageResponse({
type: "div",
props: {
children: "Hello, World",
style: {
backgroundColor: "black",
color: "white",
width: "100%",
height: "100%",
}
}
}, { width: 500, height: 500 });
}
This runs completely fine when deployed to Vercel, but when I use vercel dev it gives me these errors:
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/test: Error: socket hang up
node_modules/#vercel/og/dist/og.d.ts:1:35 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import type { ReactElement } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
1 import { ReactNode } from 'react';
~~~~~~~
node_modules/satori/dist/index.d.ts:14:11 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev #types/node`.
14 data: Buffer | ArrayBuffer;
~~~~~~
Found 3 errors.
There are two errors saying that #vercel/og and satori can't find React. Is there a way around this? I shouldn't need react for this, right?
I worked around the React-related errors and the inability to run .tsx edge functions without Next.js by installing #types/react and defining my own JSX function and using it without JSX syntax just in a .ts file.
function h<T extends React.ElementType<any>>(
type: T,
props: React.ComponentPropsWithRef<T>,
...children: React.ReactNode[]
) {
return {
type,
key: "key" in props ? props.key : null,
props: {
...props,
children: children && children.length ? children : props.children,
},
};
}
After this you can run it in Vercel deployment preview.
However, in vercel dev locally, I'm still getting the following error.
Failed to instantiate edge runtime.
Invalid URL: ../vendor/noto-sans-v27-latin-regular.ttf
Error: Failed to complete request to /api/og: Error: socket hang up
I had also forced vercel CLI to use the newer TypeScript version with pnpm.overrides in package.json to solve some TypeScript parse errors I was getting.

How to fix Unexpected token error while compiling vuejs project?

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"]
}

Uncaught (in promise) TypeError: Illegal constructor at new SvelteElement (index.mjs:1381)

Uncaught promise when registering a custom element using the latest
sapper, svelte, nodeJS, and rollup stack using the following
statements.
REPL example: https://svelte.dev/repl/489ee8acd10848b0bb1feb2535bd6cc5?version=3.16.5 created locally
<svelte:options tag="parlax-background" />
& rollup.config.js
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({...})
svelte({
dev: !production,
customElement: true,
// and tried also with customElement: { tag: "my-element"}
hydratable: true,
emitCss: true
I want to mention that I had tested on a fresh project
Logs
[Client Side]
=> Uncaught (in promise) TypeError: Illegal constructor
at new SvelteElement (index.mjs:1381)
[Server Side]
=> The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
44: <svelte:options tag="my-element" />
1. When I registering [ **customElement: true ] in the config i get**
2. If I do not register my element in the config I do not get any error, but neither my element is registered :(
Ref: https://github.com/sveltejs/svelte/issues/4132
As described in the referenced GitHub issue, once you configure the Svelte compiler with customElements: true, you're expected to provide an element tag for all your components (using <svelte:options tag="my-component"/>.
In your REPL's example, this would mean updating App.svelte with e.g. <svelte:options tag="my-app"/>
When you now run the app, you should not see the error in the console anymore, but a working app.

Use tslint-eslint-rules with Gulp.js

Objective: Use TSLint to lint any TS files in the project done using VS 2015
I set up a gulp task as follows (from Setup TSLint in Visual Studio 2015):
//The actual task to run
gulp.task("TSLint:All", function () {
return gulp.src(TYPE_SCRIPT_FILES)
.pipe(plumber())
.pipe(tslint())
.pipe(tslint.report(
"verbose", {
emitError: false,
reportLimit: 50
}));
});
Things were working fine. Now I want to use the tslint-eslint-rules rules for linting.
I do the following
Install the eslint-eslint-rules package as shown on https://github.com/buzinas/tslint-eslint-rules
Create file called tslint.json as shown below
{
"rulesDirectory": "node_modules/tslint-eslint-rules/dist/rules",
"rules": {
"no-constant-condition": true
}
}
Change my Gulp task as follows
gulp.task("TSLint:All", function () {
return gulp.src(TYPE_SCRIPT_FILES)
.pipe(plumber())
.pipe(tslint({
configuration: "tslint.json"
}
))
.pipe(tslint.report(
"verbose", {
emitError: false,
reportLimit: 50
}));
});
I start getting the following error (I believe for every error flagged by Linter):
Plumber found unhandled error:
SyntaxError: Unexpected token
How can I correct this ?