docusaurus: Webpack fails to parse prism-react-renderer with 3.0.0-rc.1

Folks, this is because of acornjs/acorn#1253. It’s neither because of prism-react-renderer nor Docusaurus nor Webpack. I’m going to close until that one gets fixed; in the meantime you may want to pin your Acorn version through your package manager resolution.

This worked for me by pinning acorn to 8.10.0 (the most recent version before the recent bug). Thanks!

# package.json

"@docusaurus/core": "2.4.3",
"@docusaurus/preset-classic": "2.4.3",

# ...

"acorn": "8.10.0"

Folks, this is because of https://github.com/acornjs/acorn/issues/1253. It’s neither because of prism-react-renderer nor Docusaurus nor Webpack. I’m going to close until that one gets fixed; in the meantime you may want to pin your Acorn version through your package manager resolution.

So I see similar issue when I try to create a fresh app for 2.4.3

Module parse failed: Unexpected token (961:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       'special-attr': [],
|       'attr-value': {
>         pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
|         inside: {
|           'punctuation': [{
[ERROR] Client bundle compiled with errors therefore further build is impossible.

npm i acorn@8.10.0

Apparently it’s fixed in Acorn 8.11.2 🙌

Thanks for investigating @Josh-Cena 🤗

I also suspected Acorn by seeing the lock file diff but couldn’t be 100% sure.

Glad it’s not a Docusaurus bug, hope it will be fixed for next week’s release

I also managed to replicate in GitHub Actions. I took a workflow, commented out the code that was there and added this in its place:

npx create-docusaurus@3.0.0-rc.1 my-website classic
cd my-website
npm run build

To one of my workflows and the output was: https://github.com/johnnyreilly/blog.johnnyreilly.com/actions/runs/6659467622/job/18098597547?pr=712

[success] [webpackbar] Client: Compiled with some errors in 20.88s
Error:  Client bundle compiled with errors therefore further build is impossible.
Module parse failed: Unexpected token (763:929)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     return "(?:" + r + "|" + s + ")";
|   })), lookbehind: true, greedy: true, alias: "atrule" }, directive: { pattern: /(^[ \t]*)%.+/m, lookbehind: true, alias: "important" }, datetime: { pattern: i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source), lookbehind: true, alias: "number" }, boolean: { pattern: i(/false|true/.source, "i"), lookbehind: true, alias: "important" }, null: { pattern: i(/null|~/.source, "i"), lookbehind: true, alias: "important" }, string: { pattern: i(s), lookbehind: true, greedy: true }, number: { pattern: i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source, "i"), lookbehind: true }, tag: t, important: n, punctuation: /---|[:[\]{}\-,|>?]|\.\.\./ }, e.languages.yml = e.languages.yaml;
> }(Prism), Prism.languages.markup = { comment: { pattern: /<!--(?:(?!<!--)[\s\S])*?-->/, greedy: true }, prolog: { pattern: /<\?[\s\S]+?\?>/, greedy: true }, doctype: { pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i, greedy: true, inside: { "internal-subset": { pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/, lookbehind: true, greedy: true, inside: null }, string: { pattern: /"[^"]*"|'[^']*'/, greedy: true }, punctuation: /^<!|>$|[[\]]/, "doctype-tag": /^DOCTYPE/i, name: /[^\s<>'"]+/ } }, cdata: { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, greedy: true }, tag: { pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/, greedy: true, inside: { tag: { pattern: /^<\/?[^\s>\/]+/, inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ } }, "special-attr": [], "attr-value": { pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/, inside: { punctuation: [{ pattern: /^=/, alias: "attr-equals" }, { pattern: /^(\s*)["']|["']$/, lookbehind: true }] } }, punctuation: /\/?>/, "attr-name": { pattern: /[^\s>\/]+/, inside: { namespace: /^[^\s>\/:]+:/ } } } }, entity: [{ pattern: /&[\da-z]{1,8};/i, alias: "named-entity" }, /&#x?[\da-f]{1,8};/i] }, Prism.languages.markup.tag.inside["attr-value"].inside.entity = Prism.languages.markup.entity, Prism.languages.markup.doctype.inside["internal-subset"].inside = Prism.languages.markup, Prism.hooks.add("wrap", function(e) {
|   "entity" === e.type && (e.attributes.title = e.content.replace(/&amp;/, "&"));
| }), Object.defineProperty(Prism.languages.markup.tag, "addInlined", { value: function(e, n) {

You can see the commit that adds it here: johnnyreilly/blog.johnnyreilly.com@3a6fef9 (It’s not using my blog source code at all here; it was just the easiest way for me to make use of a GitHub Action to test create-docusaurus@3.0.0-rc.1)

You can see the full code of the GitHub Action here: https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/3a6fef9a6a2c1b4d1a588615254f9a07267b7ff8/.github/workflows/build-test-docusaurus.yml

I’m getting this exact error now from a branch that was working with Docusaurus 3.0.0-beta.0.

  "name": "prism-react-renderer",
  "version": **"2.1.0",**