Solvedeleventy getting data from a .json file in node_modules

For a small project using 11ty I want to pull in a package to the node_modules folder and access some of the data in a .json file within that package.

I'm doing something similar in another project using fractal where I'm using (pseudo code):

module.exports = {
  context: {
    colors: require('path/to/tokens/color-tokens.json')
  }
};

I've tried adding this in a couple of places and I've got 11ty finding the file (it errors if I get the path wrong) but I seem to not be able to access it in nunjucks with something likes this (pseudo code):

{% for item in colors.properties %}
  // code to pull in the relevant values.
{% endear %}

Am what I'm wanting doable (and I've just got it wrong somewhere)? Or do I need to set up a little gulp task to copy the .json file to the relevant _data folder and rename it to the .md file that would be using it?

19 Answers

✔️Accepted Answer

Thanks @robb0wen

Your example made to try and swap styles.colors.properties to styles.colour.properties to match the filenames - it works as expected.

Thanks everyone for taking time to get me through a spelling error 😭

❤️ ❤️ ❤️ ❤️ ❤️

Related Issues:

22
eleventy Slug filter doesn't create url safe slugs.
yup @zachleat it does replace the slug so I just do remove some chars to make it little bit prettier...
20
eleventy Official Asset Pipeline
I've been using a stylesheet.11ty.js template file to compile CSS (via postcss in my case) I have an...
15
eleventy How to create sitemap.xml?
Hi @rolandtoth I’ve created one for my (yet un-launched) site You can use the following template (th...
14
eleventy Eleventy reusable components shortcode
Thanks for thinking out loud here this is super helpful feedback to see what you’re trying to do May...
7
eleventy getting data from a .json file in node_modules
Thanks @robb0wen Your example made to try and swap styles.colors.properties to styles.colour.propert...
3
eleventy Is it possible to paginate collection data?
To answer your second question @paulrobertlloyd the permalink front matter key can use template synt...
716
jekyll Jekyll serve fails on Ruby 3.0
I think you want bundle add webrick. My Environment Software Version(s) Operating System Ubuntu 20.0...
88
vuepress Fix babel useBuiltIns core-js warning
Adding corejs: 3.0.0 in the .babelrc file turned off the warnings. I confirm that this is an issue r...
86
jekyll Cannot install Jekyll on MacOS Mojave
I cannot I used Jekyll on my MacBook Pro without any problem in the previous version of MacOS I upda...
57
jekyll unable to build a jekyll site … invalid date
I've solved it! It seems that you need to place the line exclude: [vendor] in _config.yml found this...
56
vuepress vuepress dev: throws res.getHeader() is not a function
The dependency chain is webpack-serve -> koa-webpack -> webpack-dev-middleware and it's caused by th...
45
jekyll Jekyll 4.0 Ideas
Please please support for i18n At least 2 languages Many plug-ins break or don't work with ghpages. ...
45
vuepress Blog Support roadmap (Resolved)
RSS/JSON Feed Draft post Ability to eliminates the .html extension Split date into subdirs: blog/201...
36
vuepress Hot reload not working
watchpack: 1.6.1 I noticed that the webpack hot update plugin watchpack is now 1.7.2 I compared the ...
36
vuepress Option to automatically list sub-directory in the sidebar
I like this idea too To be honest that's what I expected to happen I've got a docs/components folder...
22
vuepress Automatic Reload not working?
I got it working by downgrading dependency watchpack to 1.6.1 Added resolutions section to package.j...
18
vuepress Unknown Custom Element - <v-#####>
@davision A quick fix for this issue in enhanceApp.js (for 1.0.0-alpha.42): This will (I think) fix ...
16
hugo Add a base set of resource filters/processors
re: @budparr I find tools like PurgeCSS or PurifyCSS—which remove unused CSS—pretty valuable ...
16
jekyll bundler: failed to load command: jekyll
Found this previous issue - ffi/ffi#368 The following fixed my problem: Got it working now! For thos...
14
hugo The big assets handling / resource transformation funcs naming thread
This looks mighty cool but how about using a shorter namespace than resources? Like asset ...
13
hugo Override section url
Just thought I'd chime in and say that this is my single biggest issue using Hugo at the moment ...
13
jekyll jekyll install leads to immediate errors
Something that's not clearly stated in our docs: Running Jekyll commands with recent versions ...
13
wowchemy hugo themes TOC for blog posts
@CarlosVecina Change the file <root dir>/layouts/_default/single.html as follows: and add the follow...
12
hugo Add image processing support for WebP image resources
webp is currently not supported I guess that is probably not crystal clear in the documentation and ...
12
vuepress [Proposal] Plugin API
I actually prefer a simple object-based API as @ycmjason suggested Background Hey guys ...
11
vuepress Has anyone gotten mermaid working?
This is how I got it working on mermaid v7.1.2 and vuepress v0.14.0 And my README.md looks like: ⚠️ ...
10
jekyll Blank new blog generated with Jekyll-3.2.1 on Windows
Temporary Fix I have traced that missing drive letter to site.in_theme_dir(base ...
8
blogdown Problem with blogdown::new_site using starter-hugo-academic
Should be fixed now Please try the development version of blogdown: Thanks! I have posted this issue...
5
jekyll jekyll 3.8.3 | Error: uninitialized constant FFI::Platform::CPU
Hmm. this is indeed frustrating Looks like you'll have to resort to setting up local bundles for eve...
4
blogdown Hugo generated .Summary lacks manual cut-off in .Rmd
It looks like Blogdown knits to html although the partials are properly processed features like summ...
3
assemble yfm in partials doesn't work
Since you're using the built-in Handlebars syntax for the partial: {{> foo }} assemble does not merg...
3
jekyll Defaults: Path scope with subfolders
After a bit of testing it seems like it won't work if the value for path scope ends with a slash So ...
3
blogdown blogdown:::serve_site() keeps opening new browser tabs
@denizCvrl Thank you soooo much! By running blogdown::serve_site() multiple times ...
3
blogdown Getting started with Wowchemy
@apreshill If you are using the latest dev version of blogdown In the NEWS.md it says: When creating...
3557
gatsby Error: ENOSPC: System limit for number of file watchers reached, watch '/home/foldername/abcrypto/static'
It’s hitting your system's file watchers limit Try echo fs.inotify.max_user_watches=524288 | sudo te...
392
gatsby Testing Site with Gatsby Develop from Local LAN
You can also use gatsby develop -H 0.0.0.0 Summary I've searched as best I could ...
305
gatsby Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulContentType", or "ContentfulBlogPostEdge"?
For those having the same error ERROR #85901 GRAPHQL I'm trying to fetch my blogs from contentful an...
146
gatsby [v2] Error: Cannot find module 'core-js/modules/es6.array.filter'
Thanks Pieh yeah tried that no go I'm afraid I did actually just fix this by running npm install --s...
131
gatsby "Gatsby: command not found" on trying to run Gatsby command after installing npm install --global gatsby-cli
@bfeldman89 Here are the steps I took that resolved the issue for me as well based on @pereiraryan's...
117
gatsby Cannot find module '../build/Release/sharp.node'
Had the same error Deleting node_modules .cache public and reinstalling all dependencies fixed it fo...
114
gatsby Error: Cannot find module 'react' - after installing Plugin
This occurred for me when I added gatsby-plugin-sass via npm Description When i followed the documen...
111
zeal Content rendering error in MDN (HTML, JS, CSS) docsets
I find it can fix temporary by remove the CSS.docset\Contents\Resources\Documents\developer.mozilla....
109
gatsby Ambiguous "StoreStateProvider" error for all gatsby commands
I fixed the problem! I used npm to uninstall then (re)install react react-dom and gatsby I did it in...
102
gatsby gatsby command not found
On the latest MacOS I had to update my npm config npm config delete prefix npm config set prefix /us...
88
gatsby Question: How do I query based on gatsby-source-filesystem name?
@tsiq-swyx I'm using something like this to pass the collection field from File to MarkdownRemark Th...
80
gatsby events.js:182 throw er; // Unhandled 'error' event
This fix for me: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysc...
69
gatsby Gatsby@2.11.0 Build failure (JavaScript heap out of memory)
Yeah affects Netlify too I was able to get Netlify to build correctly by adding an environment varia...
68
gatsby Webpack error #98123 when running "gatsby develop"
@coldPen i've been testing this today and this one is kinda tricky to triage Here are the steps i to...
67
gatsby -warn- Multiple node fields resolve to the same GraphQL field
I have the same issue with Strapi in specific the gatsby-source-strapi plugin. might be banal but I ...
64
gatsby install gatsby-transformer-remark breaks 'gatsby develop'
Had this problem today required delete of package-lock.json and also the commands below: ...