Issue with materialize-css and Webpack, module with an equal name when case is ignored, JQuery

Question

I have a basic single page React/Redux app that i am bundling using Webpack, all is working fine except the following error when i try to load the materialise-css js files. I have tried loading from the NPM module and the compiles source and the errors are the same.

WARNING in ./~/jQuery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/jquery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

I am loading everything at the top of my entry file as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';

import App from './components/app'
import reducers from './reducers'

require('../materialize/css/materialize.css');
require('../materialize/js/materialize.js');
require("../style/main.scss");

and JQuery is loaded from an NPM module as follows:

new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
})

Now everything still works, it loads all the fonts, js files, and everything works/looks correct in the application, but a warning is there for a reason so i would really like to make it go away!

Let me know if you need any more information.

You can view the full source code here https://github.com/gazzer82/freeCodeCamp_Recipes

Thanks

Gareth Jeanne · Accepted Answer · 2016-01-23 00:21:48Z

5

Ok so i fixed this by changing this in materialize.js

jQuery = $ = require('jQuery');

To this

jQuery = $ = require('jquery');

Simples . . . .

answered Jan 23, 2016 at 0:21

Gareth Jeanne

1,4202 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Antoine Jaussoin Over a year ago

Thanks for that, this must be new in one of the last version of materialize, didn't happen before.

szymonm · Accepted Answer · 2016-02-11 10:59:01Z

2

Fortunately there is no need to change materialize.js :-)

In webpack config add:

module.exports = {
  // ...
  resolve: {
      alias: {
        jQuery: "path/to/jquery/dist/jquery"
      }
  }
  // ...
};

More details here: https://github.com/Dogfalo/materialize/issues/2690

answered Feb 11, 2016 at 10:59

szymonm

1,0518 silver badges12 bronze badges

Collectives™ on Stack Overflow

Issue with materialize-css and Webpack, module with an equal name when case is ignored, JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related