PrismJS error

[bronze]

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble writing to "_site/blog/fifthpost/index.html" from "./content/blog/fifthpost.md" (via EleventyTemplateError)
[11ty] 2. (./_includes/layouts/post.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks paired shortcode `css` (via Template render error)
[11ty] 3. template not found: node_modules/prismjs/themes/prism-okaidia.css (via Template render error)

Solved when i did pnpm add -D prismjs

[zachleat]

So, this is only necessary with pnpm? npm installs prismjs with @11ty/eleventy-plugin-syntaxhighlight

[bronze]

Hi Zack, just tried this on a fresh install and both pnpm and npm gave me errors.

npm below:

> [email protected] start
> npx @11ty/eleventy --serve --quiet

[11ty/eleventy-base-blog] Including drafts.
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble writing to "_site/blog/fifthpost/index.html" from "./content/blog/fifthpost.md" (via EleventyTemplateError)
[11ty] 2. (./_includes/layouts/post.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks paired shortcode `css` (via Template render error)
[11ty] 3. template not found: node_modules/prismjs/themes/prism-okaidia.css (via Template render error)
[11ty]
[11ty] Original error stack trace: Error: template not found: node_modules/prismjs/themes/prism-okaidia.css
[11ty]     at createTemplate (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/environment.js:234:15)
[11ty]     at next (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/lib.js:260:7)
[11ty]     at handle (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/environment.js:267:11)
[11ty]     at /home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/environment.js:276:9
[11ty]     at next (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/lib.js:258:7)
[11ty]     at Object.asyncIter (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/lib.js:263:3)
[11ty]     at Environment.getTemplate (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/environment.js:259:9)
[11ty]     at eval (eval at _compile (/home/bronze/11tytest/node_modules/.pnpm/[email protected][email protected]/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:14:5)
[11ty]     at fn (/home/bronze/11tytest/node_modules/.pnpm/[email protected]/node_modules/a-sync-waterfall/index.js:26:24)
[11ty]     at /home/bronze/11tytest/node_modules/.pnpm/[email protected]/node_modules/a-sync-waterfall/index.js:66:22
[11ty] Wrote 0 files in 0.16 seconds (v2.0.1)

[Megaemce]

So, this is only necessary with pnpm? npm installs prismjs with @11ty/eleventy-plugin-syntaxhighlight

Had the same issue with pnpm. Switching to npm fix the issue.

[ItsCurious]

I also came across this issue as I'm trying out pnpm.

pnpm only puts direct dependencies in the root of node_modules folder. All indirect dependencies go into node_modules/.pnpm by default (as per Symlinked node_modules structure in pnpm docs). This is different from npm which puts all dependencies into the node_modules folder.

Eleventy-base-blog includes a CSS theme file which it expects to be in node_modules/prismjs.

There are a few different options for how this template could help out pnpm users.

Option 1:

Set prismjs as a devDependency which places the symlink in the expected location node_modules/prismjs/themes/prism-okaidia.css, as per #155

Downside is that it duplicates a dependency for @11ty/eleventy-plugin-syntaxhighlight as noted by @zachleat.

Option 2a:

Give instructions to pnpm users to run pnpm install --shamefully-hoist, as per https://pnpm.io/cli/install#--shamefully-hoist.

This is highly discouraged by pnpm according to their docs.

Option 2b:

Create a .npmrc file in the template root and add the following line to the file, as per https://pnpm.io/npmrc#shamefully-hoist:

shamefully-hoist=true

I believe this is similarly discouraged by pnpm.

Option 3:

Create a .npmrc file in the template root and add the following line:

public-hoist-pattern[]=*prismjs*

This uses pnpm's public-hoist-pattern to move only prismjs to the node_modules root. npm config does not appear to use this public-hoist-pattern setting, so this should only impact pnpm users.

I recommend option 3 as it will help pnpm users while having no detrimental impact on npm users. It also does not create additional dependencies for this template.

If this makes sense, I can make a PR.