为什么我看到 webpack 模块 7 不是一个函数？答案

【问题标题】：why i'm seeing webpack module 7 is not a function?为什么我看到 webpack 模块 7 不是一个函数？
【发布时间】：2019-07-21 10:49:12
【问题描述】：

我正在使用 react js，我正在尝试使用 webticker lib webticker

这是我的代码：

$(document).ready(function(){
    $('#webticker').webTicker()
});


class App extends Component {
..... // the rest of the component then in render 

<ul id="webTicker">
    <li>This List Item will scroll infintely</li>
    <li>And this one will follow it</li>
    <li>Finally when it goes out of screen, it will queue again at the end</li>
</ul>

但我得到这个错误

TypeError: jquery__WEBPACK_IMPORTED_MODULE_7___default(...)(...).webTicker is not a function

我已尝试将其加载到 componentDidMount 并尝试 document.ready 但这也给了我同样的错误。

【问题讨论】：

这意味着该库未正确包含在网页中。将 jQuery 与 React 一起使用通常是个坏主意。
将 JQuery 与 React 一起使用可能会因为这样的原因而出现问题。一个更简单的解决方案是找到一个具有您需要的相同功能的 react 兼容库。
你可以将 JQuery 代码放在一个单独的脚本文件中并在 React 之后加载它。
@KenoClayton 不幸的是，这个库只支持 jquery，我找不到任何替代方案，但你能解释一下如何将 JQuery 代码放在一个单独的脚本文件中并在之后加载它反应
如果我尝试使用我制作的自定义 css 从头开始编写，它会滞后一秒钟，这有点烦人，@KenoClayton

标签： jquery reactjs webpack

【解决方案1】：

JQuery 和 React 一起使用从来都不是一个好主意，所以这个解决方案会尝试让它们分开操作。

考虑到 React 会将自己附加到 DOM 中的特定 div，我们可以将我们的 Web Ticker 放置为它的兄弟。

例如

<!-- React attaches to this -->
<div id="root"></div>

<!-- Web Ticker attaches to this -->
<ul id="webTicker" style="display:none">
    <li>This List Item will scroll infintely</li>
    <li>And this one will follow it</li>
    <li>Finally when it goes out of screen, it will queue again at the end</li>
</ul>

<!-- Don't forget to load scripts -->
<script src="./path/to/jquery.min.js"></script>
<script src="./path/to/jquery.webticker.min.js"></script>
<script src="./path/to/your/scripts.js></script>

现在您只想在 React 已加载时显示该列表，因此您可以执行类似的操作

$(document).ready(function(){
    if ($('#root').children().length > 0) {
        $('#webticker')
          .show()
          .webTicker()
    }
});

【讨论】：