Netlify dev won't run with Netlify template called awake-template

cyberc2 · March 4, 2020, 7:10pm

Hello,

I’m very new to this world so please be patient if my question comes across as very basic. I’m currently running WSL (Windows Subsystem for Linux) on Windows 10. I’m trying to work with a JAMstack Netlify template called Awake, A Nuxt Blog template (https://templates.netlify.com/![awake-blog-template|690x369](upload://ayuEThQOVw088ZFDOqL3rju715I.jpeg) -nuxt/). I would cd to the template directory and running ( sudo apt install npm has been run prior) npm install netlify-cli -g to get the following errors:

ERROR in ./cms/netlify/mixins.js
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/awake-template/cms/netlify/mixins.js
  30:5  error  Unnecessary try/catch wrapper  no-useless-catch
  67:5  error  Unnecessary try/catch wrapper  no-useless-catch

✖ 2 problems (2 errors, 0 warnings)
ERROR in ./cms/netlify/post.js
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/awake-template/cms/netlify/post.js
  12:3  error  Expected blank line between class members  lines-between-class-members

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.
ERROR in ./components/Markdown.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/awake-template/components/Markdown.vue
   2:39  warning  Attribute ":template" should go before "class"  vue/attributes-order
  61:38  error    Strings must use singlequote                    quotes
  62:41  error    Strings must use singlequote                    quotes

✖ 3 problems (2 errors, 1 warning)
  2 errors and 1 warning potentially fixable with the `--fix` option.
ERROR in ./components/ModalOverlay.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/awake-template/components/ModalOverlay.vue
  15:51  warning  Attribute "@click" should go before "aria-label"  vue/attributes-order
  21:43  warning  Attribute "@click" should go before "class"       vue/attributes-order
  26:11  warning  Attribute "@click" should go before "class"       vue/attributes-order
  53:24  error    Strings must use singlequote                      quotes

✖ 4 problems (1 error, 3 warnings)
  1 error and 3 warnings potentially fixable with the `--fix` option.
ERROR in ./components/SiteNav.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/awake-template/components/SiteNav.vue
  31:11  warning  Attribute "@click" should go before "class"                    vue/attributes-order
  33:11  error    Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is

✖ 2 problems (1 error, 1 warning)
  0 errors and 1 warning potentially fixable with the `--fix` option.
ERROR in ./layouts/default.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/home/awake-template/layouts/default.vue
  50:20  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

I ran npm install vue-template-compiler, sudo npm i vue@latest --save, sudo npm i vue-server-renderer@latest --save, sudo npm install eslint-loader --save-dev and followed some of the suggestions provided but still no luck. Client side compiles with errors, while the Server side compiles successfully. Long story short I’m trying to get this template to work locally and once completed i can push changes and publish template to my Github repo so it can be presented to the world. I have provided a screen shot, right now i’m getting an overlay of the code errors with the template site in the background. Please help and thanks in advance.

andylemaire · March 4, 2020, 8:51pm

Hey @cyberc2, do you have ESLint installed locally? The compiling fails because of all these warnings/errors so you probably need to solve those first.

Or you could disable ESLint if you prefer that, here’s a link to the configuration docs:

cyberc2 · March 4, 2020, 9:18pm

Thanks for the reply @andylemaire, yes i have installed ESLint within the template directory but still receiving that error. I have tried running it within Visual Studio Code and via WSL outside VSC with the same result.

andylemaire · March 4, 2020, 9:19pm

ESLint doesn’t fix these JavaScript errors, you will have to do it.

cyberc2 · March 4, 2020, 9:25pm

As stated very new to all this and jumping into the deep end. Was just hoping to get the template up and running and modifying the template. This has been a “learning cliff” for me

andylemaire · March 4, 2020, 9:28pm

Of course, we’re here to help!

As I said, you have 2 options:

Disable ESLint
Solve the warnings/errors

There’s probably no ESLint configured server side so it’s not getting stuck, but locally it does.

cyberc2 · March 4, 2020, 9:43pm

Thanks!!!

So with that being said I would like to slove the warnings \error. So for instants
below is an example of the first error line 6 of DisqusComments.vue is complaining, would I change @click=“displayed = true” to 6 @click=“displayed = false” ???

I just need help learning to fish per-say so i can continue going through and fixing the errors

WARN Compiled with 7 warnings friendly-errors 16:16:02

Module Warning (from ./node_modules/eslint-loader/dist/cjs.js): friendly-errors 16:16:02

/home/awake-template/components/DisqusComments.vue
6:7 warning Attribute “@click” should go before “class” vue/attributes-order

1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the --fix option.

DisqusComments.vue
1.
2.

3. <a
4. v-if="$siteConfig.disqus.loadingStrategy === ‘button’ && !displayed"
5. class=“button is-fullwidth is-outlined is-large”
6 @click=“displayed = true”

andylemaire · March 4, 2020, 9:49pm

Just reorder them as stated here.

cyberc2 · March 4, 2020, 9:58pm

Ok… just a bit confused as this is a template, when this template is deployed it works as is. I’m receiving this error when trying to run netlify dev on my local machine

andylemaire · March 4, 2020, 10:02pm

The template is fine but it’s being linted or evaluated, and you’re receiving warnings or errors on how to improve the code.

Depending on the configuration, the compilation may abort due to errors (see the documentation above).

You might need to read up on JavaScript and ESLint first…

cyberc2 · March 4, 2020, 10:17pm

Alright I will start with the document and see how it goes. I really appreciate your help