Start instructions don't work

[vickytnz]

I'm following the latest instructions from https://x-govuk.github.io/govuk-eleventy-plugin/get-started/

When I install npm install @11ty/eleventy @x-govuk/govuk-eleventy-plugin (with node version 18.20.3)

and then add an eleventy.config.js

with

const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')

module.exports = function(eleventyConfig) {
  // Register the plugin
  eleventyConfig.addPlugin(govukEleventyPlugin)

  return {
    dataTemplateEngine: 'njk',
    htmlTemplateEngine: 'njk',
    markdownTemplateEngine: 'njk',
    dir: {
      // The folder where all your content will live:
      input: 'app',
      // Use layouts from the plugin
      layouts: '../node_modules/@x-govuk/govuk-eleventy-plugin/layouts'
    }
  }
}; 

and then run

npx eleventy --serve

I get an error

sass.Exception [Error]: Can't find stylesheet to import.
  ╷
6 │ @import "node_modules/govuk-frontend/dist/govuk/all";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

I think something is missing with dependencies for govuk frontend

UPDATE: after a lot of debugging I think I realised there were a lot of dependencies I needed to add - these are all the things I manually installed (and then showed up in the package.js file I also created)

  "dependencies": {
    "@x-govuk/govuk-eleventy-plugin": "^6.4.0",
    "@x-govuk/govuk-prototype-components": "^3.0.6",
    "govuk-frontend": "^5.4.1",
    "govuk-prototype-kit": "^13.16.2",
    "markdown-it-govuk": "^0.4.0"
  }

[vickytnz]

While I'm also here I also think the eleventy.config.js example can be padded out a little to make it easier to undersatnd how to customise it, for example:

const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')

module.exports = function(eleventyConfig) {
  // Register the plugin
  eleventyConfig.addPlugin(govukEleventyPlugin, {
 // add customisations here - uncomment next areas for examples 
    /*
    header: {
      logotype: 'x-govuk',
      productName: 'Apply for a juggling licence',
    },
    icons: {
      mask: 'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-mask-icon.svg?raw=true',
      shortcut:
        'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-favicon.ico',
      touch:
        'https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-apple-touch-icon.png'
    }
        */
  })

  return {
    dataTemplateEngine: 'njk',
    htmlTemplateEngine: 'njk',
    markdownTemplateEngine: 'njk',
    dir: {
      // The folder where all your content will live:
      input: 'app',
      // Use layouts from the plugin
      layouts: '../node_modules/@x-govuk/govuk-eleventy-plugin/layouts'
    }
  }
};

[paulrobertlloyd]

I can’t replicate the issues you’re seeing, either using Node v18 or Node v22. Do you know which version of Node and NPM you have installed (node -v and npm -v)?

You shouldn’t need to add those individual dependencies as they’ll be installed as dependencies of @11ty/eleventy and @x-govuk/govuk-eleventy-plugin.