react-generic-app throws webpack unexpected token error on HelloWorld.module.css

Question

I would like to develop using the SharePoint framework; however, we won't be moving to SP2016 or O365 anytime soon.

Found the react-generic-app from https://github.com/SharePoint/sp-dev-samples as an alternative to the real SPFx, but it is throwing the following error after I run 'npm install' and 'gulp serve':

Error - [webpack] 'dist':
./lib/components/HelloWorld/HelloWorld.module.css
Module parse failed: C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\lib\components\HelloWorld\HelloWorld.module.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseStatement (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (C:\react-generic-app2\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\react-generic-app2\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\react-generic-app2\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\react-generic-app2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
 @ ./lib/components/HelloWorld/HelloWorld.module.scss.js 4:0-34

Answer 1

It seems that the generic React app doesn't include a CSS loader which is required by webpack to process CSS files.

See more information about installing and configuring CSS loader for webpack at https://webpack.github.io/docs/stylesheets.html.