Menu
I'm struggling to install foudation js 6 with webpack. I have an "Unexpected token import". I think it's should be related to babel but I can't find wher's the problem.
I use foundation-sites 6.4.1
Here's my webpack.config.js
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var express = require('express')
var path = require('path')
module.exports = {
module: {
loaders: [
{ test: /\.json$/, loader: 'json' },
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
},
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css!sass') },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.(eot|svg|ttf|woff2?).*$/, loader: 'url?limit=10000' },
{ test: /\.(png|jpg|jpeg).*$/, loader: 'url?limit=10000' },
],
},
plugins: [
new ExtractTextPlugin('bundle.[hash].css'),
new HtmlWebpackPlugin({
template: 'src/index.html.ejs',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /fr/),
],
entry: ['./src/index.js', './src/index.scss'],
output: {
path: 'build/',
filename: 'bundle.[hash].js',
},
devServer: {
inline: true,
stats: {
chunks: false,
}
}
}
In my .babelrc
{
"presets": ["es2015", "es2016", "es2017", "stage-0", "react"],
"plugins": ["transform-async-to-generator", "transform-runtime"]
}
In my index.html.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
In my index.js i have this at the top of the file :
import 'script!jquery'
import 'script!what-input'
import 'script!foundation-sites'
Does someone have an idea ?
Thank You
388
asked Dec 08 '25 13:12
The entry point of foundation-sites uses ES modules (import/export), but you're not applying babel-loaderto node_modules, so they won't be transformed. You might be able to import the already transpiled version:
import 'foundation-sites/dist/js/foundation.js'
ES modules are supported out of the box since webpack 2. It's highly recommended to upgrade webpack. The official migration guide should help you with that.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
