反应 - '$' 未定义

Posted 2023-03-08

【中文标题】反应 - \'$\' 未定义

【英文标题】：React - '$' is not defined反应 - '$' 未定义

【发布时间】：2018-07-06 03:15:19

【问题描述】：

我有一个 React Redux 应用程序。我将物化添加为 CSS 框架，但物化需要 jquery。所以我安装了 Jquery 并通过 npm 将它添加到我的项目中。如果我像这样导入 jquery

import $ from 'jquery';

没有错误被抛出并且我能够使用它。但仅限于该组件。所以我添加了 wepback 插件，这样我就可以在我的反应应用程序中调用 $ 了。但是，当我按照 webpacks website 的描述执行此操作时，会出现以下错误。

Line 13:  '$' is not defined 

关于为什么会这样的任何想法？

app.js

import React  from 'react';
import '../styles/index.css';
import Header from './header/Header';

class App extends React.Component 
    constructor(props)
        super(props);
        console.log('Application ready');
    
    componentWillMount()
        $('ul.tabs').tabs();
    
    render = () => (
        <div>
            <Header />
            <div>
                this.props.children
            </div>
        </div>
    )

export default App;

webpack.config.dev.js

    alias: 

  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  jquery: "jquery/src/jquery" // What i added 
  // $: "jquery/src/jquery" 
,

jquery 位于 node_modules 文件夹中，来自 npm 安装，我没有将它添加到任何其他位置。

【问题讨论】：

你应该使用 material-ui: material-ui.com/# 这是一个用于反应的材料设计实现。

与此有关：***.com/questions/28969861/…

【参考方案1】：

要添加 Gatsby.js，您可以 npm i jquery 然后在 gatsby-browser.js 中导入 jquery。

import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min'; // for navbar animation
import 'bootstrap/dist/js/bootstrap.min';

import $ from 'jquery';在相关文件中会检测到$

【参考方案2】：

您已将 jQuery 别名为全局变量 jQuery，而不是 $ - 使用 alias: $: 'jquery' 。

错了，这不是alias 的用途，请参阅https://webpack.js.org/configuration/resolve/

（浏览器）JS 中的全局变量实际上是window 的属性。所以在你的脚本开始时你可以做

import $ from 'jquery';
window.$ = $;

之后它将在全球范围内可用。在它自己的<script> 标签中包含 jQuery 会做同样的事情。但是这些都不是 webpack，有点调皮，不是模块化的。 “正确”的做法是在您需要的每个文件中使用import $ from 'jquery'。是的，如果你在很多地方都需要它，这会很乏味，但这意味着你知道哪里需要 jQuery，哪里不需要，如果你删除了所有使用 jQuery 的组件，jQuery 也会消失。