Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Official Plugin
View plugin on GitHub


Provides drop-in support for CoffeeScript and CJSX.


npm install gatsby-plugin-coffeescript

How to use

  1. Include the plugin in your gatsby-config.js file.
  2. Write your components in CJSX or CoffeeScript.
// in gatsby-config.js
plugins: [
  // no configuration
  // custom configuration
    resolve: `gatsby-plugin-coffeescript`,
    // options are passed directly to the compiler
    options: {},


First, note that CoffeeScript + React is a troubled combination. This plugin relies upon deprecated modules that may someday prove to be dysfunctional or otherwise deficient.

Furthermore, note that the installed version of CoffeeScript is @next. This is not optional - named exports are required for page queries to work properly.

You will need to manually edit your coffee-loader installation and install coffeescript separately in your project directory to ensure that CoffeeScript@next is being loaded. The very first line of source in the former’s index.js should be the following: note the lack of dash.

var coffee = require("coffeescript")
© 2023 Gatsby, Inc.