mdx-js/runtime acorn error on example

felixsusanto commented 5 years ago

Subject of the issue

Describe your issue here.

This is not a place to ask questions. For that, go to Spectrum

Your environment

OS: Windows 10
Packages: 1.4.2
Env: NPM 6.9.0,

node 10.15.3

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉

Expected behaviour

What should happen?

Should renders nicely

Actual behaviour

What happens instead?

Error thrown from acorn.js

felixsusanto commented 5 years ago

Sorry I'm in a hurry, will provide minimum example tonight

johno commented 5 years ago

Hey @felixsusanto, thanks for opening up an issue! Any word on a minimal reproduction or more details on what's breaking?

kframesa commented 5 years ago

Hi... I've the same problem and I can't understand from when it broke.

I have this error on console:

Uncaught SyntaxError: Unexpected token (6:14) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$4.raise (acorn.mjs:2819) at Object.../../node_modules/acorn/dist/acorn.mjs.pp.unexpected (acorn.mjs:683) at Object.jsx_parseIdentifier (index.js:210) at Object.jsx_parseNamespacedName (index.js:219) at Object.jsx_parseAttribute (index.js:296) at Object.jsx_parseOpeningElementAt (index.js:309) at Object.jsx_parseElementAt (index.js:331) at Object.jsx_parseElement (index.js:389) at Object.parseExprAtom (index.js:396) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprSubscripts (acorn.mjs:2083) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeUnary (acorn.mjs:2060) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprOps (acorn.mjs:2004) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeConditional (acorn.mjs:1987) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeAssign (acorn.mjs:1962) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExpression (acorn.mjs:1927) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseReturnStatement (acorn.mjs:999) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseStatement (acorn.mjs:829) at Object.parseStatement (index.js:63) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseBlock (acorn.mjs:1155) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseFunctionBody (acorn.mjs:2665) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseFunction (acorn.mjs:1277) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprAtom (acorn.mjs:2245) at Object.parseExprAtom (index.js:75) at Object.parseExprAtom (index.js:398) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprSubscripts (acorn.mjs:2083) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeUnary (acorn.mjs:2060) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprOps (acorn.mjs:2004) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeConditional (acorn.mjs:1987) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeAssign (acorn.mjs:1962) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseFunctionBody (acorn.mjs:2643) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseArrowExpression (acorn.mjs:2628) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprAtom (acorn.mjs:2197) at Object.parseExprAtom (index.js:75) at Object.parseExprAtom (index.js:398) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprSubscripts (acorn.mjs:2083) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeUnary (acorn.mjs:2060) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseExprOps (acorn.mjs:2004) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeConditional (acorn.mjs:1987) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$3.parseMaybeAssign (acorn.mjs:1962) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseVar (acorn.mjs:1222) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseVarStatement (acorn.mjs:1086) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseStatement (acorn.mjs:836) at Object.parseStatement (index.js:63) at Object.../../node_modules/acorn/dist/acorn.mjs.pp$1.parseTopLevel (acorn.mjs:740) at Object.parse (acorn.mjs:547) at Function.parse (acorn.mjs:570) at transform (buble-browser.es.js:4829) at index.es.js:1 at renderWithHooks (react-dom.development.js:15105) at mountIndeterminateComponent (react-dom.development.js:17339)

valse commented 5 years ago

If it could help I started to have this issue from when I changed to typescript + eslint: If I remove them it works as expected.

millette commented 5 years ago

I've got a very simple demo of nextjs + mdx runtime at https://github.com/millette/t3 if that helps. When you run it (in prod or dev), it simply reads the text file at /c1.txt containing some MDX and renders it as the front-page.

revolunet commented 5 years ago

thanks @millette - where can we find mdx-runtime-slim source code ?

millette commented 5 years ago

@revolunet There's a PR #790 or in https://github.com/millette/mdx/tree/buble-jsx-only.

UPDATE: Also, an "improved" example https://github.com/millette/t4 that allows anyone to edit pages (the mdx content) and actually store the mdx to disk. It's just a proof of concept. The readme is in French but it should still be helpful.

revolunet commented 5 years ago

Thanks 😍 Does it work after a next.js build too ? for some reason it breaks after the build here while Ok in dev; i'm using a "custom" Next server .

millette commented 5 years ago

It works for me built or dev (with the built-in server). https://github.com/millette/t4 too uses the built-in server and API routing. I will try a custom server next (not next's) but not today :-)

@revolunet Le readme en français ne devrait pas te déranger finalement ;-) Il est surtout là pour faire peur.

valse commented 5 years ago

Hi, I'm using mdx-runtime in a gatsby client only page and the same page stopped working if migrated to typescript: how could be linked with the acorn error and the nextjs examples 🤔

revolunet commented 5 years ago

this worked better for me (next.js) :

<Mdx markdown={someMarkdown} components={components}/>

import React from "react";
import unified from "unified";
import markdownParser from "remark-parse";
import remark2rehype from "remark-rehype";
import rehype2react from "rehype-react";
import raw from "rehype-raw";

const Mdx = ({ markdown, components = {} }) => {
  return unified()
    .use(markdownParser)
    .use(remark2rehype, { allowDangerousHTML: true })
    .use(raw)
    .use(rehype2react, {
      createElement: React.createElement,
      components: components
    })
    .processSync(markdown).contents;
};

export default Mdx;

millette commented 5 years ago

@revolunet No runtime?

felixsusanto commented 5 years ago

Hello @revolunet, thanks for your response. This is the minimum reproduce-able problem repo https://github.com/felixsusanto/mdx-poc-rtmp

I'm not too sure what went wrong, since I tried the sample code from https://mdxjs.com/advanced/runtime

Thanks, and sorry for the delay

findoo commented 4 years ago

I'm facing the same issue - stacktrace identical to @kframesa

millette commented 4 years ago

@felixsusanto @findoo With runtime you have to disable fs import in next.config.js, like

https://github.com/millette/t4/blob/master/next.config.js#L9

JounQin commented 4 years ago

Seems related to https://github.com/acornjs/acorn-jsx/issues/104, please try to lock it @5.0.1.

JounQin commented 4 years ago

@felixsusanto @findoo @millette Have you tried locking acorn-jsx@5.0.1? Shall we move forward?

felixsusanto commented 4 years ago

@JounQin Sorry for the delay. Yes, this confirms it, locking acorn-jsx to ver 5.0.1 does the job. Closing this issue

mdx-js / mdx