collapsible is not a function

[prolink007]

I am having an issue getting the materialize.js to load.

After adding import 'materialize-css';, i am still getting the following error:

TypeError: jQuery(...).collapsible is not a function

Here is a previous issue that could be related, that did not solve my problem. #3

Here is my webpack file:

var webpack = require("webpack");
var path = require("path");

// Webpack Config
var webpackConfig = {
    entry: {
        "materialize-loader": "./src/materialize.config.js",
        "polyfills": "./src/polyfills.browser.ts",
        "vendor": "./src/vendor.browser.ts",
        "main": "./src/main.browser.ts",
    },

    output: {
        path: "./dist",
    },

    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["main", "vendor", "polyfills"],
            minChunks: Infinity
        }),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            jquery: "jquery"
        })
    ],

    module: {
        loaders: [
            // .ts files for TypeScript
            {test: /\.ts$/, loaders: ["awesome-typescript-loader", "angular2-template-loader"]},
            {test: /\.css$/, loaders: ["to-string-loader", "css-loader"]},
            {test: /\.html$/, loader: "raw-loader"},
            {test: /\.scss$/, loaders: ["raw-loader", "sass-loader"]},
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url?limit=10000&mimetype=application/font-woff"
            },
            {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file"}
        ]
    }

};


// Our Webpack Defaults
var defaultConfig = {
    devtool: "cheap-module-source-map",
    cache: true,
    debug: true,
    output: {
        filename: "[name].bundle.js",
        sourceMapFilename: "[name].map",
        chunkFilename: "[id].chunk.js"
    },

    resolve: {
        root: [path.join(__dirname, "src")],
        extensions: ["", ".ts", ".js"],
    },

    devServer: {
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000}
    },

    node: {
        global: 1,
        crypto: "empty",
        module: 0,
        Buffer: 0,
        clearImmediate: 0,
        setImmediate: 0
    }
};

var webpackMerge = require("webpack-merge");
module.exports = webpackMerge(defaultConfig, webpackConfig);

Here is my vendor.browser.ts file.

// Vendors

// Angular 2
import "@angular/platform-browser-dynamic";
import "@angular/platform-browser";
import "@angular/core";
import "@angular/http";
import "@angular/router";

// RxJS 5
import "rxjs/Rx";

// Importing materialize.
import "materialize-loader";
import "materialize-css";

// For vendors for example jQuery, Lodash, angular2-jwt import them here
// Also see src/typings.d.ts as you also need to run `typings install x` where `x` is your module

[maxmumford]

@prolink007 how did you fix this issue? I'm experiencing the same problem

[maxmumford]

For those who also get this problem, the solution that worked for me was to remove the webpack.ProvidePlugin for jQuery from the webpack config, and replace it with the following line in my main typescript file:

import 'jquery';

also installing the following package gives you proper type hinting in the IDE:

npm install @types/jquery