[vite] Internal server error:options.devServer. transformWidthEsBuild is not a function…
Vite2.x upgrade Vite3.x error reported this message
Solution:
In addition to upgrading Vite itself, it is best to upgrade all plugins involved in Vite in package.json devDependencies development dependencies, such as @vitejs/plugin-vue, @vitejs/plugin-legacy, etc.
If not yet solved, try to upgrade the plugins corresponding to Vite involving eslint and so on.
ERROR Error: [copy-webpack-plugin] patterns must be an array
When installing mars3d, you need to install the copy webpack plugin plug-in
and then configure it in vue.config.js report an error: Error: error: [copy webpack plugin] patterns must be an array
the current node version is 12.2.0
const plugins = [
// Identifies the home directory where cesium resources are located, which is needed for resource loading, multithreading, etc. inside cesium
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
}),
// Cesium-related resource directories need to be copied to the system directory (some CopyWebpackPlugin versions may not have patterns in their syntax)
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
]
})
];
new CopyWebpackPlugin is changed as follows:
const plugins = [
// Identifies the home directory where cesium resources are located, which is needed for resource loading, multithreading, etc. within cesium
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
}),
new CopyWebpackPlugin([
{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
])
];
Run successfully
Vue3 npm ERR code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
1. Vue3 create project error
vue create test1
npm ERR! code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MACThe detailed error is as follows:
npm ERR! code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
npm ERR! 2240:error:1408F119:SSL routines:ssl3_get_record:decryption failed or bad record mac:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:677:
npm ERR!
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\qianle102\AppData\Local\npm-cache\_logs\2022-05-28T07_44_19_121Z-debug-0.log
ERROR Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
at ChildProcess.<anonymous> (C:\Users\qianle102\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\executeCommand.js:138:16)
at ChildProcess.emit (node:events:527:28)
at ChildProcess.cp.emit (C:\Users\qianle102\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
at maybeClose (node:internal/child_process:1092:16)
at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)The second error is the error of the python download command. That is, the python command is used during the installation of vue3.
If Python is not installed on this computer, an error will be reported.
2. Solutions
Download the phthon installation package and install the python framework
Error message
Use the white screen of the web page packaged by vite, and the console reports an error.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.
reason
MIME type errors are generally a problem with native windows development. I encountered this after opening it with Python’s built-in http.server on Windows.
Solution
Deploy the packaged files in a formal server environment (such as nginx and Apache)
Vue3 error in defineprops
When using vue3 for the first time, it is found that using defineprops will report an error
Solution
1. Update eslint
npm update eslint
npm update eslint-plugin-vue
2. Modify package.json
"eslintConfig": {
"root": true,
"env": {
"node": true,
"vue/setup-compiler-macros": true
},The console in the vue3 project reported this error
reason: history is not defined in the router file
Solution:
Modify the following codes:
import { createRouter } from 'vue-router';
const router = createRouter({
routes,
});
to:
import { createRouter , createWebHashHistory } from 'vue-router';
const router = createRouter({
history:createWebHashHistory(),
routes
})
reason
Due to the end of line style configuration, endoofline configuration has the following four options:
lf – line feed only (\n), which is common in Linux, MacOS and git repos
CRLF – carriage return + line feed character (\r \n), and windows
CR – carriage return character only (\r), Rarely use
auto – keep the existing end of the line (the mixed values in a file are standardized by looking at the content used after the first line)
Solution:
Configure endOfLine: ‘auto’ in prettier.config.js:
module.exports = {
semi: false, // unterminated semicolon
singleQuote: true, // single quotes
quoteProps: 'as-needed',
trailingComma: 'none', // final comma
// The point is that this one should be configured as auto
endOfLine: 'auto'
}
Solution 1: in eslintrc. JS env add configuration
env: {
'vue/setup-compiler-macros': true // New
}An error may be reported when the development service is restarted after configuration:
Environment key “vue/setup-compiler-macros” is unknown
Recompile again and the error disappears.
Solution 2: add global configuration in eslintrc.js
globals: {
defineProps: "readonly",
defineEmits: "readonly"
}Project scenario:
using webpck5 package vue3 plug-in to import Vue loader appears
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
terms of settlement:
It can be solved by putting Vue loader in the first place
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
PS E:\vue3-vite\my-app> npm run dev
> [email protected] dev
> vite
events.js:292
throw er; // Unhandled 'error' event
^
Error: spawn E:\vue3-vite\my-app\node_modules\esbuild\esbuild.exe ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn E:\\vue3-vite\\my-app\\node_modules\\esbuild\\esbuild.exe',
path: 'E:\\vue3-vite\\my-app\\node_modules\\esbuild\\esbuild.exe',
spawnargs: [ '--service=0.12.22', '--ping' ]
}
npm ERR! code 1
npm ERR! path E:\vue3-vite\my-app
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c vite
npm ERR! A complete log of this run can be found in:
npm ERR! D:\node\node_cache\_logs\2021-08-26T02_24_14_376Z-debug.logSolution: node node_modules/esbuild/install.js
PS E:\vue3-vite\my-app> node node_modules/esbuild/install.js
PS E:\vue3-vite\my-app> npm run dev
> [email protected] dev
> vite
Pre-bundling dependencies:
vue
(this will be run only when your dependencies or config have changed)
vite v2.5.1 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 1645ms.
report errors
Error introducing elementui in vue3 project
reason
You need to add a reference (use/component) before mounting
Before modification
After modification
Error reporting solution
The following warning is reported in component communication (child to parent) in Vue3.
[Vue warn]: Extraneous non-emits event listeners (changeParentProps) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
Solution: Just declare the custom event name
emits: [‘changeParentProps’]
<template>
<div>
Subcomponents
</div>
<button @click="changeParentProps"> Changes the parent component's passed props</button>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
emits: ['changeParentProps'],
props: {
data: {
type: String,
default: ''
}
},
setup (props, { emit }) {
// console.log(props)
const changeParentProps = () => {
emit('changeParentProps', '123')
}
return {
changeParentProps
}
}
})
</script>