时间戳

首页 > 解决方案 > 将 Foundation 和 jQuery 导入 nextjs Web 应用程序

jquery - 将 Foundation 和 jQuery 导入 nextjs Web 应用程序

问题描述

我正在尝试将 Zurb Foundation 的脚本导入到我的下一个 js 应用程序中，但在包含 Foundation 核心时收到以下错误...

/Users/alasdair_macrae/Sites/merlin/spa_runescape/node_modules/foundation-sites/js/foundation.core.js:3

从'jquery'导入$；

^^^^^^

SyntaxError：不能在模块外使用 import 语句

我正在尝试将其导入布局组件，如下所示...

import $ from "jquery";
import {Foundation} from 'foundation-sites/js/foundation.core.js'
Foundation.addToJquery($);
import {Triggers} from 'foundation-sites/js/foundation.util.triggers'
Triggers.init($, Foundation);
// Components
import Header from "../../components/Header";
import Footer from "../../components/Footer";

/**
 * Default layout for pages containing a header and footer
 * @param props
 * @constructor
 */
const DefaultLayout = (props) => {
    useEffect(() => {
        console.log($);
    }, []);

    return (
        <>
            <Head>
                <title>{props.pageTitle}</title>
            </Head>
            <Header />
            {props.children}
            <Footer />
        </>
    )
};

export default DefaultLayout;

（与这个建议的解决方案非常相似，但是无论我如何更改导入的名称，我都会收到相同的错误）。

标签： jquerytypescriptzurb-foundationnext.js

解决方案

没关系 - 意识到我没有使用 Foundation 的 dist。

我正在导入源代码。

（失败）

推荐阅读