【问题标题】:e(...).foundation is not a function Foundation 6.4 with Webpacke(...).foundation 不是带有 Webpack 的 Foundation 6.4 的函数
【发布时间】:2018-05-23 18:32:08
【问题描述】:

我是 Foundation 6.4 的新手。使用 $(document).foundation(); 时出现错误;

下面是代码:

1.webpack.config.js

const webpack = require('webpack');

module.exports = {
    entry: ['./src/index',
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!foundation-sites/dist/js/foundation.min.js'],
    mode: "production",
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    performance: {
        hints: false
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    module: {
        rules: [
            {
                test: /\.jsx$|\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['react','es2015'],
                    }
                }
            },
        ]
    }
};
  1. index.index

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore,compose} from 'redux';
import reducer from './app/reducers/reducerCombine';
import MainContainer from "./app/container/MainContainer";

require('style-loader!css-loader!foundation-sites/dist/css/foundation.min.css');
$(document).ready(()=>$(document).foundation());

const store= createStore(reducer,compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

ReactDOM.render(
    <Provider store={store}>
        <MainContainer/>
    </Provider>, document.getElementById('root'));

当我运行这个应用程序时,我在控制台中遇到错误:Uncaught TypeError: e(...).foundation is not a function。

任何人都可以帮助我^^。提前致谢:)

【问题讨论】:

    标签: javascript reactjs webpack zurb-foundation zurb-foundation-6


    【解决方案1】:

    尝试导入 jQuery 并将其添加到窗口中:

    import { Foundation } from 'foundation-sites';
    import jquery from 'jquery';
    
    window.jQuery = jquery;
    window.$ = jquery;
    
    Foundation.addToJquery($);
    
    jQuery(document).ready($ => ($(document).foundation()));
    

    【讨论】:

    • 您好,谢谢您的回答^^。方法很好,但是对于我解决的问题。但我会投票给你的答案!