Error encountered in 11ty: Invalid operation - eleventyConfig.addPassthroughCopy is not a recognized function

Attempting to integrate my CSS and JavaScript codes into 11ty has been a bit challenging for me. I recently discovered that 11ty utilizes something called .11ty.js, so I decided to utilize the addPassthroughCopy() function.

Below is the script I tried:

module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy("data/mainStyle.css");
    return
        dir: {
            passthroughFileCopy: true
        }
};

However, when attempting to compile using npx @11ty/eleventy, I encountered an error message:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering 11ty.js template ./.11ty.js (via TemplateContentRenderError)
[11ty] 2. eleventyConfig.addPassthroughCopy is not a function (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError: eleventyConfig.addPassthroughCopy is not a function
[11ty]     at module.exports [as render] (C:\Users\User\Desktop\website\.11ty.js:2:20)
[11ty]     at JavaScript.<anonymous> (C:\Users\User\node_modules\@11ty\eleventy\src\Engines\JavaScript.js:144:43)
[11ty]     at Template._render (C:\Users\User\node_modules\@11ty\eleventy\src\TemplateContent.js:507:28)
[11ty]     at async Template.renderWithoutLayout (C:\Users\User\node_modules\@11ty\eleventy\src\Template.js:456:27)
[11ty]     at async TemplateMap.populateContentDataInMap (C:\Users\User\node_modules\@11ty\eleventy\src\TemplateMap.js:585:39)
[11ty]     at async TemplateMap.cache (C:\Users\User\node_modules\@11ty\eleventy\src\TemplateMap.js:479:5)
[11ty]     at async TemplateWriter._createTemplateMap (C:\Users\User\node_modules\@11ty\eleventy\src\TemplateWriter.js:330:5)
[11ty]     at async TemplateWriter.generateTemplates (C:\Users\User\node_modules\@11ty\eleventy\src\TemplateWriter.js:360:5)
[11ty]     at async TemplateWriter.write (C:\Users\User\node_modules\@11ty\eleventy\src\TemplateWriter.js:407:23)
[11ty]     at async Eleventy.executeBuild (C:\Users\User\node_modules\@11ty\eleventy\src\Eleventy.js:1160:13)
[11ty] Wrote 0 files in 0.04 seconds (v2.0.0)

I attempted removing the eleventyconfig.addpassthroughcopy and it did solve the issue, but I still need to include the CSS into my script. Can anyone provide guidance?

Even trying eleventyconfig.passthroughcopy led to the same result.

javascripterror-handlingeleventy

Answer №1

When working with 11ty 2.0, it appears that you do not need to include a return statement in this simple case based on the error message. It's possible that the path to your CSS file is incorrect.

For better organization, consider placing your CSS files in a subdirectory named "css" and then following these steps:

// eleventy.js

module.exports = function(eleventyConfig) {
  // Default output directory: _site

  // Copy 'css/' to '_site/css'
  eleventyConfig.addPassthroughCopy("css");
};

I recommend using the latest version of 11ty for optimal performance. You can refer to the passthroughcopy options here:

Answer №2

Whoops! I totally spaced on providing a solution haha. So, the culprit behind the bug was my mistake in writing .11ty.js instead of .eleventy.js. If anyone else runs into a similar problem, double check your spelling and make sure to thoroughly review the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Spicing up PHP data insertion into the database

I am working with two fields: one is a textarea and the other is an image field. <textarea name="siteplan" id="siteplan" class="form-control" rows="10"></textarea> The image field looks like this: <input type="file" name="image" id="image ...

javascriptmysql

Issue encountered while running the TestCafe Docker Image within a GitLab CI job. Attempting to run automated end-to-end tests on BrowserStack

We are currently attempting to execute end-to-end tests using testcafe on BrowserStack triggered by a gitlab CI job. Unfortunately, an error keeps appearing: Error: spawn /home/user/.browserstack/BrowserStackLocal ENOENT Our approach involves implementin ...

javascripttestingnpmbrowserstacktestcafe

Update selection of dropdown menu upon clicking an image

Is there a way to update the select option value by clicking on an image? I have a dropdown list filled with dates from a database as well as two images, one for moving left and the other for moving right. When the left image is clicked, I want to show the ...

phpjavascriptjquerysql

Tips for avoiding repeated Modal Popup instances and preventing the page from automatically scrolling to the last element when using ReactJS

I've been working on a project where I'm fetching data from a server and displaying 10 different sets of data in Bootstrap cards using the map() function. Each card contains a button to open a modal, along with a Link that shows the route related ...

javascriptreactjsreact-hooksbootstrap-modalreact-bootstrap

Issue with Angular ngFor not updating radio button value when ngModel is set

Hello, I am fairly new to working with Angular and could really use some assistance with a problem I've run into. Essentially, I am receiving an array of objects from an API like this: [{name: "abc", score: 2},{name: ""def, score: ...

javascripthtmlangulartypescriptradio-button

Error in tabs.onUpdated argument in Firefox WebExtensions

I am currently working on developing a straightforward webExtension for Firefox and I would like to implement tabs.onUpdated with a filter. I found an example on the Mozilla website that I decided to use: const pattern1 = "https://developer.mozilla.org/*" ...

javascriptfirefoxfirefox-addon-webextensions

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

Encountering this error message while attempting to synchronize an Ionic Angular project in Xcode using npx cap sync

Every time I try to run npx cap sync on my Ionic Angular project in Xcode, I encounter the following error. [!] The plist file at path `/Users/user/Documents/GitHub/project-name/ios/App/App.xcodeproj/project.pbxproj` doesn't exist. I face the ...

javascriptangularjsxcodeionic-frameworkterminal

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes

When editing rows, I wanted to avoid multiple selections. In order to achieve this, I need to check the condition if(count>1) and display an alert message. I am struggling to figure out how to retrieve the count of selected checkboxes in jqGrid. var m ...

javascriptphpjqueryhtmlajax

Tips on utilizing ajax to load context without needing to refresh the entire page

As a beginner in AJAX, I have some understanding of it. However, I am facing an issue on how to refresh the page when a new order (order_id, order_date, and order_time) is placed. I came across some code on YouTube that I tried implementing, but I'm n ...

javascriptphpjqueryajax

python using selenium to bypass javascript popups

I have a project where I need to visit a specific website and interact with it using the Python selenium module. However, I am encountering a popup (a cookie acceptance form) when trying to access the site with a bot. I must accept this popup in order to p ...

javascriptpythonseleniumpopup

Button click event not triggering JavaScript execution

I am experimenting with HTML, PHP and JS and have encountered a problem. Here is my code: <html> <head> <title> Dummy Code </title> <script> sendMail(){ <?php $to = '<a href="/cdn-cgi/l/email-protection" class ...

phpjavascripthtml

The error message "Type Error: val.toString is not a function - mysql npm" indicates

I'm encountering an issue with the 'mysql' package in NPM on a nodeJS backend and I'm puzzled by this error message: TypeError: val.toString is not a function at Object.escape (/Applications/MAMP/htdocs/nodeJS_livredor/node_modules/sql ...

javascriptmysqlnode.jsnpmpackage

Angular directive specifically meant for the parent element

I am working on a directive that I need to apply to a specific div element without affecting its child elements. The goal is to make the main div draggable, so that when it moves, its child divs move along with it. However, I do not want the child divs to ...

javascripthtmlangularjsangularjs-directive

Looking to simplify the complex JSON structure by converting it into an array using JavaScript

Being a newcomer to javascript, I am struggling with breaking down a complex structure into an array. The current structure is as follows: [ { "Key": "ProducePRINKA0370001", "Record": { "docType": "Produce", "PR ...

javascriptjson

Express JS encountering Firebase Google Sign-In glitch

Whenever a user clicks a button on the HTML page, this function is triggered. The function resides in auth.js and it is called from the server.js page. auth.js const firebase = require("firebase"); static googleSignIn(req,res){ firebase.aut ...

javascriptnode.jsfirebaseexpressfirebase-authentication

Transmit information to Vue.js component

I am encountering an issue while attempting to transfer data from one component to another. Can someone provide assistance? Below is the code snippet: <template> <div class="q-pa-md" style="max-width: 900px"> <div v-if="fields.length" ...

javascriptvue.jsvuejs2vue-component

Incorporate AJAX functionality with a simple HTML button

Upon clicking the button, the AJAX call fails to execute. Below is the HTML code for the buttons: <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}" class="btn btn-primary update" ...

javascripthtmljqueryajax

Disable touch interactions on the body, only allow pinch-zoom on specific elements

I have been attempting to implement the following code: body { touch-action: none; } .left-side { touch-action: pinch-zoom; } <div class="left-side"><img src="image.jpg" /></div> The touch-action: none is functioning properly, but ...

javascriptjqueryhtmlcss

Select a Button to randomly choose another Button

I am currently developing a dynamic Bootstrap OnePage-Website using HTML, CSS, and JavaScript. The highlight of this website is the Team section where users can book appointments with one of three team members by clicking on a corresponding button beneat ...

javascriptjquerybuttonbootstrap-4