Importing foundation js package inside next project

问题

I added zurb foundation inside my next project and on the sass side I have no problems importing everything. The problems starts when I want to import the JS packages. I'm not entirely sure where the problem might be, the only thing I could understand this passed days is that it may be a webpack importing problem. Here is the index code

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();

here my 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;
        }
    })
);

the error I get on screen

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];

do I have to modify my next.config.js? or do i have to do something else? Thank You for any help you might give

回答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;

then in the index I used nextjs dynamic module this way

import dynamic from 'next/dynamic';

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

for some motive the sticky sidebar is not working but when console loggin for example

console.log(Foundation)

it returns all the plugins. At least the loading client-side only modules seems to be done

来源：https://stackoverflow.com/questions/59498327/importing-foundation-js-package-inside-next-project