Пытаясь использовать компонентact-materialize в Gatsby.js, получим ReferenceError: $ не определено

Question

У меня есть проект Гэтсби, и я пытаюсь использовать ответ-материализацию, компонент параллакса.Он компилируется, но я получаю ReferenceError: $ не определяется, когда я пытаюсь использовать компонент параллакса.

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',

Также materialize-css не работает, как предполагалось.Я попытался инициализировать компоненты materialize-css в javascript в моей функции componentdidmount (), и это тоже не сработало.

Вот как я его использую:

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'

Answer 1

Мне пришлось импортировать jquery как ни странно

из

import $ from 'jquery'

до

import $ from 'jquery/src/jquery'

из https://github.com/facebook/create-react-app/issues/679#issuecomment-311887619

Answer 2

import $ from 'jquery'

Refrence: https://www.npmjs.com/package/jquery

И инициализируйте его в componentWillMount ()

$(document).ready(function(){
  $('.parallax').parallax();
});