Question

我在下一个项目中添加了zurb基金会，在sass方面，我导入所有内容都没有问题。当我要导入JS包时，问题就开始了。我不完全确定问题可能在哪里，我过去几天所能理解的唯一一件事就是这可能是webpack导入问题。这是索引代码

import { useState, Component } from 'react';
import { connect } from 'react-redux';
import 'resources/main.scss';
import type { State } from 'AppState/Types';
import { StickySideBar } from 'components/stickySideBar';
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';
import $ from 'jquery';
window.jQuery = window.$ = $;
// Foundation
import { Foundation } from 'foundation-sites/js/foundation.core.js';
Foundation.addToJquery($);
import { Triggers } from 'foundation-sites/js/foundation.util.triggers.js';
Triggers.init($, Foundation);

$(document).foundation();

这是我的next.config.js

const path = require('path');
const withSass = require('@zeit/next-sass');
const withOffline = require('next-offline');

module.exports = withOffline(
    withSass({
        webpack(config, options) {
            config.resolve.alias['resources'] = path.join(__dirname, './resources');
            config.resolve.alias['components'] = path.join(__dirname, './components');
            config.resolve.alias['AppState'] = path.join(__dirname, './AppState');
            config.resolve.alias['SideEffects'] = path.join(
                __dirname,
                './SideEffects'
            );
            config.resolve.alias['Dependencies'] = path.join(
                __dirname,
                './Dependencies'
            );
            config.resolve.alias['StateUpdaters'] = path.join(
                __dirname,
                './StateUpdaters'
            );
            config.resolve.alias['node_modules'] = path.join(
                __dirname,
                './node_modules'
            );
            return config;
        }
    })
);

我在屏幕上看到的错误

SyntaxError: Unexpected identifier
(anonymous function)
C:\Users\francesco.diruscio\Desktop\Workspace\awwwardsbrasserie\awwards-test-1-birreria\node_modules\foundation-sites\js\foundation.core.js:3
Module._compile
internal/modules/cjs/loader.js:721:23
Module._extensions..js
internal/modules/cjs/loader.js:787:10
Module.load
internal/modules/cjs/loader.js:653:32
tryModuleLoad
internal/modules/cjs/loader.js:593:12
Function.Module._load
internal/modules/cjs/loader.js:585:3
Module.require
internal/modules/cjs/loader.js:690:17
require
internal/modules/cjs/helpers.js:25:18
foundation-sites/js/foundation.core.js
webpack:/external "foundation-sites/js/foundation.core.js":1
> 1 | module.exports = require("foundation-sites/js/foundation.core.js");
View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];

我必须修改next.config.js吗？还是我必须做其他事情？谢谢您提供的任何帮助

Answer 1

import $ from 'jquery';
window.jQuery = window.$ = $;
// Foundation
import { Foundation } from 'foundation-sites/js/foundation.core.js';
Foundation.addToJquery($);
import { Triggers } from 'foundation-sites/js/foundation.util.triggers.js';
Triggers.init($, Foundation);

$(document).foundation();

const StickySideBar = props => {
    return (
        <div
            data-sticky-container
            data-margin-top='0'
            className='cell small-3'
            id='side-bar-container'
        >
            <div className='grid-y side-bar sticky' data-sticky>
                {props.children}
            </div>
        </div>
    );
};

export default StickySideBar;

然后在索引中以这种方式使用nextjs动态模块

import dynamic from 'next/dynamic';

const StickySideBar = dynamic(() => import('components/stickySideBar'), {
    ssr: false
});

出于某种动机，粘性侧边栏不起作用，但是例如在控制台登录时

console.log（基金会）

它返回所有插件。至少似乎只加载了客户端模块

在下一个项目中导入Foundation js包

1 个答案: