Input type select not working (using Webpack on RoR + React app)

[oruhtra]

I'm trying to create a select field on a form using the Input component, but get the following error :
TypeError: $(...).material_select is not a function (Input.js:68)

I'm using webpack to bundle my app and my external libraries.
In my Webpack config I have the following (to make $ available everywhere):

environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

My component looks like:

import React, { Component } from 'react'
import { Input } from 'react-materialize'

export const renderSelect = (field) => (
  <div className="form-group">
    <label>
      {field.label}
    </label>
    <Input
      className="form-control"
      type="select"
      {...field.input}
    >
      {field.children.map(option => option)}
    </Input>
  </div>
)

My package.json looks like:

...
"dependencies": {
    "@rails/webpacker": "3.5",
    "babel-eslint": "^8.2.6",
    "babel-preset-react": "^6.24.1",
    "chart.js": "^2.7.2",
    "i18n-js": "^3.0.11",
    "jquery": "^3.3.1",
    "materialize-css": "^1.0.0-rc.2",
    "popper.js": "^1.14.3",
    "prop-types": "^15.6.2",
    "rails-erb-loader": "^5.4.2",
    "react": "^16.4.1",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "^16.4.1",
    "react-dropzone": "^4.2.13",
    "react-materialize": "^2.4.2",
    "react-modal": "^3.5.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0"
  },
...

In some other part of my app (that is not rendered by REACT), I successfully use materialize js methods (the following code for example works fine):

import 'materialize-css/dist/js/materialize.js'

function sidenavInit() {
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll(".side-nav");
    var options = {
      closeOnClick: true
    }
    var instances = M.Sidenav.init(elems, options);
  });
}

export default sidenavInit

I looked at all the related issues and answers provided, but none worked in my case. It looks as if the react-materialize module doesn't have access to materialize js methods, and I don't know how to solve that issue... Any help welcome !!

[petergarnaes]

The react-materialize v2 library works with materialize-css v0.100.2, which indeed depends on jQuery, but support for materialize-css v1.0.0 is actively being developed under the 3.0.0-beta branch in react-materialize. Try "materialize-css": "^0.100.2", in your package.json dependencies.

[oruhtra]

Thanks, indeed it works. However I now get the issue "menu.velocity is not a function" when using the SideNav component. Still using the same webpack config (and now "materialize-css": "^0.100.2" in my package.json). Many people seem to be getting that issue but no solution works for me..

SOLUTION I FOUND : Using expose-loader loader for Webpack makes it work just fine !