Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Picking LESS results in build issues #11

Closed
aalemayhu opened this issue Sep 25, 2019 · 6 comments
Closed

Picking LESS results in build issues #11

aalemayhu opened this issue Sep 25, 2019 · 6 comments

Comments

@aalemayhu
Copy link
Contributor 

Built at: 09/25/2019 3:28:31 PM
                               Asset       Size  Chunks                         Chunk Names
4051318745a2ae60f08df2fefb9009ff.png   78.2 KiB          [emitted]
                          index.html  486 bytes          [emitted]
        main.0d5fb15adb293a46e5ca.js    470 KiB    main  [emitted] [immutable]  main
Entrypoint main = main.0d5fb15adb293a46e5ca.js
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./source/index.imba ./source/index.less ./source/index.html 64 bytes {main} [built]
[./node_modules/imba/imba.imba] 51 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./source/components/app.imba] 845 bytes {main} [built]
[./source/index.html] 431 bytes {main} [built]
[./source/index.imba] 222 bytes {main} [built]
[./source/index.less] 2.02 KiB {main} [built] [failed] [1 error]
    + 37 hidden modules

ERROR in ./source/index.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/scanf/src/tmp/hello-options-less/node_modules/less-loader/dist/index.js:8:36)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at runLoaders (/Users/scanf/src/tmp/hello-options-less/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:172:11
    at loadLoader (/Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/loadLoader.js:32:11)
    at iteratePitchingLoaders (/Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:176:18
    at loadLoader (/Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/loadLoader.js:47:3)
    at iteratePitchingLoaders (/Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/scanf/src/tmp/hello-options-less/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
 @ multi ./source/index.imba ./source/index.less ./source/index.html main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./source/index.html] 431 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/less-loader/dist/cjs.js!source/index.less:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./source/index.less] 836 bytes {mini-css-extract-plugin} [not cacheable] [built] [failed] [1 error]

    ERROR in ./source/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./source/index.less)
    Module build failed (from ./node_modules/less-loader/dist/cjs.js):
    Error: Cannot find module 'less'
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
        at Function.Module._load (internal/modules/cjs/loader.js:520:25)
        at Module.require (internal/modules/cjs/loader.js:650:17)
        at require (internal/modules/cjs/helpers.js:20:18)
        at Object.<anonymous> (/Users/scanf/src/tmp/hello-options-less/node_modules/less-loader/dist/index.js:8:36)
        at Module._compile (internal/modules/cjs/loader.js:702:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
        at Module.load (internal/modules/cjs/loader.js:612:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
        at Function.Module._load (internal/modules/cjs/loader.js:543:3)
ℹ ｢wdm｣: Failed to compile.
[...]
@aalemayhu
Copy link
Contributor Author

Also seeing similar issue for SASS

index.sass:1 Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...onsolata:700');": expected 1 selector or at-rule, was "root : {"
        on line 3 of /Users/scanf/src/tmp/hello-options-sass/source/index.sass
>> :400,700|Black+Han+Sans|Inconsolata:700');

   ------------------------------------------^

    at runLoaders (:8080/Users/scanf/src/tmp/hello-options-sass/node_modules/webpack/lib/NormalModule.js:316)
    at :8080/Users/scanf/src/tmp/hello-options-sass/node_modules/loader-runner/lib/LoaderRunner.js:367
    at :8080/Users/scanf/src/tmp/hello-options-sass/node_modules/loader-runner/lib/LoaderRunner.js:233
    at context.callback (:8080/Users/scanf/src/tmp/hello-options-sass/node_modules/loader-runner/lib/LoaderRunner.js:111)
    at Object.render [as callback] (:8080/Users/scanf/src/tmp/hello-options-sass/node_modules/sass-loader/dist/index.js:73)
    at Object.done [as callback] (:8080/Users/scanf/src/tmp/hello-options-sass/node_modules/neo-async/async.js:8067)
    at options.error (:8080/Users/scanf/src/tmp/hello-options-sass/node_modules/node-sass/lib/index.js:294)
    at eval (index.sass:1)
    at Object../source/index.sass (main.4710922f5e69b6098706.js:654)
    at __webpack_require__ (main.4710922f5e69b6098706.js:20)
    at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:3:1)
    at Object.1 (main.4710922f5e69b6098706.js:665)
    at __webpack_require__ (main.4710922f5e69b6098706.js:20)
    at main.4710922f5e69b6098706.js:84
    at main.4710922f5e69b6098706.js:87
(anonymous) @ index.sass:1
./source/index.sass @ main.4710922f5e69b6098706.js:654
__webpack_require__ @ main.4710922f5e69b6098706.js:20
(anonymous) @ client:3
1 @ main.4710922f5e69b6098706.js:665
__webpack_require__ @ main.4710922f5e69b6098706.js:20
(anonymous) @ main.4710922f5e69b6098706.js:84
(anonymous) @ main.4710922f5e69b6098706.js:87
client:52 [WDS] Live Reloading enabled.
client:150 [WDS] Errors while compiling. Reload prevented.
errors @ client:150
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:63
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:888
SockJS._transportMessage @ sockjs.js:886
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2962
client:159 ./source/index.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...onsolata:700');": expected 1 selector or at-rule, was "root : {"
        on line 3 of /Users/scanf/src/tmp/hello-options-sass/source/index.sass
>> :400,700|Black+Han+Sans|Inconsolata:700');

   ------------------------------------------^

    at runLoaders (/Users/scanf/src/tmp/hello-options-sass/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/scanf/src/tmp/hello-options-sass/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/scanf/src/tmp/hello-options-sass/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/scanf/src/tmp/hello-options-sass/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/Users/scanf/src/tmp/hello-options-sass/node_modules/sass-loader/dist/index.js:73:7)
    at Object.done [as callback] (/Users/scanf/src/tmp/hello-options-sass/node_modules/neo-async/async.js:8067:18)
    at options.error (/Users/scanf/src/tmp/hello-options-sass/node_modules/node-sass/lib/index.js:294:32)
errors @ client:159
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:63
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:888
SockJS._transportMessage @ sockjs.js:886
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2962

@athif23
Copy link
Owner

athif23 commented Sep 25, 2019

Okay, my fault. I forgot to add less in package.json and removing the ; in index.sass. Will do quick fix. Thanks for telling me.

@athif23
Copy link
Owner

athif23 commented Sep 25, 2019

Okay, should be fixed now. Try the latest version. Also maybe you can try the update command.

@aalemayhu
Copy link
Contributor Author

Still seeing build issues with the LESS and SASS options.

isabel $ start-imba --version
0.2.1

LESS

[./source/index.less] 1.02 KiB {main} [built] [failed] [1 error]
    + 37 hidden modules

ERROR in ./source/index.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):



@import "https://fonts.googleapis.com/css?family=Gothic+A1:400,700|Black+Han+Sans|Inconsolata:700";
^
Can't resolve './https://fonts.googleapis.com/css?family=Gothic+A1:400,700|Black+Han+Sans|Inconsolata:700' in '/Users/ccscanf/src/tmp/hello-imba-less/source'
      in /Users/ccscanf/src/tmp/hello-imba-less/source/index.less (line 3, column 0)
    at runLoaders (/Users/ccscanf/src/tmp/hello-imba-less/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/ccscanf/src/tmp/hello-imba-less/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/ccscanf/src/tmp/hello-imba-less/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/ccscanf/src/tmp/hello-imba-less/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./source/index.imba ./source/index.less ./source/index.html main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./source/index.html] 431 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/less-loader/dist/cjs.js!source/index.less:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./source/index.less] 443 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

    ERROR in ./source/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./source/index.less)
    Module build failed (from ./node_modules/less-loader/dist/cjs.js):



    @import "https://fonts.googleapis.com/css?family=Gothic+A1:400,700|Black+Han+Sans|Inconsolata:700";
    ^
    Can't resolve './https://fonts.googleapis.com/css?family=Gothic+A1:400,700|Black+Han+Sans|Inconsolata:700' in '/Users/ccscanf/src/tmp/hello-imba-less/source'
          in /Users/ccscanf/src/tmp/hello-imba-less/source/index.less (line 3, column 0)

SASS

[./source/index.sass] 1.09 KiB {main} [built] [failed] [1 error]
    + 37 hidden modules

ERROR in ./source/index.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Illegal nesting: Only properties may be nested beneath properties.
        on line 14 of source/components/app.sass
>> 		.title {

   --^

    at runLoaders (/Users/ccscanf/src/tmp/hello-imba-sass/node_modules/webpack/lib/NormalModule.js:316:20)
    at /Users/ccscanf/src/tmp/hello-imba-sass/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/ccscanf/src/tmp/hello-imba-sass/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/ccscanf/src/tmp/hello-imba-sass/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/Users/ccscanf/src/tmp/hello-imba-sass/node_modules/sass-loader/dist/index.js:73:7)
    at Object.done [as callback] (/Users/ccscanf/src/tmp/hello-imba-sass/node_modules/neo-async/async.js:8067:18)
    at options.error (/Users/ccscanf/src/tmp/hello-imba-sass/node_modules/node-sass/lib/index.js:294:32)
 @ multi ./source/index.imba ./source/index.sass ./source/index.html main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./source/index.html] 431 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!source/index.sass:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./source/index.sass] 244 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

    ERROR in ./source/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./source/index.sass)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Illegal nesting: Only properties may be nested beneath properties.
            on line 14 of source/components/app.sass
    >> 		.title {

       --^

ℹ ｢wdm｣: Failed to compile.

@athif23 athif23 reopened this Sep 26, 2019
@athif23
Copy link
Owner

athif23 commented Sep 26, 2019

I have never used less, so I don't really know what the error is about. But I would just try to make the error disappear for now. If there's someone who know or used to less, and know what's the problem in there, please tell me, I would immediately fix it or you can PR it.

Until then, I would open this issue.

@aalemayhu
Copy link
Contributor Author

The LESS example works fine with the latest version but the SASS one is still broken. Looks it's a indentation issue opened up a pull request here #12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@aalemayhu @athif23