search

pnp / sp-dev-samples

Code samples for SharePoint add-ins, web hooks and other API samples
MIT License
85 stars 129 forks source link

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

Open noahspan opened 7 years ago

noahspan commented 7 years ago

Category

[ ] Question [x] Bug [ ] Enhancement

Expected or Desired Behavior

Trying to run react-generic-app after initial download and install of npm packages.

Observed Behavior

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:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseStatement (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:727:47) at Parser.pp$1.parseTopLevel (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:638:25) at Parser.parse (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:516:17) at Object.parse (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\acorn\dist\acorn.js:3098:39) at Parser.parse (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\webpack\lib\Parser.js:902:15) at DependenciesBlock. (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\webpack\lib\NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (C:\Users\SpannbN\Documents\Visual Studio 2015\Projects\react-generic-app2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) @ ./lib/components/HelloWorld/HelloWorld.module.scss.js 4:0-34

Steps to Reproduce

Downloaded react-generic-app, ran 'npm install', ran 'gulp serve'

waldekmastykarz commented 7 years ago

The sample code misses CSS loader for webpack. I've submitted a PR with the fix.

ronaldborman commented 7 years ago

@waldekmastykarz Isn't style-loader required as well? In my case although the error is resolved the styles are not applied. After installing and referencing style-loader the component is displayed properly.