It doesn't work - Githubissues

nickretallack commented 8 years ago

When I follow the instructions, it displays an empty page in my browser and prints this to the console. I'm using node v4.4.3 on Ubuntu.

ERROR in ./app/components/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./app/components/header.jsx 19:13-31

ERROR in ./app/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./app/index.jsx 23:13-31

ERROR in ./~/react-toolbox/lib/button/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./~/react-toolbox/lib/button/Button.js 39:13-31

ERROR in ./~/react-toolbox/lib/app_bar/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./~/react-toolbox/lib/app_bar/AppBar.js 19:13-31

ERROR in ./~/react-toolbox/lib/ripple/style.scss
Module build failed: ModuleBuildError: Module build failed: 
  @import "./colors";
 ^
      Import directives may not be used within control directives or mixins.
      in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
    at DependenciesBlock.onModuleBuildFailed (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/home/nick/Downloads/react-toolbox-example/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.onRender (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/index.js:272:13)
    at /home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:906:35
    at _arrayEach (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:85:13)
    at Object.<anonymous> (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:898:17)
    at Object.callback (/home/nick/Downloads/react-toolbox-example/node_modules/sass-loader/node_modules/async/lib/async.js:44:16)
    at options.error (/home/nick/Downloads/react-toolbox-example/node_modules/node-sass/lib/index.js:274:32)
 @ ./~/react-toolbox/lib/ripple/Ripple.js 35:13-31
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./app/components/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./app/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/button/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/app_bar/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 2.39 kB [rendered]
        [0] ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/app/style.scss 884 bytes {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/react-toolbox/lib/ripple/style.scss
    Module build failed: 
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /home/nick/Downloads/react-toolbox-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
webpack: bundle is now VALID.

It can also emit these warnings:

npm WARN optional Skipping failed optional dependency /webpack/watchpack/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11

eriwin commented 8 years ago

In the react-toolbox there is a similar issue: https://github.com/react-toolbox/react-toolbox/issues/468

eriwin commented 8 years ago

See https://github.com/react-toolbox/react-toolbox/issues/466#issuecomment-212887893 for a temporary solution

arlair commented 8 years ago

This pull request should fix it: https://github.com/react-toolbox/react-toolbox-example/pull/20

Short version: After node-sass@3.4.2 they fixed a non-compliance issue of libSass compared to Ruby Sass and it breaks react-toolbox Sass. This pull request updates to the specific 3.4.2 version until the react-toolbox Sass is modified.

javivelasco commented 8 years ago

Please try the workaround! I'm going to PR a new approach and the example will be updated fixing this during the weekend

peebles commented 8 years ago

Anyone getting a segfault on Mac OS after npm-installing node-sass 3.4.2, then running npm-build?

 1: v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute)
 2: SassTypes::Boolean::get_constructor()
 3: SassTypes::Factory::initExports(v8::Local<v8::Object>)
 4: RegisterModule(v8::Local<v8::Object>)
 5: node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&)
 6: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&))
 7: v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::(anonymous namespace)::BuiltinArguments<(v8::internal::BuiltinExtraArguments)1>)
 8: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*)
 9: 0x3133350961b
Segmentation fault: 11

$ c++ --version
Apple LLVM version 7.0.2 (clang-700.1.81)
Target: x86_64-apple-darwin14.5.0
Thread model: posix

peebles commented 8 years ago

Seems node v6.1.0 and node-sass somehow don't mix. If I back node off to 5.10.1, I do not get the core dump.

arlair commented 8 years ago

Maybe npm rebuild will help. I think native libraries like node-sass which I believe uses a C library underneath can have issues depending on how you changed your node version.

peebles commented 8 years ago

Was a clean build; rm -rf node_modules; npm install.

On 5/10/16 5:21 PM, Arlair wrote:

Maybe |npm rebuild| will help. I think native libraries like node-sass which I believe uses a C library underneath can have issues depending on how you changed your node version.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/react-toolbox/react-toolbox-example/issues/19#issuecomment-218329872

react-toolbox / react-toolbox-example

It doesn't work #19