Faking node_modules in CodePen Projects

Update 2020.11.24: with Skypack being around and CodePen suggesting to rewrite your imports, there’s no need to use this hacky workaround anymore.

With CodePen Projects you have a web IDE right in your browser, with preprocessing built-in. But what about installing dependencies via the npm ecosystem? With some minimal effort it’s possible:

All you need to do is make a folder called node_modules, and then inside of that make a file named after the module (e.g. react.js) with the module’s code.

Like so:

├── my-project.js
└── node_modules
    └── react.js
    └── react-dom.js

From then on you can just import the libraries as you would normally do:

// my-project.js
import React from 'react';

…

Faking node_modules in CodePen Projects →
Example →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.