Posted at

webpackerでswiperを利用する際に Unexpected token: name (Dom7) と出た場合の対処法

More than 1 year has passed since last update.


結論

dom7とswiperをbabel-loaderのexcludeから外す。

// config/webpack/swiper_config.js

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
loader: 'babel-loader'
}
]
}
};

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const swiperConfig = require('./swiper_config')

environment.config.merge(swiperConfig)

module.exports = environment


理由

swiperの3.4.2からES5で配布されなくなったようなので、ビルド時にトランスパイルする必要がある。コードがdom7に依存しているので、あわせてbabel-loaderの除外対象から除外する必要がある。(webpackerのデフォルトはnode_modules全体を除外している)