mdx-js
-
|
I've installed the import { addAfterLoader, loaderByName } from '@craco/craco'
import remarkGfm from 'remark-gfm'
export default {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: '@mdx-js/loader',
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
]
}
})
return webpackConfig
}
}
}Now, My {
"compilerOptions": {
"target": "es5",
"downlevelIteration": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"noEmit": true,
"baseUrl": "src",
"noFallthroughCasesInSwitch": false,
"types": [
"cypress",
"cypress-react-selector",
"cypress-react-router",
"mdx"
],
},
"include": [
"src/",
"styleguidist/"
]
}What am I doing wrong? I'm already import'ing from the .ts configuration file. What am I missing here? Is MDX really extensible using plugins when using CRA 5 and CRACO 5? Or should there be a big warning in the documentation that many plugins won't work at all in this setup? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 13 replies
-
|
From your comment in https://github.com/orgs/mdx-js/discussions/2217#discussioncomment-4621685 It sounds like you are holding back on a prerelease of MDX? On the topic of ESM. |
Beta Was this translation helpful? Give feedback.
-
There is, this is incompatibility caused by customizing configurations with CRACO, and CRACO has massive warning label in it's documentation:
|
Beta Was this translation helpful? Give feedback.
-
|
About the docs, did you see them? https://mdxjs.com/docs/getting-started/#create-react-app-cra. The example there doesn’t use |
Beta Was this translation helpful? Give feedback.
-
To be sure I've upgraded my node version to v18.13.0 and used the latest and greatest remark-gfm ESM version; I had always installed the latest MDX v2.2.1 for this migration experiment. These are the relevant "@mdx-js/loader": "^2.2.1",
"@mdx-js/mdx": "^2.2.1",
"@mdx-js/react": "^2.2.1",
"remark-gfm": "^3.0.1",
Tried, but unfortunately that doesn't work, as CRACO won't pick it up, throwing an error: |
Beta Was this translation helpful? Give feedback.
-
Yes, I saw that and originally used Just to be sure we're still on the same page, that's my import { addAfterLoader, loaderByName } from '@craco/craco'
import remarkGfm from 'remark-gfm'
export default {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: '@mdx-js/loader',
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
]
}
})
return webpackConfig
}
}
}And this is the error message, which interestingly is now different, probably because I'm trying using node v18.x: This is my {
"compilerOptions": {
"target": "es2017",
"downlevelIteration": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"noEmit": true,
"baseUrl": "src",
"noFallthroughCasesInSwitch": false,
"types": [
"cypress",
"cypress-react-selector",
"cypress-react-router",
"mdx"
],
},
"include": [
"src/",
"styleguidist/"
]
} |
Beta Was this translation helpful? Give feedback.
-
|
For the record, here's what I tried using the above installed (recent) npm package versions with a const { addAfterLoader, loaderByName } = require('@craco/craco')
module.exports = {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
providerImportSource: require.resolve('@mdx-js/react'),
remarkPlugins: [
require.resolve('remark-gfm'),
],
}
})
return webpackConfig
}
}
}This fails as follows: Trying to require at the top: const { addAfterLoader, loaderByName } = require('@craco/craco')
const { remarkGfm } =require('remark-gfm')
module.exports = {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
providerImportSource: require.resolve('@mdx-js/react'),
remarkPlugins: [
remarkGfm,
],
}
})
return webpackConfig
}
}
}thows this error: |
Beta Was this translation helpful? Give feedback.
-
|
That's my current attempt: now the webpack compile goes through successfully, but unfortunately, the plugin(s) doesn't seem to get called at all. When I'm rendering a MDX component with GFM table markup, then it doesn't get translated at all. Tried also with the remarkTextr plugin, which doesn't seem to get called either. Plain dynamic imports don't work, so they must be awaited, which isn't allowed on the top-level ... so I'm wrapping them into anonymous functions that are then called immediately. Did I mess up something here? const { addAfterLoader, loaderByName } = require('@craco/craco');
const remarkGfm = (async() => { await import('remark-gfm') })();
const remarkTextr = (async() => { await import('remark-textr') })();
module.exports = {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
remarkTextr,
],
}
})
return webpackConfig
}
}
}@wooorm I would really appreciate if you would help newcomers like me to this large system of MDX+React+Node+CSJ+ESM with maybe a simple line of code of how to import! |
Beta Was this translation helpful? Give feedback.
-
|
That's my current attempt: now the webpack compile goes through successfully, but unfortunately, the plugin(s) doesn't seem to get called at all. When I'm rendering a MDX component with GFM table markup, then it doesn't get translated at all. Tried also with the remarkTextr plugin, which doesn't seem to get called either. Plain dynamic imports don't work, so they must be awaited, which isn't allowed on the top-level ... so I'm wrapping them into anonymous functions that are then called immediately. Did I mess up something here? const { addAfterLoader, loaderByName } = require('@craco/craco');
const remarkGfm = (async() => { await import('remark-gfm') })();
const remarkTextr = (async() => { await import('remark-textr') })();
module.exports = {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
remarkTextr,
],
}
})
return webpackConfig
}
}
}@wooorm I would really appreciate if you would help newcomers like me to this large system of MDX+React+Node+CSJ+ESM with maybe a simple line of code of how to import! |
Beta Was this translation helpful? Give feedback.
-
|
You are passing promises. Promises are not plugins. You need to pass actual plugins. Perhaps you can make
There is no simple solution. CRA(CO) is a ton of boilerplate that doesn’t work well with the ecosystem. It doesn‘t support ESM. That’s on them. |
Beta Was this translation helpful? Give feedback.
-
const remarkGfm = (async() => { await import('remark-gfm').default })();
const remarkTextr = (async() => { await import('remark-textr').default })();am I mistaken here, or doesn't this already return the resolved functions due to using
|
Beta Was this translation helpful? Give feedback.
-
|
BINGO!
That doesn't work, but CRACO's Configuration: Getting Started has a section on Promise or Async Function. And now we're getting somewhere: the table markdown finally gets rendered! const { addAfterLoader, loaderByName } = require('@craco/craco');
module.exports = async (env) => {
const remarkGfm = (await import('remark-gfm')).default
const remarkTextr = (await import('remark-textr')).default
return {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
remarkTextr,
],
}
})
return webpackConfig
}
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
That took only ... what? ... roundabout half a year for me to finally crack open (taking several aborted attempts into consideration). I'm still not exactly thrilled by what looks to me like an official endorsing of CRACO in the MDX documentation and then in Q&A's to point fingers at it that it breaks all things in this complex ecosystem (house of cards). Hopefully, my solution might even serve for the official documentation and can put the unnecessary and unhelpful finger pointing to its final rest in the future. Anyway, here's a more elaborate example that works for me now and basically replaces the mdx-loader npm package (please don't confuse this with
const { addAfterLoader, loaderByName } = require('@craco/craco')
module.exports = async (env) => {
const remarkGfm = (await import('remark-gfm')).default
const remarkImages = (await import('remark-images')).default
const remarkTextr = (await import('remark-textr')).default
const rehypeSlug = (await import('rehype-slug')).default
const textrTypoApos = (await import('typographic-apostrophes')).default
const textrTypoQuotes = (await import('typographic-quotes')).default
const textrTypoPossPluralsApos = (await import('typographic-apostrophes-for-possessive-plurals')).default
const textrTypoEllipses = (await import('typographic-ellipses')).default
const textrTypoEmDashes = (await import('typographic-em-dashes')).default
const textrTypoEnDashes = (await import('typographic-en-dashes')).default
return {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
remarkImages,
[remarkTextr, {
plugins: [
textrTypoApos,
textrTypoQuotes,
textrTypoPossPluralsApos,
textrTypoEllipses,
// textrTypoEmDashes,
textrTypoEnDashes,
],
options: {
locale: 'en-us'
}
}],
],
rehypePlugins: [
rehypeSlug,
],
}
})
return webpackConfig
}
}
}
}PS: please let the Q authors themselves decide on whether an A actually solves the Q and don't preempt the Q author's decision. Thank you very much. |
Beta Was this translation helpful? Give feedback.
-
I'm not sure where you are coming up with this.
I hope it's been a good learning experience.
You are welcome to open a PR to the documentation
There is some complexity in the ecosystem, yes. PS |
Beta Was this translation helpful? Give feedback.
-
|
This is not working for me. Here is my current const { addAfterLoader, loaderByName } = require('@craco/craco');
module.exports = async (env) => {
const remarkGfm = (await import('remark-gfm')).default
const remarkTextr = (await import('remark-textr')).default
console.log(remarkGfm);
return {
webpack: {
configure: (webpackConfig) => {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.(md|mdx)$/,
loader: require.resolve('@mdx-js/loader'),
/** @type {import('@mdx-js/loader').Options} */
options: {
remarkPlugins: [
remarkGfm,
remarkTextr,
],
}
})
return webpackConfig
}
}
}
}Resolved by modifying the import statement: - import Welcome from "!@mdx-js/loader!./Welcome.mdx";
+ import Welcome from "./Welcome.mdx"; |
Beta Was this translation helpful? Give feedback.
-
|
It might very well not work today, as this question is half a year old. |
Beta Was this translation helpful? Give feedback.
That took only ... what? ... roundabout half a year for me to finally crack open (taking several aborted attempts into consideration). I'm still not exactly thrilled by what looks to me like an official endorsing of CRACO in the MDX documentation and then in Q&A's to point fingers at it that it breaks all things in this complex ecosystem (house of cards). Hopefully, my solution might even serve for the official documentation and can put the unnecessary and unhelpful finger pointing to its final rest in the future.
Anyway, here's a more elaborate example that works for me now and basically replaces the mdx-loader npm package (please don't confuse this with
@mdx-js/loader!) -- that 3rd part…