Gatsby project using Parallax component, get ReferenceError: $ is not defined

[albertkimdev]

Description

I have a gatsby project and I am trying to use react-materialize, the parallax component. It compiles but i get ReferenceError: $ is not defined when I try to use a parallax component.

ReferenceError: $ is not defined
Parallax.componentDidMount
C:/Users/Albert/Documents/Albert Site/v2/node_modules/react-materialize/lib/Parallax.js:41
  38 | _createClass(Parallax, [{
  39 |   key: 'componentDidMount',
  40 |   value: function componentDidMount() {
> 41 |     $('.parallax').parallax();
  42 |   }
  43 | }, {
  44 |   key: 'render',

Steps to Reproduce

Just yarn add react-materialize, try and use a parallax component and you will get an error.

I added jquery as a dependency and imported it in my files.

I also changed html.js to include a <script src="jquery"></script> before the body tag. Still got an error.

Also materialize-css doesn't work as intended. I tried to intiailize materialize-css components in javascript in my componentdidmount() function and that didn't work properly either.

Here is how I am using it:

pages/index.js:

import React from 'react'
import styled from 'styled-components'
import 'jquery'
import 'materialize-css/dist/js/materialize.js'
import 'materialize-css/dist/css/materialize.css'
import { Parallax } from 'react-materialize'
import city from '../assets/city.png'
import city2 from '../assets/city.jpg'

class IndexPage extends React.Component {
  render() {
    return (
      <section className="section">
        <div>
          <Parallax imageSrc={city} />
          <div className="section white">
            <h2>Parallax</h2>
            <p>hellloooooo</p>
          </div>
        </div>
      </section>
    )
  }
}

export default IndexPage

layout/index.js

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import styled from 'styled-components'
import y from '../assets/y.png'
import Nav from '../components/nav'
import 'materialize-css/dist/js/materialize.min.js'
import 'materialize-css/dist/css/materialize.min.css'
import './index.css'

[albertkimdev]

I had to import jquery funnily

from

import $ from 'jquery'
to

import $ from 'jquery/src/jquery'
from facebook/create-react-app#679 (comment)

[alextrastero]

Closing then since this is not related to this project