Missing dependencies - css-loader and less-loader

[magicspon]

Hi,

I've installed the component via NPM

Then imported:

import ScrollArea from 'react-scrollbar';

On save I'm getting the following error

gulp-notify: [Compile Error] Cannot find module '!!./../../node_modules/css-loader/index.js!./../../node_modules/less-loader/index.js!./scrollbar.less' from '/Users/dave/websites/react/node_modules/react-scrollbar/dist'

[souhe]

Could you give me some more informations. Do you use Webpack(with hot modules or not)?

Have you tried to create an empty project with ScrollArea and some content text only? If so and you still have a problem please send me that code with your gulpfile and webpack.config files.

[vsembobra]

i think he use browserify, i have the same problem

[souhe]

Ok, I'll try to reproduce that using browserify

[magicspon]

@souhe @IndexOf Yup, I'm using Browserify (and gulp). package.json

{
  "name": "MudStone-React",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
  },
  "devDependencies": {
    "apache-server-configs": "^2.14.0",
    "autobind-decorator": "1.3.2",
    "autoprefixer-core": "^5.2.1",
    "babel": "^6.0.0",
    "babelify": "6.4.0",
    "browser-sync": "^2.8.2",
    "browserify": "11.2.0",
    "cheerio": "^0.19.0",
    "classnames": "^2.2.0",
    "connect-history-api-fallback": "1.1.0",
    "critical": "^0.6.0",
    "del": "^1.2.1",
    "glob": "^5.0.14",
    "gulp": "^3.9.0",
    "gulp-cache": "^0.2.10",
    "gulp-changed": "^1.3.0",
    "gulp-concat": "^2.6.0",
    "gulp-html2jade": "^1.1.1",
    "gulp-iconfont": "^4.0.0",
    "gulp-iconfont-css": "^1.0.1",
    "gulp-if": "^1.2.5",
    "gulp-imagemin": "^2.3.0",
    "gulp-inject": "^1.5.0",
    "gulp-jade": "^1.1.0",
    "gulp-jshint": "^1.11.2",
    "gulp-minify-css": "^1.2.1",
    "gulp-notify": "^2.2.0",
    "gulp-postcss": "^6.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-size": "^2.0.0",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-svg-sprite": "^1.2.9",
    "gulp-svg2png": "^0.3.0",
    "gulp-svgmin": "^1.2.0",
    "gulp-svgstore": "^5.0.4",
    "gulp-uglify": "^1.3.0",
    "gulp-uncss": "^1.0.3",
    "gulp-util": "^3.0.6",
    "gulp.spritesmith": "^4.0.0",
    "history": "1.12.5",
    "install": "0.1.8",
    "jshint-stylish": "^2.0.1",
    "node-bourbon": "*",
    "psi": "^1.0.6",
    "re-base": "1.2.1",
    "react": "^0.14.2",
    "react-addons-css-transition-group": "0.14.0",
    "react-catalyst": "0.3.0",
    "react-dom": "0.14.0",
    "react-mixin": "3.0.0",
    "react-router": "1.0.0-rc3",
    "react-scrollbar": "^0.2.2",
    "react-soundplayer": "^0.3.1",
    "react-youtube": "^4.1.2",
    "require-dir": "^0.3.0",
    "run-sequence": "*",
    "vinyl": "^0.5.1",
    "vinyl-buffer": "1.0.0",
    "vinyl-paths": "^1.0.0",
    "vinyl-source-stream": "1.1.0",
    "watchify": "3.4.0"
  },
  "engines": {
    "node": ">=0.12.2"
  },
  "private": true
}

gulp task

var source = require('vinyl-source-stream'),
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    browserify = require('browserify'),
    babelify = require('babelify'),
    watchify = require('watchify'),
    notify = require('gulp-notify'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    buffer = require('vinyl-buffer'),
    browserSync = require('browser-sync'),
    handleErrors = require('../util/handleErrors'),
    reload = browserSync.reload,
    config = require('../config').react,
    sass = require('../config').sass,
    historyApiFallback = require('connect-history-api-fallback');

function buildScript(file, watch) {
  var props = {
    entries: [config.path + file],
    debug : false,
    transform:  [babelify.configure({stage : 0 })]
  };

  // watchify() if watch requested, otherwise run browserify() once 
  var bundler = watch ? watchify(browserify(props)) : browserify(props);

  function rebundle() {
    var stream = bundler.bundle();
    return stream
      .on('error', handleErrors)
      .pipe(source(file))
      // .pipe(buffer())
      // .pipe(uglify())
      .pipe(gulp.dest(config.dest))
      .on('error', handleErrors)
      // If you also want to uglify it
      // .pipe(rename('app.min.js'))
      // .pipe(gulp.dest('./build'))
      .pipe(reload({stream:true}))
  }

  // listen for an update and run rebundle
  bundler.on('update', function() {
    rebundle();
    gutil.log('Rebundle...');
  });

  // run it once the first time buildScript is called
  return rebundle();
}

// gulp.task('babel-react', function() {
//   return buildScript(config.output, false); // this will run once because we set watch to false
// });

gulp.task('babel-react', ['browserSync'], function() {
  gulp.watch(sass.watch, ['sass']);
  return buildScript(config.output, true); // browserify watch for JS changes
});

[souhe]

It was probably problem with Webpack configuration which I used to create bundle. It should be fixed in actual release. Let me know if this resolves your issue

[magicspon]

Hello,

I've pulled down the files rather than the npm package.

I've made a few changes to the code so i'll probably stick with the version i'm running.

I need the realWidth to be dynamic so I've made the following change

var realWidth = ReactDOM.findDOMNode(this.refs.wrapper).children[0].scrollWidth;

Cheers