Example app fails to compile scss

[demurgos]

Hi, I am interested in using cycle.js but both the start and build commands fail due to scss. I created a new app with create-cycle-app, reinstalled the dependencies with yarn and tried to run it.

Here are the repro steps:

npx create-cycle-app hello-cycle
cd hello-cycle
rm -rf node_modules package-lock.json
yarn install

Here is the error I get with start:

$ npm run start

> hello-cycle@0.1.0 start /data/projects/hello-cycle
> cycle-scripts start

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /data/projects/hello-cycle/public
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢atl｣: Using typescript@3.2.4 from typescript
ℹ ｢atl｣: Using tsconfig.json from /data/projects/hello-cycle/tsconfig.json (in a forked process)
ℹ ｢atl｣: Checking started in a separate process...
✖ ｢wdm｣: 
ERROR in ./src/css/styles.scss 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> html {
|   width: 100%;
|   height: 100%; }
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/only-dev-server.js ./src/index.ts ./src/css/styles.scss main[3]
ℹ ｢wdm｣: Failed to compile.
ℹ ｢atl｣: Time: 865ms

Here is the error I get with build:

$ npm run build

> hello-cycle@0.1.0 build /data/projects/hello-cycle
> cycle-scripts build

clean-webpack-plugin: /data/projects/hello-cycle/build has been removed.
ℹ ｢atl｣: Using typescript@3.2.4 from typescript
ℹ ｢atl｣: Using tsconfig.json from /data/projects/hello-cycle/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 653ms
Hash: 5f0b32a1036f1714b25c
Version: webpack 4.29.0
Time: 2617ms
Built at: 01/30/2019 12:47:48 PM
 1 asset
Entrypoint main = bundle.5f0b32a1036f1714b25c.js

ERROR in ./src/css/styles.scss
Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> html {
|   width: 100%;
|   height: 100%; }
    at handleParseError (/data/projects/hello-cycle/node_modules/webpack/lib/NormalModule.js:447:19)
    at doBuild.err (/data/projects/hello-cycle/node_modules/webpack/lib/NormalModule.js:481:5)
    at runLoaders (/data/projects/hello-cycle/node_modules/webpack/lib/NormalModule.js:342:12)
    at /data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/data/projects/hello-cycle/node_modules/sass-loader/lib/loader.js:76:9)
    at Object.done [as callback] (/data/projects/hello-cycle/node_modules/neo-async/async.js:8077:18)
    at options.success (/data/projects/hello-cycle/node_modules/node-sass/lib/index.js:308:32)
 @ ./src/css/styles.scss

ERROR in ./src/css/styles.scss 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> html {
|   width: 100%;
|   height: 100%; }
 @ multi ./src/index.ts ./src/css/styles.scss main[1]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! hello-cycle@0.1.0 build: `cycle-scripts build`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the hello-cycle@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/demurgos/.npm/_logs/2019-01-30T11_47_49_029Z-debug.log

I am not familiar with Webpack so I don't know what is happening exactly. It seems that it treats .scss files as if they were Javascript.

[jvanbruegge]

If you want to use yarn, please try with

npx create-cycle-app hello-cycle --yarn

[demurgos]

Thank you for you quick response. I wasn't aware of this flag.

I reinstalled it in a clean directory. I ran the following commands:

npx create-cycle-app hello-cycle --yarn
cd hello-cycle
yarn run build

It leads to the same error:

ERROR in ./src/css/styles.scss
Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> html {
|   width: 100%;
|   height: 100%; }
    at handleParseError (/data/projects/hello-cycle/node_modules/webpack/lib/NormalModule.js:447:19)
    at doBuild.err (/data/projects/hello-cycle/node_modules/webpack/lib/NormalModule.js:481:5)
    at runLoaders (/data/projects/hello-cycle/node_modules/webpack/lib/NormalModule.js:342:12)
    at /data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/data/projects/hello-cycle/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/data/projects/hello-cycle/node_modules/sass-loader/lib/loader.js:76:9)
    at Object.done [as callback] (/data/projects/hello-cycle/node_modules/neo-async/async.js:8077:18)
    at options.success (/data/projects/hello-cycle/node_modules/node-sass/lib/index.js:308:32)
 @ ./src/css/styles.scss

ERROR in ./src/css/styles.scss 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> html {
|   width: 100%;
|   height: 100%; }
 @ multi ./src/index.ts ./src/css/styles.scss main[1]

I tried to eject the config but it still fails. I am currently attaching breakpoints and checking the webpack config exported by configs/webpack.config.js. I found module.rules[2].test to be [/^.*\.scss$/, /^.*\.sass$/]. I believe that this means that these extensions are recognized (but still not properly handled).

[demurgos]

I am still trying to attach breakpoints inside Webpack. It seems that Sass properly converts from SCSS to CSS (the last line of the stack trace is from Sass' success calback). The issue seems to be that the CSS result is then parsed as JS.

[jvanbruegge]

Found the issue: https://github.com/andywer/webpack-blocks/pull/298

[demurgos]

Thank you for the link.

I checked the PR and changes they made to their test cases, then applied them to my ejected webpack config. The following changes fixed my issue:

- const { file, url } = require('@webpack-blocks/assets');
+ const { css, file, url } = require('@webpack-blocks/assets');

# ...

          match(
              ['*.scss', '*.sass'],
              [
+                 css(),
                  sass({
                      includePaths: [appPath('node_modules')],
                      sourceMap: true
                  }),
                  postcss({
                      plugins: [autoprefixer({ browsers: ['last 2 versions'] })]
                  }),

                  env('production', [extractText('[name].[hash].css')])
              ]
          ),

Could you test it yourself and publish a fix to npm? Maybe you need to pass some options to css()? Maybe to handle sourcemaps?

[jvanbruegge]

I released 7.2.1 fixing the issue

[demurgos]

Thank you very much. I will try it out.