01 Styles/05 Import materialize

[lemoncode]

01 Styles/05 Import materialize

[fjcalzado]

Done, I will generate a new PR. You can reject the old PR #73

[jjreina]

Hi, I also was checking to import materialize from webpack, but when I use the carousel component I get the error 'Uncaught TypeError: $(...).carousel is not a function' http://stackoverflow.com/questions/42878738/use-carousel-of-materialize-via-webpack-2 .

Do yuo know how solve it?.

Thanks

[fjcalzado]

Can I see your webpack.config.js? Did you import the JS part of Materialize? Some components (carousel among others) need to load JS functionality in order to work.

[jjreina]

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = __dirname;

module.exports = {
  entry: {
    app: './students.js',
    appStyle: [
      './mystyle.scss',
    ],
    vendor: [
      'jquery',
    ],
    vendorStyles: [
      './node_modules/bootstrap/dist/css/bootstrap.css',
      './node_modules/materialize-css/dist/js/materialize.js',
    ],
  },
  output: {
    path: path.join(basePath, 'dist'),
    filename: '[chunkhash].[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {loader: 'css-loader', },
            {loader: 'sass-loader', },
          ],
        }),
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: {
            loader: 'css-loader',
          },
        }),
      },
      // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
      // Using here url-loader and file-loader
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      },
    ],
  },
  devServer: {
    port: 8086,
  },
  plugins:[
    // Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html', // Name of file in ./dist/
      template: 'index.html', // Name of template in ./src
      hash: true,
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
    }),
    new ExtractTextPlugin({
      filename: '[chunkhash].[name].css',
      disable: false,
      allChunks: true,
    }),
  ],
};

[fjcalzado]

vendorStyles: [
      './node_modules/bootstrap/dist/css/bootstrap.css',
-     './node_modules/materialize-css/dist/js/materialize.js',
    ],

Note that you are trying to mix CSS and JS into the same vendorStyles bundle. Materialize JS part should go in vendor entry point. Something like this is enough:

vendor: [
      'jquery',
+     'materialize-css', 
    ],

[jjreina]

Hello Javi, I just test your comments but I still have the same error.

[fjcalzado]

I see what you mean Juan, and I was able to reproduce it early this morning.

I have been all the morning trying to find the bug. It was driving me crazy. Damn it! I think I got it now. Let me double check I managed to make it work. The culprit is jquery. We are installing the latest jquery version as a dependency on our own, whereas Materialize seems to be requiring a prior version, it doesn't support jquery v3. Can you check your package.json? Look for jquery version under `"dependencies"', replace it with the proper version:

- "jquery": "^3.1.1"
+ "jquery": "^2.1.4"

Delete node_modules folder and reinstall:

npm install

Now run devserver and check it is working now:

npm start

In the meanwhile, @nasdan or @brauliodiez , could you reopen the issue? or create a new one for bug fixing? How do you usually proceed in these cases?

[nasdan]

We can reopen same issue

[fjcalzado]

By the way, this issue is confusing me. In case we have 2 modules that require same module but with different version? What would webpack do?
In our issue above, we wanted to use jquery 3 while materialize needed jquery 2, why did it fail?

[jjreina]

Great!!! Javi, I have been one week trying solved it and I didn't find the solution.

Thanks.

Note: Also it is necessary:

vendorStyles: [
      './node_modules/bootstrap/dist/css/bootstrap.css',
-     './node_modules/materialize-css/dist/js/materialize.js',
+     './node_modules/materialize-css/dist/css/materialize.css',
    ],