Question

我试图将Zurb Foundation的脚本导入到我的下一个js应用程序中，仅当包含Foundation core时收到以下错误...

/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，但是无论我如何更改导入的名称，我都会收到相同的错误）。

Answer 1

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

我正在导入源代码。

（失败）

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

1 个答案: