I am facing an issue while using screenfull.js (import screenfull from "screenfull") in a Vue component. Can anyone help me with this problem? Here is the error information.
Version:
Vue: 2.6.14
@vue/cli-service: 5.0.4
Babel-loader: 8.2.5
Vue-loader: 17.0.0
Webpack: 5.73.0
Eslint: 7.32.0
Config:
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
env: {
development: {
plugins: ['dynamic-import-node']
}
},
plugins: ['lodash']
}
vue.config.js
const {defineConfig} = require('@vue/cli-service')
const path = require('path')
const webpack = require('webpack')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = process.env.VUE_APP_TITLE || 'hello'
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV !== 'production',
productionSourceMap: false,
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /\.\/locale/,
contextRegExp: /moment/
})
]
},
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config.when(process.env.NODE_ENV !== 'development', config => {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/
priority: 10,
chunks: 'initial'
},
elementUI: {
chunks: 'all',
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
chunks: 'all',
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
},
echarts: {
chunks: 'all',
test: /echarts/,
name: 'echarts',
enforce: true
},
lodash: {
chunks: 'all',
test: /lodash/,
name: 'lodash',
enforce: true
},
fabric: {
chunks: 'all',
test: /fabric/,
name: 'fabric',
enforce: true
}
}
})
})
}
})