I am encountering an issue while attempting to integrate svg-sprite-loader into my project. The error I am facing pertains to the inability to locate certain modules. Can someone offer insight into why this problem is occurring?
Error
The following relative modules could not be found:
./wrench.svg in ./src/assets/svg ^./.*.svg$ …
build/webpack.base.conf.js
{
test: /\.(png|jpe?g|gif)(\?.*)?$/, // removed svg from the list
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.svg(\?.*)?$/,
loader: 'svg-sprite?' + JSON.stringify({
name: '[name]_[hash]',
spriteModule: 'utils/sprite',
prefixize: true
})
}
build/utils/sprite.js
var Sprite = require('svg-sprite-loader/lib/web/sprite')
// Remove visibility:hidden
Sprite.styles.pop()
Sprite.styles.push('display:none')
var globalSprite = new Sprite()
if (document.body) {
globalSprite.elem = globalSprite.render(document.body)
} else {
document.addEventListener('DOMContentLoaded', function () {
globalSprite.elem = globalSprite.render(document.body)
}, false)
}
module.exports = globalSprite
src/main.js
import Icon from './icon.vue'
Vue.component('icon', Icon)
src/icon.vue
<svg class="icon" :class="'icon-' + name">
<use :xlink:href="xlink"/>
</svg>
</template>
<script>
export default {
props: ['name'],
computed: {
xlink () {
return require(`./assets/svg/` + `${this.name}.svg`)
}
}
}
</script>
When attempting to import an icon using a relative path, the following error occurs:
import share from './assets/svg/share.svg'
The specified relative module could not be found: *./src/assets/svg/share.svg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index?0&bustCache!./src/icon.vue