Developing a vue application with the eslint-plugin-vue, I am getting the following error when trying to use the comment shortcut in VS code over a template section that contains a nested comment:
Parsing error: nested-comment. eslint-plugin-vue
Is there a setting in the linter config file that I can change to allow commenting over nested comments or do I need to restart the linter somehow?
Update: it would appear if I added the following line to my .eslintrc.js file, from this site https://eslint.vuejs.org/rules/no-parsing-error.html#vue-no-parsing-error I should not be seeing this error:
'vue/no-parsing-error': ["error", {
'nested-comment': false
}]
However, it still remains. I do not have the option to run ESLint restart lint server in my command palette.
If you do have a .eslintrc.cjs file or anything alike, you could probably put that in there
/* eslint-env node */
module.exports = {
[...],
rules: {
'vue/html-comment-indent': 'off',
},
}
off is to say that you don't even want to hear about it anytime soon.
Otherwise, you can also use 'warn', if you want a warning.
Here is an official reference: https://eslint.vuejs.org/rules/html-comment-indent.html#vue-html-comment-indent
I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample.
<div class="chat-container clearfix" id="chat">
<div class="people-list" id="people-list">
<chatlist-component></chatlist-component>
</div>
<div class="chat">
<router-view></router-view>
</div>
</div>
chat list component will load friend list from the server. Here is my app.js file;
Vue.use(VueRouter)
const router = new VueRouter({
routes,
linkActiveClass: "active"
});
import ChatComponent from './components/ChatComponent';
const routes = [
{ path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
];
Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));
const app = new Vue({
el: '#chat',
router
});
And Chat list component template code
<li class="clearfix" v-for="user in users">
<img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" />
<router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}">
<div class="name">{{user.name}}</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</router-link>
</li>
It works fine until I switch to another user. When I click on any router list from chatlist component it works fine but throws following error to console.
app.js:19302 [Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"
Thanks in advance
First, these errors only come out in non-production builds, however they indicate a problem that should be resolved before production release.
The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded. As I understand it, this can happen usually for one these reasons:
it is being loaded/packed into the bundle by webpack and also loaded externally (not via webpack)
it is being loaded by something you include (e.g. vuetify, vue-test-utils, vue-cli-electron-builder) one way and by your webpack config another way (e.g. absolute vs relative paths, common.js vs esm.js vue files, runtime-only vue vs compiler+runtime vue)
If you click on that line (it was app.js:19302 in your output above) and put a breakpoint where the message is coming out, you can see the list of modules in the stack traceback to see if there's more than one path to Vue listed. For example, see that the top three modules have a different path below (but are all part of Vue):
If you see Vue showing up in two or more different ways, it demonstrates that more than one instance of Vue is loaded. Vue only supports a single instance, and can produce these error messages if more than one is loaded.
There are several links to issues included above, the Vuetify issue was the one I filed. In that case, Vuetify requires Vue and was loading it differently than I was. Usually the fix is to check your webpack config where Vue is specified (or isn't) and try to make it match the way the other copy is being included (e.g. absolute vs relative path, or packed vs external).
This error was happening to me because I was using Git submodules in my project and I had the following folders:
./node_modules - this is for the main project. There was vue installed in these node_modules.
./my_git_submodules/vue_design_system/node_modules - design system that provides basic components (also uses vue). Vue was also installed here!!
So because both:
./node_modules/vue and
./my_git_submodules/vue_design_system/node_modules/vue
existed, running npm run serve (vue-cli-service build underneath) built two instances of Vue. This was
a really nasty issue because it broke reactivity in certain cases
(ie. you click a button and nothing happens - you just get the
$listeners readonly error)
Quick fix:
removing node_modules in the child folder (vue_design_system) and running npm run serve worked for me.
Long term fix:
you'll probably need to make Webpack ignore nested node_modules folders by adding a rule in vue.config.js
Adding this to vue.config.js, worked for me.
const path = require('path')
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}
I faced the same problem. For me, as I installed a local module using
yarn add ../somemodule --force
Seems this command will copy the whole module directory include the node_modules sub-directory. That causes the duplication of the same version of "vue" module. And in the browser devtool I can see multiple sources of the module.
For me, the solution is manually to delete the node_modules every time after install the local module.
In my case, I was migrating from a project that didn't use VueCLI. In that project, I imported vue from a CDN <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>. In my Vue CLI project, I had copied and pasted my whole index.html file to the Public folder. Vue CLI has it's own way of importing vue so they were clashing. I simply removed the script and the problem was solved.
I had the same problem as above. I am using git submodules and I used
yarn add ./submodule
Somehow there ended up being a node_modules directory in the ./submodule directory and that confused everything.
And it was loading two Vue instances.
This can also happen because you are using npm link to use your unpublished vue packages. Basically identical to #walnut_salami explanation.
The fix for this problem is by moving to this way of including unpublished modules.
Looks like as if there are many possible answers.
I added a npm package manually to the node folder and the problem was the missing npm i command. After using the install command, everything worked fine.
In my case, this error arose after module federating my components.
I solved it by sharing vue in the component receiver to the component supplier.
e.g
webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "dashboard",
remotes: {
web_common: "web_common#http://localhost:8081/remoteEntry.js"
},
shared: {
vue: { // this solved my issue.
eager: true,
singleton: true,
requiredVersion: deps.vue
},
}
}),
]
}
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I generate a project using vue-cli and then run vue add vue-material.
Then I add MdButton and check in the browser
// work
<md-button class="md-icon-button">button</md-button>
Then I add MdIcon and check in the browser
// not work
<md-button class="md-icon-button">
<md-icon md-src="/assets/icons/svg/telegram.svg"></md-icon>
</md-button>
The compilation succeeds, but an error appears in the browser
Uncaught (in promise) The file /assets/icons/svg/telegram.svg is not a
valid SVG.
svg is definitely valid! How to fix?
I ran into this recently; as Leonardo mentioned it was due to the newly-added MIME type check. For some reason, my SVG file was being served up with Content-Type: text/html.
To fix it, I had to change my icons to use require, which (if I understand correctly) causes it to go through a different loader in Webpack which fixes the MIME type. (See here for a bit more info.) Using OP's example, I would change:
<md-icon md-src="/assets/icons/svg/telegram.svg" />
to
<md-icon :md-src="require('/assets/icons/svg/telegram.svg')" />
It seems an issue created because a mime type.
https://github.com/vuematerial/vue-material/pull/1942/commits/74c45f2150e7fc978e536dbc03549d0e8abff47c
This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.
I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with
{
"presets": ["es2015"]
}
I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.
I thought the es2015 npm packages I have should be taking care of that ES6 syntax?
In the gulp file the task that I thought was suppose to take care of that is;
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.(jsx|js)')
.pipe(babel({
compact: false
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
The gulp task that is responsible for launching this is:
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
I am puzzled as to what could be wrong here?
Any ideas would be much much appreciated!
There are two problems:
Gulp seems like doesn't support you syntax for file extension mask:
gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working
You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working
Update
Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid
gulp.src('js/*.#(js|jsx)')
where # means match exactly one occurrence of pattern after #.
In your case there was no qualifier presented