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

Answer 1

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

jQuery = $ = require('jQuery');

To this

jQuery = $ = require('jquery');

Simples . . . .