gridsome / gridsome/gridsome

vue-remark plugin not functioning when set up as instructed

Open
#1,472 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8.5k
Forks
466
PR merge metrics
No merged PRs in 30d

Description

## Description

I installed `vue-remark` and followed the instructions given in the [Usage](https://gridsome.org/plugins/@gridsome/vue-remark#usage), literally copy and pasting the examples given for `gridsome.config.js`, the `Documentation.vue` template, and the Markdown file (the first 3 code blocks in the document). I also created the implied files `~/components/YouTube.vue`, `~/sections/AboutUs.md`, and `~/data/youtube.json`.

But when I try to view the rendered page, nothing in `` displays and I get a console error that `Property or method "data" is not defined on the instance but referenced during render.`

It seems one issue is that the sample Markdown code doesn't have blank lines in-between the regular text and code. Inserting blank lines everywhere seems to fix this but results in a different error:
```
error in ./src/sections/AboutUs.md

Module parse failed: Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> ---
| title: "About Us"
| ---
```

Clearly it's trying to parse the Markdown file as a Vue file. I don't know how to tell it not to.

### Steps to reproduce

I created a fresh Gridsome project to test this:
```bash
gridsome create gridtest
cd gridtest
gridsome develop
yarn add '@gridsome/vue-remark'
```
Then I copied and pasted code for the 3 files, added the 3 implied files, ran `gridsome develop`, and viewed the resulting page at [localhost:8080/docs/example/](http://localhost:8080/docs/example/).

You can see the exact code here: [NickSto/gridsome-vue-remark-bug](/NickSto/gridsome-vue-remark-bug/tree/983b9809dc7ced538e510978523756b5030d661d) (the next commit adds the blank lines).

### Expected result

The page displays as implied, with the Markdown from `AboutUs.md` inserted.

### Actual result

I got the errors described above.

### Environment

```
$ gridsome info

System:
OS: Linux 5.6 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Binaries:
Node: 14.15.1 - ~/bin/node
Yarn: 1.22.10 - /home/linuxbrew/.linuxbrew/bin/yarn
npm: 7.5.4 - ~/bin/npm
Browsers:
Chrome: 89.0.4389.114
Firefox: 87.0
npmPackages:
@gridsome/vue-remark: ^0.2.6 => 0.2.6
gridsome: ^0.7.0 => 0.7.23
```

```
$ gridsome --version
@gridsome/cli v0.3.4
gridsome v0.7.23
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the failure in a fresh project using gridsome.config.js, Documentation.vue, and src/sections/AboutUs.md, following the linked Usage examples and the reported commands. Inspect how @gridsome/vue-remark handles AboutUs.md and VueRemarkContent; done means the Markdown renders at /docs/example/ without the console or module-parse errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.