Not working with Vue 3 #1718

jannikbuscha · 2021-10-06T13:30:33Z

Not working with Vue 3

When I create a Project like this: https://github.com/mdx-js/mdx/tree/master/examples/vue with Vue 3, I get this warning:

Also nothing happens

wooorm · 2021-10-06T13:31:36Z

xdm works now with vue 3: https://github.com/wooorm/xdm#vue.
This project will support it in ± 4 weeks maybe.

jannikbuscha · 2021-10-06T16:18:09Z

xdm works now with vue 3: https://github.com/wooorm/xdm#vue. This project will support it in ± 4 weeks maybe.

Thank you 👍

jannikbuscha · 2021-10-16T19:26:44Z

i saw that you have customized the docs and i wanted to test now already and i get this error with the vue.config.js configuration currently:

wooorm · 2021-10-17T05:40:23Z

and i wanted to test now already

The docs have been updated but the code has not been published.

Are you using Vue 3 with Vue CLI?

Can you swap out @mdx-js/loader with xdm/webpack.cjs to see if that still fails, and if so, make a reproduction?

jannikbuscha · 2021-10-17T14:56:00Z

and i wanted to test now already

The docs have been updated but the code has not been published.

Are you using Vue 3 with Vue CLI?

Can you swap out @mdx-js/loader with xdm/webpack.cjs to see if that still fails, and if so, make a reproduction?

i still get the error.

I use vue cli with this configuration:

ChristianMurphy · 2021-10-19T15:44:36Z

@jannikbuscha could you share a complete example of what you tried in a codesandbox? https://vue.new

jannikbuscha · 2021-10-19T18:47:06Z

@jannikbuscha could you share a complete example of what you tried in a codesandbox? https://vue.new

https://codesandbox.io/s/cool-breeze-e66xz?file=/src/App.vue

jannikbuscha · 2021-10-19T20:13:47Z

I have found the config error. You have to use end() when working with multiple loaders:

However, the MDXProvider does not work completely:

wooorm · 2021-10-19T20:15:40Z

Nice catch. Can I interest you in a fix for the docs?
And can you elaborate on the vue context API not working?

wooorm · 2021-10-20T06:23:40Z

For the second part: that’s because you have not configured @mdx-js/loader to use @mdx-js/vue:

.options({jsx: true, providerImportSource: '@mdx-js/vue' /* otherOptions… */})

Closes GH-1718.

jannikbuscha · 2021-10-20T08:23:02Z

For the second part: that’s because you have not configured @mdx-js/loader to use @mdx-js/vue:
.options({jsx: true, providerImportSource: '@mdx-js/vue' /* otherOptions… */})

In my ide i get this error:

and codesandbox (https://codesandbox.io/s/heuristic-lovelace-rim55?file=/src/App.vue):

here my repo:
https://github.com/jannikbuscha/mdx-vue3

wooorm · 2021-10-20T08:52:18Z

Trying out your repo works perfectly for me, no errors.
Even if I add Post to the template or both Post and MDXProvider:

diff --git a/src/App.vue b/src/App.vue
index eee837e..1bcf76e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <h1>Test</h1>
+  <MDXProvider v-bind:components="components"><Post /></MDXProvider>
 </template>
 
 <script lang="ts">
@@ -9,6 +10,9 @@ import {MDXProvider} from '@mdx-js/vue'
 import Post from './post.mdx'
 
 @Options({
+  data() {
+    return { components: { h1: "h2" } };
+  },
   components: {
     MDXProvider, Post
   },

If your IDE is breaking, that’s likely due to it not supporting ESM. See: https://v2.mdxjs.com/docs/troubleshooting-mdx/#problems-integrating-mdx. It’s a problem they should fix.

For codesandbox, something is going wrong there indeed. You can add a console.log(Post) under its import, and see that it’s just a plain text string.
I am guessing that it is due to another integration?

jannikbuscha · 2021-10-20T10:21:30Z

Trying out your repo works perfectly for me, no errors. Even if I add Post to the template or both Post and MDXProvider:
diff --git a/src/App.vue b/src/App.vue
index eee837e..1bcf76e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <h1>Test</h1>
+  <MDXProvider v-bind:components="components"><Post /></MDXProvider>
 </template>
 
 <script lang="ts">
@@ -9,6 +10,9 @@ import {MDXProvider} from '@mdx-js/vue'
 import Post from './post.mdx'
 
 @Options({
+  data() {
+    return { components: { h1: "h2" } };
+  },
   components: {
     MDXProvider, Post
   },
If your IDE is breaking, that’s likely due to it not supporting ESM. See: https://v2.mdxjs.com/docs/troubleshooting-mdx/#problems-integrating-mdx. It’s a problem they should fix.

For codesandbox, something is going wrong there indeed. You can add a console.log(Post) under its import, and see that it’s just a plain text string. I am guessing that it is due to another integration?

yes it seems like my ide is causing some problems. I have now tested the whole thing with gitpod and so far everything works. The question I have now is, how do I build something like gfm with the MDXProvider component? if I do that as in the vue example then I get the following error:

wooorm · 2021-10-20T10:26:49Z

You’re attempting to run Vue inside Vue and MDX inside MDX. You don’t have to!
You’re using MDX through [@mdx-js/loader](https://v2.mdxjs.com/packages/loader/. You can configure that. Pass remarkGfm there. In the place where you’re using @mdx-js/loader.

jannikbuscha · 2021-10-20T12:07:15Z

You’re attempting to run Vue inside Vue and MDX inside MDX. You don’t have to! You’re using MDX through [@mdx-js/loader](https://v2.mdxjs.com/packages/loader/. You can configure that. Pass remarkGfm there. In the place where you’re using @mdx-js/loader.

I don't think I really understand this yet. Where exactly does this need to be configured? I have now tried the two things in my vue.config.js:

wooorm · 2021-10-20T12:22:29Z

Before, you tried to import it. That’s what you have to do again. That’s what’s shown in the guide: https://v2.mdxjs.com/guides/gfm/.

import remarkGfm from 'remark-gfm'
// ...
.options({jsx: true, remarkPlugins: [remarkGfm]})

If you removed that because you were getting errors that you were not allowed to import things, then you can see the ESM troubleshooting I linked to earlier for more info and ask Vue CLI folks for help. ESM in vue.config.js seems to be supported since April already, though maybe it’s in beta: https://v2.mdxjs.com/docs/extending-mdx/#using-plugins

jannikbuscha · 2021-10-20T20:12:42Z

Before, you tried to import it. That’s what you have to do again. That’s what’s shown in the guide: https://v2.mdxjs.com/guides/gfm/.
import remarkGfm from 'remark-gfm'
// ...
.options({jsx: true, remarkPlugins: [remarkGfm]})
If you removed that because you were getting errors that you were not allowed to import things, then you can see the ESM troubleshooting I linked to earlier for more info and ask Vue CLI folks for help. ESM in vue.config.js seems to be supported since April already, though maybe it’s in beta: https://v2.mdxjs.com/docs/extending-mdx/#using-plugins

Thank you very much for your detailed help.
I have now opened a stackoverflow question regarding to the ESM story, because after a few hours I have not yet come to a solution.

ChristianMurphy · 2021-10-20T20:17:13Z

@jannikbuscha have you seen vuejs/vue-cli#4477 and vuejs/vue-cli#6405?
It looks like vue.config.mjs should be supported.

jannikbuscha · 2021-10-20T20:28:05Z

@jannikbuscha have you seen vuejs/vue-cli#4477 and vuejs/vue-cli#6405? It looks like vue.config.mjs should be supported.

i get this error:

ChristianMurphy · 2021-10-20T21:33:59Z

vuejs/vue-cli#6592 (comment) might help? It looks like the loader isn't being applied.

jannikbuscha · 2021-10-21T05:43:02Z

vuejs/vue-cli#6592 (comment) might help? It looks like the loader isn't being applied.

Then i get this error:

and with vue.config.mjs + export default {}

wooorm · 2021-10-21T08:35:01Z

Your last screenshot is very close. However, as I mentioned before, while vue-cli added support for .mjs files, they have not released it. They are in beta.

Here’s how I can make your project work for me locally.

First, let’s update dependencies. It’s always good when adding new dependencies (such as the this new MDX 2 RC), to make sure the rest is up to date:

diff --git a/package.json b/package.json
index 884779f..d2f602d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@mdx-js/loader": "^2.0.0-rc.1",
-    "@mdx-js/mdx": "^2.0.0-rc.1",
     "@mdx-js/vue": "^2.0.0-rc.1",
     "core-js": "^3.6.5",
     "remark-gfm": "^3.0.0",
@@ -17,16 +16,16 @@
     "vue-class-component": "^8.0.0-0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "5.0.0-beta.6",
+    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
+    "@vue/cli-plugin-typescript": "5.0.0-beta.6",
+    "@vue/cli-service": "5.0.0-beta.6",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^6.7.2",
+    "@vue/eslint-config-typescript": "^8.0.0",
+    "eslint": "^8.0.0",
     "eslint-plugin-vue": "^7.0.0",
     "typescript": "~4.1.5"
   }

Next, make sure those updates are installed by running yarn in your terminal
Then, rename vue.config.js in your repo to vue.config.mjs
Now, running yarn serve runs the development server which shows that autolink literals, footnotes, strikethrough, tables, and tasklists are supported!

Related to: GH-1718.

jannikbuscha · 2021-10-21T09:58:51Z

Your last screenshot is very close. However, as I mentioned before, while vue-cli added support for .mjs files, they have not released it. They are in beta.

Here’s how I can make your project work for me locally.

First, let’s update dependencies. It’s always good when adding new dependencies (such as the this new MDX 2 RC), to make sure the rest is up to date:

diff --git a/package.json b/package.json
index 884779f..d2f602d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@mdx-js/loader": "^2.0.0-rc.1",
-    "@mdx-js/mdx": "^2.0.0-rc.1",
     "@mdx-js/vue": "^2.0.0-rc.1",
     "core-js": "^3.6.5",
     "remark-gfm": "^3.0.0",
@@ -17,16 +16,16 @@
     "vue-class-component": "^8.0.0-0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@typescript-eslint/parser": "^5.1.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "5.0.0-beta.6",
+    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
+    "@vue/cli-plugin-typescript": "5.0.0-beta.6",
+    "@vue/cli-service": "5.0.0-beta.6",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "eslint": "^6.7.2",
+    "@vue/eslint-config-typescript": "^8.0.0",
+    "eslint": "^8.0.0",
     "eslint-plugin-vue": "^7.0.0",
     "typescript": "~4.1.5"
   }

Next, make sure those updates are installed by running yarn in your terminal
Then, rename vue.config.js in your repo to vue.config.mjs
Now, running yarn serve runs the development server which shows that autolink literals, footnotes, strikethrough, tables, and tasklists are supported!

OMG! Thank you so much! 😄

jannikbuscha added 🐛 type/bug This is a problem 🔍 status/open labels Oct 6, 2021

wooorm added a commit that referenced this issue Oct 20, 2021

Fix vue.config.js example

fbb9731

Closes GH-1718.

wooorm mentioned this issue Oct 20, 2021

Fix vue.config.js example #1759

Merged

wooorm closed this as completed in #1759 Oct 20, 2021

wooorm added a commit that referenced this issue Oct 20, 2021

Fix vue.config.js example (#1759)

d636735

Closes GH-1718.

wooorm added a commit that referenced this issue Oct 21, 2021

Add note on vue-cli beta

25e224e

Related to: GH-1718.

wooorm mentioned this issue Oct 21, 2021

Add note on vue-cli beta #1763

Merged

ChristianMurphy added 💬 type/discussion This is a request for comments 🙋 no/question This does not need any changes and removed 🐛 type/bug This is a problem 🔍 status/open 💬 type/discussion This is a request for comments labels Oct 24, 2021

Uh oh!

Not working with Vue 3 #1718

Not working with Vue 3 #1718

Comments

jannikbuscha commented Oct 6, 2021