"Unexpected token" on importing of markdown-stuff

#1

I’m receiving a rather cryptic error when running rollup -c. If my index.js file contains this line (from the examples on the website):

import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"

…I receive the following error:


./src/index.js → public/ProseMirror.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
punycode (imported by node_modules/markdown-it/lib/index.js, commonjs-external-punycode)
[!] Error: Unexpected token (Note that you need rollup-plugin-json to import JSON files)
node_modules/entities/lib/maps/entities.json (1:10)
1: { "Aacute": "\u00C1", "aacute": "\u00E1", "Abreve": "\u0102", "abreve": "\u010...
             ^
Error: Unexpected token (Note that you need rollup-plugin-json to import JSON files)
    at error (/opt/node_modules_global/lib/node_modules/rollup/dist/rollup.js:5351:30)
    at Module.error (/opt/node_modules_global/lib/node_modules/rollup/dist/rollup.js:9643:9)
    at tryParse (/opt/node_modules_global/lib/node_modules/rollup/dist/rollup.js:9552:16)
    at Module.setSource (/opt/node_modules_global/lib/node_modules/rollup/dist/rollup.js:9868:33)
    at Promise.resolve.catch.then.then.then (/opt/node_modules_global/lib/node_modules/rollup/dist/rollup.js:12148:20)

[user@host ~/code/prosetest/prosemirror]$

I have been unable to find explanations of this online. The unexpected token is in an unexpected place in some JSON that I know nothing about. I found nothing useful in the URL shown (https://rollupjs.org…) but have tried installing punycode and anything else I found mentioned there, with the same results.

Any help with understanding this is deeply appreciated.

#2

So I figured it out.

It was a rollup issue. I needed to install and include the rollup-plugin-json plugin, but from @rollup/plugin-json and not rollup-plugin-json. I then also needed to install and use rollup-plugin-builtins but once both of those had been installed and configured for rollup, the rollup -c command started working without warning or error.

(Sorry, I’m new to the wild and whacky world of modern JavaScript/CommonJS/ES6/Rollup/Webpack and often have trouble identifying the source of problems and a result, where exactly to ask for help. I appreciate the patience.)

#3

Don’t worry, this stuff is a mess and confuses everybody.

1 Like
#4

I’m getting a similar error when following the markdown example, which imports the same files:

[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules\markdown-it\node_modules\entities\lib\maps\entities.json (1:10)
1: { "Aacute": "\u00C1"...

Can you explain how you solved this error?

I tried adding @rollup/plugin-json and rollup-plugin-builtins

  • yarn added them
  • added them to rollup.config.js plugins array

rollup-plugin-builtins seems deprecated, so I also tried rollup-plugin-node-polyfills

#5

markdown-it has some transitive dependency on some package that isn’t really written for use in the browser. I think the ProseMirror website installs the punycode package (shadowing node’s native punycode module) to work aroun this.

#6

I figured it out: in my rollup.config.js plugins array, I had added json when it needs to be json()

That was really frustrating to find!