gridsome / gridsome/gridsome

vue-remark uses wrong root dir, relative paths are not resolving correctly

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

Description

## Description

Since using vue-remark my relative paths used in the .md files are not handled correctly. Right now for it to work i need to use the full relative path of a file.

This is an issue when using a CMS like forestry, right now after adding an image I need to edit the src for it to work.
This is quite unintuitive when working in a team.

Here is the error msg for importing a module:

```
ERROR Failed to compile with 1 errors15:32:24
output.js:103
This dependency was not found:
output.js:103

output.js:103
* /src/components/Test.vue in ./node_modules/babel-loader/lib??ref--15-0!./node_modules/vue-loader/lib??ref--17-0!./node_modules/@gridsome/vue-remark/lib/loader.js??ref--17-1!./data/post/journal/use-gridsome-vuejs.md?vue&type=custom&index=0&blockType=vue-remark-import
output.js:103

output.js:103
To install it, you can run: npm install --save /src/components/Test.vue
```
Note: this also fails when using '~/src/...' as filepath

Furthermore **Image paths are not resolved correctly anymore**.
Images will not be shown as I assume gridsome is looking in the wrong dir (baseDir option value of vue-remark plugin).

### Steps to reproduce

1. clone repo https://github.com/kotgakapainor/vue-remark-bug-demo
2. npm install
3. npm run develop
4. navigate to http://localhost:8080/journal/use-gridsome-vuejs/
5. here you can see that the images are not working as this page is rendered with vue-remark
6. go to `use-gridsome-vuejs.md` and replace `import Test from "../../../src/components/Test.vue"` with `import Test from "~/src/components/Test.vue"`
7. Now the build fails as the module could not be found

### Expected result

As stated in https://gridsome.org/plugins/@gridsome/vue-remark#basedir the desired result should be a working relative path based on the **root dir of the project**.

`import Test from '/src/components/testComponent.vue'` should work
`import Test from '~/src/components/testComponent.vue'` should work
`import Test from '../../../src/components/testComponent.vue'` should work

`![](/uploads/testimg.jpg)` should work
`![](~/uploads/testimg.jpg)` should work
`![](../../../uploads/testimg.jpg)` should work

### Actual result

Seems like the relative path root (__dirname) is changed to the value of the setting options.baseDir (https://gridsome.org/plugins/@gridsome/vue-remark#basedir).

`import Test from '/src/components/testComponent.vue'` **not working**
`import Test from '~/src/components/testComponent.vue'` **not working**
`import Test from '../../../src/components/testComponent.vue'` is working

`![](/uploads/testimg.jpg)` **not working**
`![](~/uploads/testimg.jpg)` **not working**
`![](../../../uploads/testimg.jpg)` is working

Without vue-remark, the relative paths of images are handled correctly (see other pages).

### Environment

```
$ npx gridsome info

System:
OS: Windows 10 10.0.18363
CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@gridsome/source-filesystem: ^0.6.2 => 0.6.2
@gridsome/transformer-remark: ^0.6.0 => 0.6.0
@gridsome/vue-remark: ^0.2.1 => 0.2.1
gridsome: ^0.7.17 => 0.7.17
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the problem with the linked vue-remark bug demo by running npm install and npm run develop, then inspect @gridsome/vue-remark/lib/loader.js and how the baseDir option is applied. Done means the documented root-based, home-relative, and document-relative component and image paths all resolve correctly.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.