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

Is there a way to generate a modal list of values by utilizing bootstrap and angular, while incorporating spring boot as the backend technology?

I'm working on developing a generic "List of Values" feature, which will be a searchable modal containing a natural identifier and description. I have successfully built an AngularJS application in Spring Boot to accomplish this task, but unfortunatel ...

javascriptangularjstwitter-bootstrap

Issue with conditional comment in IE 8 not functioning as expected

Struggling with changing the SRC attribute of my iFrame specifically for users on IE 8 or older. This is the code I have written: <script> var i_am_old_ie = false; <!--[if lte IE 8]> i_am_old_ie = true; <![endif]--> </script> ...

javascriptjqueryhtml

Problems encountered with React Image Magnifiers while attempting to zoom in with Next.js

When I try to use the react-image-magnifiers plugin to make an image zoom in on hover, it works fine without next.js. However, when I integrate it with next.js, the zoom functionality does not work. Could there be an issue in my next.config.js file? This ...

javascriptreactjsnext.js

Is compiling inline sass possible with npm?

Looking for a simple method to achieve this task? I've experimented with sass, node-sass, and tinysass without success. My goal is to compile inline sass in JavaScript, much like the code snippet below: import sassPkg from 'sass-pkg' const ...

javascriptnpmwebpacksass

Stripping CSS prefixes upon file initialization

When developing my application, I have a process in place where I load CSS files on the back-end using Express.JS and then transmit them to the front-end. However, before sending the CSS code to the front-end, I need to: Identify the user's browser; ...

javascriptcssexpressreplace

Unable to make changes to a file authored by a different user within Firestore using Vue.js / Firestore

I appreciate any assistance in advance, as this issue has been causing me a lot of frustration! Currently, I am adhering to the firestore data model where users are able to create their own documents associated with their userID. This ensures that users c ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Is there a solution to rectify the error related to POST net::ERR_CONNECTION_REFUSED?

Every time I try to post via ajax, an error keeps popping up. Here are the snippets of my code: let xhr = new XMLHttpRequest() let data ={ "name": "test", "phone": "12345678", "email": &qu ...

javascriptajaxpost

What are the steps for adding node packages to sublime text?

Is there a way to install node packages directly from Sublime Text instead of using the command line? If so, what is the process for doing this? I'm not referring to Package Control; I'm specifically interested in installing npm packages like th ...

javascriptnpm

Encountered an error while attempting to insert a new user into a MySQL database using the Node, Express, and MySQL package

Currently in the process of creating a CRUD API using NodeJS. My main goal at the moment is to execute a POST request to add a new user to the database. The issue I am facing is that although I can successfully add a new user to the database, my server cra ...

javascriptnode.jsexpress

What could be preventing my Express error handler from being invoked after running lint on my code?

I'm currently working on an Express app that features a custom error handler. The code for the error handler is as follows: app.use((err: Error, _req: express.Request, res: express.Response) => { console.log(err) // ...send back a well formatt ...

expresserror-handlingeslintmiddleware

Reduce the size of JavaScript code in the browser with minification/obfuscation

I am looking for a way to minify/uglify a JavaScript snippet directly in the browser without using tools like webpack or grunt. I have tried using uglify js and other solutions, but they all seem to require the fs module which is not available on the cli ...

javascriptminifyuglifyjs

Executing multiple server-side methods on an AJAX call in ASP.NET MVC: A comprehensive guide

I am facing a situation where I have a method that is called by jQuery, and its result is displayed on a popup. Sometimes, it takes some time to complete and a blank popup appears with processing message. When clicking on close, the popup disappears but th ...

javascriptjqueryajaxasp.net-mvc

Tips on how to ensure that an onClick JS function only runs when radio buttons are selected

I have implemented the formslider library for a form on my website. In the demo, the slide transitions to the next set of questions based on a click event triggered by radio buttons (answers). However, when I attempted to include checkboxes for users to s ...

javascriptjqueryhtml

Implementing multiple filters with jQuery

Make a Selection `<select class="form-control" id="technology"> <option name="sort" value="2g" id="2g"gt;2G</option> <option name="sort" value="3g" id="3g"&g ...

javascriptjquery

Terminate a targeted recipient following the completion of the on event

I am currently running a node service with socket.io and utilizing an event emitter to send updates based on user context. For example, context A may have users 1, 2, and 3 while context B has users 4 and 5. Once a successful connection is established wit ...

javascriptnode.jssocket.iodom-events

The code in the head section is not running as expected

I've been exploring the possibilities of using lambda on AWS in combination with api gateway to create a contact form for a static S3 website, all inspired by this informative blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact ...

javascripthtmlhead

Extract information from an external website using AJAX in Laravel

On my cart page, I utilize ajax to retrieve destination information from the user and provide them with shipping options to calculate their shipping cost. While everything is functioning properly, one issue remains: I am unsure of how to iterate through t ...

javascriptajaxlaravel

Creating a structure for data in Ruby on Rails to facilitate AJAX calls to controller actions

I am in need of a button on my website that can send data to the create action of a controller named "pagetimes". The functionality seems to be partially working, but it is not sending all the specified data. This issue may be due to my inability to struct ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

AngularJS Object Comparison: A Comprehensive Guide

My form initiates a GET request to the server upon loading, receiving data that is stored in 'master' and then copied to 'local' as shown below. $scope.dirty = false; init(data); function init(data) { $scope.master = angular.copy ...

javascriptangularjs

What is the best way to utilize this resulting value as an input?

I am trying to generate a random number using math.random and use that value in the following script: let bday = Math.floor( Math.random() * (30 - 1 + 1) + 1 ); await test.page.select('select[name="day_select"]',bday); However, I am ...

javascriptnode.js