I'm new to Foundation 6.4. I have a error when i use $(document).foundation();
Here is following Code:
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'],
}
}
},
]
}
};
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'));
When i run this app, i got a error in console: Uncaught TypeError: e(...).foundation is not a function.
Anyone can help me^^. Thank in advance :)
Try importing jQuery and adding it to the window:
import { Foundation } from 'foundation-sites';
import jquery from 'jquery';
window.jQuery = jquery;
window.$ = jquery;
Foundation.addToJquery($);
jQuery(document).ready($ => ($(document).foundation()));