Vue-svg-loader: Met 'Cannot find module' problem using ts

Created on 24 Feb 2019  路  3Comments  路  Source: visualfanatic/vue-svg-loader

latest

Oh i found faq use in typescript
Could Anyone tell me where I need to put this code?

Is adding a index.d.ts file in the module path and pasting the code in it right?

declare module '*.svg' {
  const content: any;
  export default content;
}

export = module

Then why am I still ctaching problems?


I install the module,and I found
image
a red underline.

All the modules are the latest, I got vue @2.6.7 and [email protected]. My cli version is 3.4.1.I don't know what goes wrong

Here are my config files锛孖 tryed several svg.

vue.config.js

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule.use('vue-svg-loader').loader('vue-svg-loader');
  }
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: 'vue-svg-loader',
        test: /\.svg$/u
      }
    ]
  }
};

Most helpful comment

OK, so if you've used Vue Cli to make your project, and you have src/shims-vue.d.ts just paste

declare module '*.svg' {
  const content: any;
  export default content;
}

into that file. It's already wired up. (I have no idea if this is correct, but it works, and seems legit based on the name.)

All 3 comments

Could the author make a official type file and publish as @types/vue-svg-loader please? I really knew nothing about generate an d.ts file

I've solved this way, I'm using vue-cli, note that inline svgs (import "file.svg?inline") still throw errors:
./src/shims-svg.d.ts

declare module '*.svg' {

import Vue from 'vue';

export default Vue;
}

./vue.config.js

  chainWebpack: config => {
    const svgRule = config.module.rule("svg");

    svgRule.uses.clear();

    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
  }

./src/components/Example.vue

<template>
  <logo />
</template>
<script lang="ts">
import Vue from 'vue';
import Logo from '@/assets/sbm_min_logo.svg';

export default Vue.extend({
  data() {
    return {
    };
  },
  components: {
    Logo,
  },
});
</script>

OK, so if you've used Vue Cli to make your project, and you have src/shims-vue.d.ts just paste

declare module '*.svg' {
  const content: any;
  export default content;
}

into that file. It's already wired up. (I have no idea if this is correct, but it works, and seems legit based on the name.)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ryanrca picture ryanrca  路  5Comments

Chucheen picture Chucheen  路  5Comments

simon04 picture simon04  路  5Comments

sashakaralchuk picture sashakaralchuk  路  6Comments

edarioq picture edarioq  路  6Comments