0

Trying to locally run a new Eleventy website on Windows. The same codebase works on other folks' computers, yet I can't launch it due to a 'missing' CSS file.

[4] `TemplateWriterWriteError` was thrown
[4] > (./src/_includes/layouts/about.html)
[4]   Error: template not found: css/critical.css

Though weirdly, I can see the css/critical.css file in my output dist folder.

Not much idea where the problem starts, but first thing I notice in my VSCode is the requires(...'gulp-clean-css') has three dots (shown in that code via '...') that when hovered suggest there's no declaration found for the module, and the package's index file implicitly has an 'any' type.

This 'might' have potential, because the gulp-clean-css package is used in producing the allegedly missing critical.css file.

Bit of reading suggests that's a TypeScript issue with an easy fix.

Solution: All you have to do is edit your TypeScript Config file (tsconfig.json) and add a new key value pair as: "noImplicitAny": false

(source: https://medium.com/@amandeepkochhar/typescript-error-could-not-find-a-declaration-file-for-module-xyz-dfbe6e45c2bd)

But there's no detail on where to put that tsconfig file. Does it go in the Eleventy root folder? Or in the package?

Also, what else is meant to go in with that line? Eg. I found this example file, maybe its sufficient:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

Of course, its possible that here I'm following a red herring. But if anyone has any advice on how to solve this, many thanks in advance !

christo
  • 127
  • 1
  • 2
  • 12
  • Might be that on windows machine the path resolved not correctly. Could you try to update ```css/critical.css`` to ```./css/critical.css``` – Drag13 Jul 27 '20 at 11:11
  • @Drag13 thanks for the suggestion. It doesn't work, but the path idea does at least give me something to explore for a while and hopefully provide something – christo Jul 27 '20 at 11:41

1 Answers1

0

Typescript turned out to be a red herring. For some reason, certain gulp plugins were not working properly with my Windows 10 setup (eg. gulp-clean-css and gulp-imagemin)

Although it took some time, the best solution for me was to move across to WSL. That is, install a Linux subsystem, and develop on Linux. I then found the plugins worked fine.

If you're not familiar with WSL installation, it's probably a bit long to detail here. But it does needs a decent understanding of what you're doing, so perhaps check out some WSL info first. Hopefully the below links will work for some time, since they are what I followed, so I'll post them in case they help someone else.

Video: https://www.youtube.com/watch?v=_fntjriRe48

Post: https://fatsackfails.com/posts/eleventy-windows/

christo
  • 127
  • 1
  • 2
  • 12