将 Foundation 和 jQuery 导入 nextjs Web 应用程序答案

【问题标题】：Importing Foundation and jQuery into nextjs web application将 Foundation 和 jQuery 导入 nextjs Web 应用程序
【发布时间】：2020-02-11 11:52:29
【问题描述】：

我正在尝试将 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;

（与this suggested solution 非常相似，但是无论我如何更改导入的名称，我都会收到相同的错误）。

【问题讨论】：

import 只能在 ES6 项目中使用，并且需要使用正确的解析器，比如 babel。

标签： jquery typescript zurb-foundation next.js

【解决方案1】：

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

我正在导入源代码。

（失败）

【讨论】：