I have come across challenges when transpiling node_modules with Nuxt, but the latest version of Nuxt (2.0) seems to have addressed this issue by introducing a transpile option in the nuxt.config.js file.
https://nuxtjs.org/api/configuration-build/#transpile
Below is an excerpt from my configuration:
export default {
router: {
base: '/',
},
build: {
transpile: [
'choices.js',
'lazysizes',
'swiper',
'vee-validate'
],
extractCSS: true
},
srcDir: 'src/',
performance: {
gzip: true
},
render: {
compressor: {
threshold: 100
}
},
dev: false
}
To simplify readability, I have omitted unrelated parts of the code.
Upon running npm run build (nuxt build), I noticed that the compiled JS files contain references to es6 and es7 features like const and let, instead of var.
Further investigation revealed that the issue stems from Swiper, which appears to rely on a component named Dom7 causing this problem.
I am looking for a way to compile these node_modules dependencies into es5 if feasible. However, it seems that my current setup might not be effectively addressing this concern.
While Nuxt uses vue-app for Babel, I even attempted the following without success:
babel: {
presets: [
'@babel/preset-env'
],
plugins: [
'@babel/plugin-syntax-dynamic-import'
]
}
Unfortunately, there was no noticeable change in the final build output.
My Nuxt version is 2.1.0
Any assistance or insights would be highly appreciated. Thank you!