Hello I was just running my website and I have 20 errors like this :
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
error clear vue/comment-directive
Any idea what is the problem here?
Rules that allow eslint to use eslint-disable functionality in the 'template' are included in all eslint plugin.It supports usage of the following comments:
eslint-disable
eslint-enable
eslint-disable-line
eslint-disable-next-line
The error you are getting can be solved if you can turn off the vue/comment-directive of the default rules by adding a custom rule in the .eslintrc.js file
rules: {
'nuxt/no-cjs-in-config': 'off',
'vue/comment-directive': 'off'
}
Related
I use Vue3 Reactivity Transform macros and defineExpose() in Vue2 Project By unplugin-vue2-script-setup. I hope I can use eslint object-shorthand rules , but it was error when I use $$ and the key and value of property are same. What should I do to make ESLint not report error.
my code:
defineExpose({ myCode: $$(myCode) })
ESLint config:
rules: {
'object-shorthand': ['error', 'always'],
},
I find that code will be transformed to defineExpose({ myCode: (myCode) }) by reactivity-transform. The key myCode and value myCode are the same. So it could have been simplified but it wasn't. ESLint object-shorthand will throw error.
In ESLint object-shorthand source code, it uses AST Node property shorthand, if the key and value are same ,and the value of shorthand is false,it will throw error. Maybe , if the compiler result of reactivity-transform is simplified , the ESLint object-shorthand rules will not error ?
I try without success to apply a prerendering (or a SSG) to my Vue3 application to make it more SEO friendly.
I found the vue-cli-plugin-prerender-spa, and when I try it with the command line: vue add prerender-spa I have the error:
ERROR TypeError: Cannot read properties of undefined (reading 'endsWith')
After that I tried prerender-spa-plugin but I have an error when I make a npm run build:
[prerender-spa-plugin] Unable to prerender all routes!
ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /Users/myusername/Workspace/myproject/node_modules/#vue/cli-service/lib/commands/build/index.js:207:23
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/webpack.js:148:8
at /Users/myusername/Workspace/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3
What do you think about this? Do you have any idea?
Nuxt3 is a really powerful meta-framework with a lot of features and huge ecosystem. Meanwhile, it's in RC2 right now so not 100% stable (may still work perfectly fine).
If your project is aiming for something simpler, I'd recommend using Vitesse. It may be a bit more stable and it's probably powerful enough (check what's coming with it to help you decide).
Some solutions like Prerender also exist but it's paid and not as good as some real SSG (/SSR). Also, it's more of a freemium.
I struggled with the same error output until I found the prerender-spa-plugin-next. Then I notice the latest version of prerender-spa-plugin was published 4 years ago and prerender-spa-plugin-next is continually updating. It seems like that prerender-spa-plugin-next is a new version of prerender-spa-plugin with the same functions. So I use prerender-spa-plugin-next instead of prerender-spa-plugin then everything works fine!
Here is my step:
install the package
npm i -D prerender-spa-plugin-next
modify vue.config.js like
const plugins = [];
if (process.env.NODE_ENV === 'production') {
const { join } = require('path');
const PrerenderPlugin = require('prerender-spa-plugin-next');
plugins.unshift(
new PrerenderPlugin({
staticDir: join(__dirname, 'dist'),
routes: ['/'], //the page route you want to prerender
})
);
}
module.exports = {
transpileDependencies: true,
configureWebpack(config) {
config.plugins = [...config.plugins, ...plugins];
},
};
build
npm run build
Then check the index.html under the dist folder you can see the page is prerendered.
Further usage refers to the homepage of prerender-spa-plugin-next
Found and fix about the scss files to import.
In nuxt.config.ts use :
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "#/assets/scss/_variables.scss";
#import "#/assets/scss/my-style.scss";
`
}
},
},
}
Now my 2 mains issue are : how to install vuetify properly, currently syles and components seems working but the JS not, for example, accordions don't expands on click.
And second topic is to have a i18n module, it seems that vue-i18N no longer works.
Thanks.
I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo
I want to add a linter rule that checks that the tags are in this order: <script>, <template> and <style>.
Vue's default is <template> first, but I want the <script> because I consider it more important.
It'd be awesome that this could be auto-fixed.
I couldn’t find this rule for eslint, and if there isn't any I may consider creating it.
eslint-plugin-vue supports the component-tags-order rule for this. It's already included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended" rule sets (if using a Vue CLI scaffolded project).
The config to enforce <script>, <template>, and then <style>:
// .eslintrc.js
module.exports = {
rules: {
'vue/component-tags-order': ['error', {
order: [ 'script', 'template', 'style' ]
}],
}
}
Note the rule does not implement auto-fixing, so you'll only get linter errors.
However, there's a command-line utility (v-change-tags-order) that you could run to rearrange the tags:
npx v-change-tags-order
I have started a new vue-cli project with
vue create -n tailwind-demo
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
I have also add the following postcss.config.js:
module.exports = {
plugins: [
require("postcss-preset-env")({ stage: 0 }),
require("tailwindcss")(),
require("autoprefixer")()
]
};
When i run the yarn lint command it got the follow errors
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:3:5:
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:4:5:
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:5:5:
How can i import the plugins or how should i configure the eslint in Vue CLI for the postcss.config.js?
I have tried something like
import tailwindCss from "tailwindcss";
But i got a SyntaxError: Unexpected identifier while building.
It seems to work with the following postcss.config.js
module.exports = {
plugins: {
"postcss-preset-env": {
stage: 0
},
tailwindcss: {}
}
};