Module build failed: TypeError: Cannot read property 'parse' of undefined

[RISCfuture]

Hey, I'm trying to set up this plugin in my project, but Webpack compilation fails with the following error:

ERROR in ./app/client/silvertip/elements/progress_bar.js
Module build failed: TypeError: /Users/tim/Development/Rails/go/app/client/silvertip/elements/progress_bar.js: Cannot read property 'parse' of undefined
    at new LazyResult (/Users/tim/Development/Rails/go/node_modules/postcss/lib/lazy-result.js:63:23)
    at Processor.process (/Users/tim/Development/Rails/go/node_modules/postcss/lib/processor.js:117:12)
    at getTokens (/Users/tim/Development/Rails/go/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:82:29)
    at exports.default (/Users/tim/Development/Rails/go/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:125:10)
    at PluginPass.ImportDeclaration (/Users/tim/Development/Rails/go/node_modules/babel-plugin-react-css-modules/dist/index.js:156:102)
    at newFn (/Users/tim/Development/Rails/go/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/tim/Development/Rails/go/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/tim/Development/Rails/go/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/tim/Development/Rails/go/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/tim/Development/Rails/go/node_modules/babel-traverse/lib/context.js:150:16)

package.json:

{
  "engines": {
    "node": "6.x",
    "yarn": "1.2.1"
  },
  "dependencies": {
    "@rails/webpacker": "^3.0.2",
    "babel-plugin-react-css-modules": "^3.3.2",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-jest": "20.0.1",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-15": "^1.0.3",
    "eslint": "4.9.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "20.0.1",
    "postcss-cssnext": "^3.0.2",
    "postcss-sass": "^0.2.0",
    "postcss-scss": "^1.0.2",
    "precss": "^2.0.0",
    "react-test-renderer": "^15.6.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-merge": "^4.1.1"
  }
}

.babelrc:

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ],
    [
      "react-css-modules",
      {
        "exclude": "node_modules",
        "webpackHotModuleReloading": true,
        "generateScopedName": "[path]___[name]__[local]___[hash:base64:5]",
        "filetypes": {
          ".sass": {
            "syntax": "postcss-sass",
            "plugins": ["postcss-nested"]
          },
          ".scss": {
            "syntax": "postcss-scss",
            "plugins": ["postcss-nested"]
          }
        }
      }
    ]
  ]
}

Abbreviated JS source file:

import React from 'react'
import './progress_bar.sass'

class ProgressBar extends React.Component {
  render() {
    return <progress styleName="progress" />
  }
}

The Webpack configuration comes from the @rails/webpacker node module. Any help or a direction I should investigate is appreciated. Thanks!

[TheOld]

I'm having the exact same issue 😞

Hey @RISCfuture, have you managed to fix this?

Thanks!

[RISCfuture]

We switched to SCSS :/