1. Error description
Uncaught SyntaxError: Cannot use import statement outside a module
2. Error reason
Defines a JavaScript file, declares several variables, and uses modularity to export the variables
Let name = “Zhang Hua”
let age = 23
let sex = “female”
Export {name, age, sex}
then, import directly in the page file; Open the browser to access the page, and an error appears on the console
3. Solution
Need to add the attribute type="module" to the script tag
Vue error module build failed: error: node sass version 6.0.1 is incompatible with ^ 4.0.0. Solution
Error message:
ERROR Failed to compile with 1 errors 下午6:51:57
error in ./src/views/Login.vue
Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\[email protected]@sass-loader\dist\utils.js:77:13)
at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\[email protected]@sass-loader\dist\index.js:34:59)
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
Config":false}!./node_modules/[email protected]@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
13:3-17:5 14:22-397
@ ./src/views/Login.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Solution:
Find the problem: module build failed: error: node sass version 6.0.1 is incompatible with ^ 4.0.0
This problem is caused by the high version of SASS, so just change the version to the corresponding version according to the prompt. Here, change to version 4.0.0.
Step 1: find the package.json file in the IDE:
Step 2: find sass loader and change its version to 4.0.0
Finally, execute
cnpm install
Finally, execute
cnpm install
npm run dev
Vue eslint error ‘process’ is not defined no-undef Error
Add in eslintrc.js:
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"process": true
},
Just restart the project
There was a problem installing vue3.0. The problem still exists after exiting and reinstalling.
Solution: execute the following code to clear the NPM cache
npm cache clean –force
Create Vue cli project and report error command failed: Yarn
Solution 1:
Enter C:/users/administrator/in the windows environment
There is a file . Vuerc
Open this file to display
{
“useTaobaoRegistry”: true,
“packageManager”: “yarn”
}
Just manually change the configuration content yarn to NPM to change the package manager when the project is created
Solution 2:
Delete the. Vuerc file. When you create a Vue project for the first time, you will be prompted to select the configuration, and then select NPM.
Solution 3: enter CMD in Win + R to enter the command line interface
Enter command
npm install -g yarn
After success, the problem can be solved by re creating vue-cli4 project.
209150;”
/src/router/index.js:
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject)
return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch(err => err);
};
Uncaught ReferenceError: axios is not defined
npm install --save axios vue-axios
PS: it is impossible to add Axios alone. It needs to be combined with Vue Axios. The plug-in only integrates Axios into vue.js.
Error reason & Solution:
//wrong
axios.post(...)
//right
this.axios.post(...)
If the data IDs are different, and there are multiple identical name values or multiple identical Title values, an error will be reported
just do it
<a-auto-complete
v-model="ruleForm.companyId"
placeholder="Please Input"
optionLabelProp="label"
@select="onSelect"
@change="onChangeStore"
>
<template slot="dataSource">
<a-select-option
v-for="item in dataSource"
:key="item.id"
:value="item.id + ''"
:label="item.name"
>
{{ item.name }}
</a-select-option>
</template>
</a-auto-complete>
At home on weekends, I want to install Vue on the local computer, but I always report the error of ‘gyp’. All kinds of Baidu attempts always fail until I see an explanation: installing @ Vue/cli reports the error npmerr gyp err
(intrusion and deletion)
Sort out:
1. First delete three Vue related files in the local folder directory C:// user/xxx/appdata/roaming/NPM
2. Switch the NPM image source of Taobao back to the initial image source of NPM:
https://registry.npmjs.org/
npm config set registry https://registry.npmjs.org/
Then run NPM install - G @ Vue/cli and wait.
Error content
Uncaught TypeError: Cannot read property 'bottom' of null
at a (chunk-vendors.js:319)
at chunk-vendors.js:319
at Array.forEach (<anonymous>)
at IntersectionObserver.s.<computed>.IntersectionObserver.root (chunk-vendors.js:319)
Cause
the listening element cannot be found
PS: it seems that it only appears from the H5 platform
Solution
in the hide and unload life cycle of the page, cancel listening to elements
onHide:function(){
this.observer.disconnect();
},
onUnload: function(){
this.observer.disconnect();
},
Judge whether the element exists during listening, and clear the last listening
Vue.prototype.$lazyImg = function(fn){
this.observer.disconnect();//The previous ones must be cleared. Otherwise, elements that have been loaded will still be listened to, or if the listened to elements disappear, an error will be reported
uni.createSelectorQuery().in(this).selectAll('.lazy').boundingClientRect(data => {
if(data.length > 0){//If there is no lazy element on the page, it will report an error directly, which is really fucking outrageous!
this.observer.observe('.lazy', (res) => {
if(res.intersectionRatio > 0){//sometimes, intersectionRatio is undefined
fn(res.dataset)
}
})
}
}).exec();
}
Problem phenomenon
The project is a front-end project built with Vue/cli3 scaffold, and Vue version is 2.6.10.
Ie11 error reporting problems are as follows:
(there was no screenshot in the error report at that time, but someone else’s picture was used)
It’s annoying that there’s no way to check mistakes like this
Baidu a pile, all copy to copy, the key has not been able to solve the problem, shit! Omnipotent Google up
In fact, this problem is obviously a syntax error, that is, the problem that ie does not support, ie garbage
Since it’s a syntax problem, it’s a compilation problem. Let’s directly compile the corresponding package, but which package is it
Here’s the point: when you click the error message, you will find that the place where the breakpoint is is the place where the error is reported. That must be the problem here, but this is the compiled code. How to check which package is a headache!
When I was having a headache, I found that the comment above was the name of the package???
It’s like discovering a new world
It’s him. This picture is not my error information. My error information is
./node_modules/[email protected]@js-base64.jsSince the package with the problem is found, specify that it be compiled; Using webpack
Directly configure the compiled code in vue.config.js
transpileDependencies: [
/[/\\]node_modules[/\\][email protected]@js-base64[/\\]/,
],Then directly NPM run serve
be accomplished! It’s done! go off work!
This is a DOM loading problem, introduces Echarts because when DOM is not loaded, an error will be reported when option gets the element and init starts to get it. The solution can be tried:
