Electronic version 16+
There is a problem when using the remote module. The code is as follows:
const BrowserWindow = require(‘electron’). remote. BrowserWindow；
report errors:
Uncaught TypeError: Cannot read property ‘BrowserWindow’ of undefined
Solution:
1. Install remote:
npm install –save @electron/remote
2. demo2.js：
3. main.js：
It’s ready to run. The version of electron is updated too fast, and the rules are changed too fast.
Solution: when using Vue 3 script setup, eslint reports the error ‘defineprops’ is not defined
Vue 3’s script setup syntax introduces compiler macros of defineprops, definemits, defineexpose, withdefaults. However, in some cases, eslint will report an error. The above compiler macro functions are not defined.
This article will introduce two solutions to solve this problem (assuming that your project is initialized with Vue CLI).
Step 1. Check the version of eslint-plugin-Vue
npm list eslint-plugin-vue
If the version is in V8 Above 0.0, jump to step 2, otherwise go directly to the content of step 3.
Step 2. Version is V8.0.0+
Open eslintrc.JS file and modify it as follows:
env: {
node: true,
// The Follow config only works with eslint-plugin-vue v8.0.0+
"vue/setup-compiler-macros": true,
},
Step 3. Version is V8 Below 0.0
Open eslintrc.JS file and modify it as follows:
// The Follow configs works with eslint-plugin-vue v7.x.x
globals: {
defineProps: "readonly",
defineEmits: "readonly",
defineExpose: "readonly",
withDefaults: "readonly",
},
If your version of
eslint-plugin-vueis under V8, I don’t recommended you to upgrade the version，especially you had used a lot of ts dependency.
1. NPM error reporting
npm ERR! code 1
npm ERR! path D:\Workspaces\WebstormProjects\shop-ui\buyer\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack at PythonFinder.failNoPython (D:\Workspaces\WebstormProjects\shop-ui\buyer\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (D:\Workspaces\WebstormProjects\shop-ui\buyer\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack at callback (D:\Workspaces\WebstormProjects\shop-ui\buyer\node_modules\graceful-fs\polyfills.js:299:20)
npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "D:\\Workspaces\\WebstormProjects\\shop-ui\\buyer\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd D:\Workspaces\WebstormProjects\shop-ui\buyer\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache\_logs\2022-01-28T09_54_16_535Z-debug.log
2. Solution
npm install --global --production windows-build-tools
When using ecarts, the console reports an error ` resize ` should not be called during main process
This situation may occur in the scenario where echarts is used in combination with Vue 3, especially after the echarts instance is wrapped with Ref.
This article is excerpted from another blog post, the use of echarts 5 in the development of Vue 3
1. Problem analysis
In general, the encapsulation of ecarts chart does not need to expose the ecarts object to the rendering context. If you do intend to declare an echots object as a response, use shallowref instead of ref:
// GOOD
const chart = shallowRef<echarts.ECharts>();
// BAD
const chart = ref<echarts.ECharts>();
If you do not use shallowref, the command line may report an error ‘resize’ should not be called during main process; In fact, any instance created by a third-party library should be processed responsively using shallowref instead of ref.
Error reporting description
After running NPM run serve, the interface has been called in the network: http:// * * */sockjs node/info?t=***
Error reporting reason
Sockjs node is a JavaScript library that provides cross browser JavaScript APIs and creates a low latency, full duplex communication channel between browsers and web servers.
There are related calls in the dependent source code
Solution
CTRL + P open file node_modules\sockjs-client\dist\sockjs.JS
Ctrl + G jump to line 1611
refer to the figure below, comment out the call of line 1611, and restart the project
Today, I reported an error with webpack dev server in the project to visually check the version problem
the webpack version used in the project is "webpack": "^ 4.28.4"
the default is "webpack dev server": "^ 4.7.3" , and the reduced version is "webpack dev server": "^ 3.1.14" . The problem is solved
Then start the error report:
check the data and find that the startup command is changed to NPX webpack server -- config webpack dev.js
I used style-loader in the project today, and found an error in packaging: typeerror: this Getoptions is not a function
visual inspection is a version problem. The default version of style-loader is 3.3.1. The reduced version is 2.0.0, and the problem is solved
PS: the webpack version used is 4.28.4
The following commands are required for normal angular installation of echarts
1 npm install echarts -S
2 npm install ngx-echarts -S
However, an error prompt is found after installation, and the type is marked in red in the file reference
1. The following commands need to be executed
1 npm install echarts -S
2 npm install ngx-echarts -S
3 npm install @types/echarts -D2. Introduce modules into modules (such as app.Module.TS):
1 import { NgxEchartsModule } from 'ngx-echarts';
2 @NgModule({
3 imports: [
4 ...,
5 NgxEchartsModule
6 ],
7 })
8 export class AppModule { }There is no problem with the following code in Google browser and an error is reported in Firefox:
const doms = document.getElementsByClassName("cesium-baseLayerPicker-dropDown")
for (let i in doms) {
const dom = doms[i]
if (dom) {
$(dom).addClass("scroll-1")
}
}
The following modifications are required
$(".cesium-baseLayerPicker-dropDown").addClass("scroll-1")
Problem Description:
https://github.com/facebook/create-react-app/issues/11762#issue-1080972271
i.e.
Set the proxy in package.json, and then start the project through npm start or yarn start, the error is as follows:
>yarn start
yarn run v1.22.10
$ react-scripts start
Attempting to bind to HOST environment variable: test.localhost
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string.
error Command failed with exit code 1.
Solution: Don’t set the proxy in package.json, but set it in src/setupProxy.js, and delete the proxy in package.json, and finally restart npm start.
ERROR Failed to compile with 1 error PM 6:26:46
This relative module was not found:
* ./RoleFormDialog in ./node_modules/cache-loader/dist/cjs.js??ref–13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref–1-1!./src/views/Role/List.vue?vue&type=script&lang=js
Solution:
Also change the directory where the source file is located to any other name (here it is changing Role to RoleAAA) and then change back to the original name (here it is changing back to Role), yarn will automatically clear the cache and the problem is solved.
Arguments:
Directory: D:\xampp\htdocs\qilin\electron5g_win\node_modules\electron
Output:
RequestError: read ECONNRESET
Solution:
yarn install installation error cannot find electron:
yarn add –dev electron Install step by step first
yarn install and then install all