"Cannot convert undefined or null to object" with postcss-simple-vars

[akanix42]

The error occurs when the globalVariables option is also in use and the postcss-simple-vars config is empty or has an empty fileOptions array:

"postcss-simple-vars": { },
"postcss-simple-vars": {
  "fileOptions": [  ]
},   

[neoromantic]

I've stumbled upon this problem too. Is there any workaround? My current config is like this:

  "cssModules": {
    "postcssPlugins": {
      "postcss-import": {},
      "postcss-mixins": {},
      "postcss-each": {},
      "postcss-cssnext": {},
      "postcss-simple-vars": {
        "fileOptions": ["style-globals.json"]
      },
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    },
    "ignorePaths": [
      "node_modules"
    ],
    "explicitIncludes": [
      "node_modules/react-toolbox/lib"
    ],
    "extensions": [
      "scss",
      "css"
    ],
    "globalVariables": [
      "style-globals.json"
    ]
  }

And style-globals.json is:

{
  // colors
  "color-white-two": "#f5f5f5"
}

I get the same error you mentioned. As you can see, I tried to add fileOptions, so it isn't empty, but error stays.

[neoromantic]

I've tried to remove globalVariables, leaving only fileOptions, but it's all the same.

[neoromantic]

Actually, I get same error whenever I try to use explicitIncludes for react-toolbox. and ignorePaths on whole node_modules folder. Simple-vars configuration is irrelevant.

[neoromantic]

And I try to use explicitIncludes instead of just including whole node_modules without tests, because of very long compilation time if I do that.

[neoromantic]

So, when I do that:

 25   "cssModules": {
 26     "postcssPlugins": {
 27       "postcss-import": {},
 28       "postcss-mixins": {},
 29       "postcss-each": {},
 30       "postcss-cssnext": {},
 31       "postcss-simple-vars": {},
 32       "postcss-modules-local-by-default": {},
 33       "postcss-modules-extract-imports": {},
 34       "postcss-modules-scope": {}
 35     },
 36     "extensions": [
 37       "scss",
 38       "css"
 39     ],
 40     "ignorePaths": [
 41       "node_modules"
 42     ],
 43     "explicitIncludes": ["node_modules/react-toolbox/lib"]
 44   }

I get that:

=> Errors prevented startup:                  
   
   While processing files with nathantreid:css-modules (for target web.browser):
   native: Not a string or buffer
   at TypeError (native)
   at Hash.update (crypto.js:70:16)
   at sha1 (packages/mss/sha1.js:5:8)
   at IncludedFile.getSourceHash (packages/mss/included-file.js:76:12)
   at CssModulesBuildPlugin.getCacheKey (packages/mss/css-modules-build-plugin.js:268:47)
   at packages/caching-compiler/multi-file-caching-compiler.js:91:55
   at Array.forEach (native)
   at CssModulesBuildPlugin.processFilesForTarget (packages/caching-compiler/multi-file-caching-compiler.js:88:16)
   at CssModulesBuildPlugin.processFilesForTarget (packages/mss/css-modules-build-plugin.js:58:5)
   

[neoromantic]

Any ideas on how could I use explicitIncludes? Because including whole node_modules leads to very slow compilation time.

[akanix42]

There's a bug in explicitIncludes; I'll publish a fix later, but explicitIncludes is really a holdover from the days before Meteor supported importing files from node_modules. I'd recommend modifying your ignorePaths option instead to the following regular expression which will ignore all node_modules except the react-toolbox/lib folder:

    "ignorePaths": [
      "node_modules/(?!react-toolbox/lib)"
    ]