Can't get slick to "import/require" using WebPack, maybe slick doesn't implement a WebPack supported module format?

So I’m doing this:

require('./main.css');
var Jquery = require('jquery');
//var Slick = require('slick');
var React = require('react');

Which works, I get no errors, but if I uncomment the “slick require” I start getting an error:

ReferenceError: require is not defined

I’m new to the whole “js import” thing but am trying out WebPack, and I’m thinking that perhaps slick doesn’t implement a webpack supported “module format”, see: https://github.com/webpack/docs/wiki/shimming-modules

In some cases webpack cannot parse some file, because it has a unsupported module format or isn’t even in a module format.

Could this be true? I think it’s suppose to support “AMD” and “CommonJS” but I may be wrong.

My code is just this code with slick and jquery added.

Oh and here is my config file:

 var webpack = require('webpack');
 var path = require('path');
 var bower_dir = path.join(__dirname, 'bower_components');
 var node_modules_dir = path.join(__dirname, 'node_modules');

 var config = {
   addVendor: function (name, path) {
     this.resolve.alias[name] = path;
     this.module.noParse.push(path);
   },
   context: __dirname,
   entry: {
     app: ['webpack/hot/dev-server', './app/main.js']
   },
   output: {
     publicPath: '/',
     path: path.resolve(__dirname, process.env.NODE_ENV === 'production' ? './dist/' : './build'),
     filename: 'bundle.js'
   },
   resolve: {
     alias: {}
   },
   module: {
     noParse: [],
     loaders: [{
       test: /\.js$/,
       loader: 'jsx-loader',
       exclude: [bower_dir, node_modules_dir]
     }, {
       test: /\.css$/,
       loader: 'style-loader!css-loader'
     }, {
       test: /\.(woff|png)$/,
       loader: 'url-loader?limit=100000'
     }]
   },
   plugins: [
     new webpack.optimize.CommonsChunkPlugin('app', null, false)
   ]
 };

 config.addVendor('react', path.resolve(bower_dir, 'react/react.min.js'));
 config.addVendor('jquery', path.resolve(bower_dir, 'jquery/dist/jquery.min.js'));
 config.addVendor('slick', path.resolve(bower_dir, 'slick.js/slick/slick.min.js'));

 module.exports = config;

[TomOne]

This works for me (without exposing jQuery as global):

import $ from 'jquery';
import 'slick-carousel';

$('.some-element').slick();

[tnormington]

I’m able to import slick js files with webpack like this:

import $ from 'jquery'
import 'slick-carousel'

Then I import the scss files with the @import sass method like this:

$slick-font-path: "~slick-carousel/slick/fonts/"
$slick-loader-path: "~slick-carousel/slick/"
@import "~slick-carousel/slick/slick.scss"
@import "~slick-carousel/slick/slick-theme.scss"

This method lets me override scss variables before I import. I’m using a css-loader, sass-loader, an file-loader with webpack.