Why does vue still report jsx errors? Although an error is reported, it can be executed normally. What is the reason?
<el-submenu index="1">
< const ElMenuItem: unknown
JSx element type 'E1MenuItem' does not have any construct signature or call signature. ts (2604)>
< View issues No quick fixes available>
< el-menu-item index="1-1">item1</el-menu-item>
< el-menu-item index="1-2">item1</el-menu-item>
</el-submenu>
It should be a problem with the volar plugin. Try to upgrade the version of the plugin to 0.36.1, or you can add some configuration and add such a configuration to tsconfig.json.
{
"vueCompilerOptions": {
"experimentalSuppressInvalidJsxElementTypeErrors": true
}
}
Related
When I npm run dev my SvelteKit / vite app locally, after a minute or so, a full hot module reload is triggered which leads to break my design.
Stacktrace example:
23:09:37 [vite] page reload .svelte-kit/generated/nodes/8.js
23:09:37 [vite] hmr update /.svelte-kit/generated/root.svelte
23:09:37 [vite] page reload .svelte-kit/generated/server-internal.js
23:09:37 [vite] page reload src/declarations/cmc/cmc.factory.did.js
23:09:37 [vite] hmr update /src/frontend/src/lib/components/guards/IdentityGuard.svelte
etc.
I am not sure is the issue is linked to the fact that my global style is not correctly reloaded (I'm using sass) or the fact that weirdly some raw script Svelte components are injected into style tag in the dom
e.g. I find following tag in the dom
<head>
<style type="text/css" data-vite-dev-id="/Use...CollectionEdit.svelte?svelte&type=style&lang.css">
><script lang="ts">
import type { PermissionText } from '$lib/constants/rules.constants';
etc.
</script>
</style>
Another thing that is weird to me is that vite often detects changes in tsconfig.json and triggers new build even though the file has not changed in weeks
23:09:37 [vite] changed tsconfig file detected: /Users/.../admin/tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
Any clue or idea what I can track to solve this issue?
Alright solved it or at least find a workaround. The issue seems to have been linked to the fact that my Mac triggers incorrect refresh through fsEvents. Even tough there are no changes on the local file system, it requests full reload after 1-2 min. Disabling fsEvents in the vite.config.ts prevents this to happen and per extension, avoid the problem.
server: {
watch: {
useFsEvents: false
},
}
Why sass is not intepreted on full reload is to me unclear but, at least there is no more issue and hmr still works.
Here's the error I'm getting inside of my application:
Uncaught ReferenceError: module is not defined
at isHotReloading2 (isHotReloading.js:2:20)
at Form3.UNSAFE_componentWillMount (createReduxForm.js:511:16)
and here's what the error looks like in the chrome inspector:
I can't easily change the course code of redux-form (which is no longer being maintained) and neither can I remove it from my application. Is there a way to work around this error?
I've tried the following fixes in the vite.config.js file to no avail. Any ideas would be greatly appreciated. Thanks!
I ran into this same issue with Redux-form and fixed it as follows.
Create a file with the following
const isHotReloading = () => false;
export default isHotReloading;
In your vite.config file add the following to resolve.alias
{
find: './util/isHotReloading',
replacement: path.resolve(__dirname, './PATH_TO_FILE_ABOVE/reduxFormHotReload.js'),
},
This will disable the hot reload update functionality all together, so maybe you could improve the function above, but I didn't worry about it.
I try to import a node module inside an Angular 8 web worker, but get an compile error 'Cannot find module'. Anyone know how to solve this?
I created a new worker inside my electron project with ng generate web-worker app, like described in the above mentioned ng documentation.
All works fine until i add some import like path or fs-extra e.g.:
/// <reference lib="webworker" />
import * as path from 'path';
addEventListener('message', ({ data }) => {
console.log(path.resolve('/'))
const response = `worker response to ${data}`;
postMessage(response);
});
This import works fine in any other ts component but inside the web worker i get a compile error with this message e.g.
Error: app/app.worker.ts:3:23 - error TS2307: Cannot find module 'path'.
How can i fix this? Maybe i need some additional parameter in the generated tsconfig.worker.json?
To reproduce the error, run:
$ git clone https://github.com/hoefling/stackoverflow-57774039
$ cd stackoverflow-57774039
$ yarn build
Or check out the project's build log on Travis.
Note:
1) I only found this as a similar problem, but the answer handles only custom modules.
2) I tested the same import with a minimal electron seed which uses web workers and it worked, but this example uses plain java script without angular.
1. TypeScript error
As you've noticed the first error is a TypeScript error. Looking at the tsconfig.worker.json I've found that it sets types to an empty array:
{
"compilerOptions": {
"types": [],
// ...
}
// ...
}
Specifying types turns off the automatic inclusion of #types packages. Which is a problem in this case because path has its type definitions in #types/node.
So let's fix that by explicitly adding node to the types array:
{
"compilerOptions": {
"types": [
"node"
],
// ...
}
// ...
}
This fixes the TypeScript error, however trying to build again we're greeted with a very similar error. This time from Webpack directly.
2. Webpack error
ERROR in ./src/app/app.worker.ts (./node_modules/worker-plugin/dist/loader.js!./src/app/app.worker.ts)
Module build failed (from ./node_modules/worker-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'path' in './src/app'
To figure this one out we need to dig quite a lot deeper...
Why it works everywhere else
First it's important to understand why importing path works in all the other modules. Webpack has the concept of targets (web, node, etc). Webpack uses this target to decide which default options and plugins to use.
Ordinarily the target of a Angular application using #angular-devkit/build-angular:browser would be web. However in your case, the postinstall:electron script actually patches node_modules to change that:
postinstall.js (parts omitted for brevity)
const f_angular = 'node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
fs.readFile(f_angular, 'utf8', function (err, data) {
var result = data.replace(/target: "electron-renderer",/g, '');
var result = result.replace(/target: "web",/g, '');
var result = result.replace(/return \{/g, 'return {target: "electron-renderer",');
fs.writeFile(f_angular, result, 'utf8');
});
The target electron-renderer is treated by Webpack similarily to node. Especially interesting for us: It adds the NodeTargetPlugin by default.
What does that plugin do, you wonder? It adds all known built in Node.js modules as externals. When building the application, Webpack will not attempt to bundle externals. Instead they are resolved using require at runtime. This is what makes importing path work, even though it's not installed as a module known to Webpack.
Why it doesn't work for the worker
The worker is compiled separately using the WorkerPlugin. In their documentation they state:
By default, WorkerPlugin doesn't run any of your configured Webpack plugins when bundling worker code - this avoids running things like html-webpack-plugin twice. For cases where it's necessary to apply a plugin to Worker code, use the plugins option.
Looking at the usage of WorkerPlugin deep within #angular-devkit we see the following:
#angular-devkit/src/angular-cli-files/models/webpack-configs/worker.js (simplified)
new WorkerPlugin({
globalObject: false,
plugins: [
getTypescriptWorkerPlugin(wco, workerTsConfigPath)
],
})
As we can see it uses the plugins option, but only for a single plugin which is responsible for the TypeScript compilation. This way the default plugins, configured by Webpack, including NodeTargetPlugin get lost and are not used for the worker.
Solution
To fix this we have to modify the Webpack config. And to do that we'll use #angular-builders/custom-webpack. Go ahead and install that package.
Next, open angular.json and update projects > angular-electron > architect > build:
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
}
// existing options
}
}
Repeat the same for serve.
Now, create extra-webpack.config.js in the same directory as angular.json:
const WorkerPlugin = require('worker-plugin');
const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
module.exports = (config, options) => {
let workerPlugin = config.plugins.find(p => p instanceof WorkerPlugin);
if (workerPlugin) {
workerPlugin.options.plugins.push(new NodeTargetPlugin());
}
return config;
};
The file exports a function which will be called by #angular-builders/custom-webpack with the existing Webpack config object. We can then search all plugins for an instance of the WorkerPlugin and patch its options adding the NodeTargetPlugin.
I've just switched to Preact 8.4.2 and would like to get the React Developer Tools to work as well. In my webpack.config.js, I've added:
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat'
}
In my entry .js file, I've added:
require('preact/debug');
After adding these, I was getting an error when attempting to build:
Module parse failed: /myProject/node_modules/preact/src/preact.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { h, h as createElement } from './h';
| import { cloneElement } from './clone-element';
| import { Component } from './component';
# ./~/preact/debug.js 6:14-31
I only had .jsx files loading with babel-loader (not .js), so I added an additional entry in my webpack.config.js file:
{
test: /\.js$/,
include: /node_modules\/preact/,
loader: 'babel-loader'
},
After adding this entry, I'm able to build without issues, but my React Developer Tools just shows:
Waiting for roots to load...
to reload the inspector [click here]
Something is either up with your preact app or your webpack config. I just solved a similar problem.
First step, check if its your preact. If you have no console errors, drop your preact into this working boilerplate (you'll have to do a little rewiring to get it working) https://github.com/developit/preact-boilerplate
If after firing it up with your code, Devtools works as expected, then there is something wrong with your build. In that case it turns into a game of line by line updating your (mostly) working build to match preact-boilerplate.
In my case, I had included "src" in my webpack resolve. This threw no errors in terminal/console, and the build worked perfectly otherwise. Once I found it, devtools started working.
I am facing this issue. after running my unit test. This same error occurs wherever the static variable present. do you have any solution for this? or what causing this issue
similarly, the same error showing for the auto binding too.
ex:
handle = ()=>{
}
finally, I found the solution.
add this below lines in the babelrc file
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
And also if someone facing below issue, Kindly check your node version. it should be 8+ version. Because I faced this issue.
...this.state is undefined
^^^