search

mdx-js / mdx

Markdown for the component era
https://mdxjs.com
MIT License
17.7k stars 1.14k forks source link

Not working with Vue 3 #1718

Closed jannikbuscha closed 3 years ago

jannikbuscha commented 3 years ago

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: image

Also nothing happens

wooorm commented 3 years ago

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

jannikbuscha commented 3 years ago

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

Thank you 👍

jannikbuscha commented 3 years ago

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: image

image

wooorm commented 3 years ago

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 commented 3 years ago

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: image

ChristianMurphy commented 3 years ago

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

jannikbuscha commented 3 years ago

@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 commented 3 years ago

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

However, the MDXProvider does not work completely: image

wooorm commented 3 years ago

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

wooorm commented 3 years ago

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… */})
jannikbuscha commented 3 years ago

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: image

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

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

wooorm commented 3 years ago

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 commented 3 years ago

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: image image

wooorm commented 3 years ago

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 commented 3 years ago

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: image image

wooorm commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@jannikbuscha have you seen https://github.com/vuejs/vue-cli/issues/4477 and https://github.com/vuejs/vue-cli/pull/6405? It looks like vue.config.mjs should be supported.

jannikbuscha commented 3 years ago

@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: image

ChristianMurphy commented 3 years ago

https://github.com/vuejs/vue-cli/issues/6592#issuecomment-883942258 might help? It looks like the loader isn't being applied.

jannikbuscha commented 3 years ago

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

Then i get this error: image

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

wooorm commented 3 years ago

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.

  1. 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"
 }
  2. Next, make sure those updates are installed by running yarn in your terminal
  3. Then, rename vue.config.js in your repo to vue.config.mjs
  4. Now, running yarn serve runs the development server which shows that autolink literals, footnotes, strikethrough, tables, and tasklists are supported!
jannikbuscha commented 3 years ago

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.

  1. 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"
   }
  1. Next, make sure those updates are installed by running yarn in your terminal
  2. Then, rename vue.config.js in your repo to vue.config.mjs
  3. 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! 😄 image