Gatsby: "additionalProperties" error with gatsby-plugin-react-css-modules

[jpsear]

Description

Upon upgrading to v2, I am getting an error originating from the gatsby-plugin-react-css-modules package. This package allows me to use the styleName attribute for nicer CSS Modules usage.

Steps to reproduce

• gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
• yarn add gatsby-plugin-sass gatsby-plugin-react-css-modules
• touch gatsby-config.js
• Add the following to gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-sass'
    },
    {
      resolve: 'gatsby-plugin-react-css-modules',
      options: {
        filetypes: {
          '.scss': { syntax: 'postcss-scss' }
        },
        exclude: '\/global\/'
      }
    }
  ]
}

• gatsby develop

Expected result

The site should compile.

Actual result

[ { keyword: 'additionalProperties',
    dataPath: '',
    schemaPath: '#/additionalProperties',
    params: { additionalProperty: 'plugins' },
    message: 'should NOT have additional properties' } ]
here ./.cache/develop-static-entry.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: Invalid configuration
    at PluginPass.Program (/Users/****/Sites/****/hello-world/node_modules/babel-plugin-react-css-modules/dist/index.js:211:17)
    at newFn (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/context.js:146:19)
    at Function.traverse.node (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/index.js:94:17)
    at traverse (/Users/****/Sites/****/hello-world/node_modules/@babel/traverse/lib/index.js:76:12)
    at transformFile (/Users/****/Sites/****/hello-world/node_modules/@babel/core/lib/transformation/index.js:88:29)
    at runSync (/Users/****/Sites/****/hello-world/node_modules/@babel/core/lib/transformation/index.js:45:3)
    at runAsync (/Users/****/Sites/****/hello-world/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/Users/****/Sites/****/hello-world/node_modules/@babel/core/lib/transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  WebpackError: ./.cache/develop-static-entry.js



  - bootstrap:42 NodePath._call
    lib/webpack/bootstrap:42:1

  - bootstrap:29 NodePath.call
    lib/webpack/bootstrap:29:1



  - bootstrap:79 TraversalContext.visitSingle
    lib/webpack/bootstrap:79:1


  - bootstrap:83 Function.traverse.node
    lib/webpack/bootstrap:83:1




  - bootstrap:24 runAsync
    lib/webpack/bootstrap:24:1

Environment

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    Yarn: 1.9.4 - ~/.nvm/versions/node/v8.9.4/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 60.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0 => 2.0.4
    gatsby-plugin-react-css-modules: ^2.0.0 => 2.0.0
    gatsby-plugin-sass: ^2.0.1 => 2.0.1
  npmGlobalPackages:
    gatsby-cli: 2.4.1

[stefanprobst]

This could be because babel-plugin-react-css-modules still uses babel v6, while gatsby v2 now uses babel 7.
Edit: The master branch actually has already been updated to babel7, there just hasn't been a release yet.

[sktt]

and they didn't release since 4 months ago O_O

[stefanprobst]

Have not tested myself, but npm/yarn allow installing packages directly from git:

yarn add https://github.com/gajus/babel-plugin-react-css-modules

Might work as a stop-gap measure

[sktt]

The issue was added in this commit:
https://github.com/gatsbyjs/gatsby/commit/1bda56280e36b13cbd89b6043d8b8bd73e46f00b

pluginOptions will always contain an array, plugins which is shown in the error message:

    ...
    params: { additionalProperty: 'plugins' },

[jpsear]

Sorry about the above. Long day.

@stefanjudis I tried pulling direct from the repo. Yarn does support this, but the repo is completely uncompiled source code, so it was having none of it.

I will wait for @sktt's PR 👍

[sktt]

For now you could for example disable the plugin and throw its code into your own gatsby-node.js in the root directory of the project.

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: `babel-plugin-react-css-modules`,
    options: {
      generateScopedName: `[name]--[local]--[hash:base64:5]`,
      webpackHotModuleReloading: process.env.NODE_ENV !== `production`,
      //...pluginOptions,
    },
  })
}

[jpsear]

@sktt That worked perfectly, thank you. For anyone else also needing this, don't forget to put your actual plugin options in there also:

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: `babel-plugin-react-css-modules`,
    options: {
      generateScopedName: `[name]--[local]--[hash:base64:5]`,
      webpackHotModuleReloading: process.env.NODE_ENV !== `production`,
      filetypes: {
        '.scss': { syntax: 'postcss-scss' }
      }
    }
  })
}

[pieh]

If anyone want to take a stab at fixing this in plugin - https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-react-css-modules/src/gatsby-node.js

Here pluginOptions object need to be sanitized and have plugins field removed from it before passing it as options to babel config

[Tallestthomas]

I'd like to take a shot at this one if it hasn't been claimed yet 👍