question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SyntaxError in `npx svg-to-ts --conversionType files`

See original GitHub issue

I try using svg-to-ts via npx: $ npx svg-to-ts --conversionType files -s ./icons -o ./iconDist

I got following output:


==========================================================
👷 Hi I am svg-to-ts - let's build an awesome icon library
==========================================================
svg-to-ts: ℹ️ We are using the conversion type "files"
svg-to-ts: ✔ Deleting the output folder
svg-to-ts: ✔ Processing SVG files
svg-to-ts: ✔ Generate SVG constants
svg-to-ts: ✔ Generate Type Helper
svg-to-ts: ✔ Generate barrel file
svg-to-ts: ✖ Generate model file
svg-to-ts: SyntaxError: Type expected. (3:27)
  1 | /* 🤖 this file was generated by svg-to-ts*/
  2 | 
> 3 |     export type myIcons = ;export interface MyIcon{
    |                           ^
  4 |         name: myIcons;
  5 |         data: string;}

node version: v16.13.1 ppm version: 8.1.2

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Garbeecommented, Jan 18, 2022

I’m hitting this same issue as well. For context what I’m doing is running it against @material-design-icons/svg located in node_modules (a few directories up due to some other project issues I’m working on.)

Running with svg-to-ts --config={path} in my package.json script for this.

Sample config:

const path = require('path');

const outputDirectory = path.resolve(__dirname, '..', 'test-icon-output');

const svgToTsConfig = {
  srcFiles: ['../../../node_modules/@material-design-icons/svg/**/*.svg'],
  conversionType: 'files',
  outputDirectory,
  interfaceName: 'MyIcon',
  typeName: 'MyIconName',
  generateType: true,
  iconsFolderName: 'generated',
  delimiter: 'SNAKE',
  modelFileName: 'whatever-icon.model',
  barrelFileName: 'generated-icons-barrel',
  svgoConfig: {
    plugins: [
      'cleanupAttrs',
    ],
  },
  compileSources: false,
};

module.exports = svgToTsConfig;

Still doing some digging to try and see where the root cause is. Perhaps the extra details of what I’m targeting to convert may be useful though.

Update:

Just figured out part of my problem. The relative path for source files was running from where the command was, not the file. I updated my config to make srcDir in the same way as the output directory. Then appended **/*.svg to it for the srcFiles config.

I’m now past the outright failure and onto other issues to try and figure out.

0reactions
kreuzerkcommented, Mar 31, 2022

@Garbee Thx a lot for the feedback. Feel free to open another issue once you know which source file namings caused the failure. Thx for the collaboration 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

svg-to-ts - npm
svg -to-ts is a helper tool that converts your SVG icons to TypeScript. svg-to-ts can convert SVGs to either one TypeScript file with ......
Read more >
Jest: SVG require causes "SyntaxError: Unexpected token <"
Edit: It appears to be happening the first place where i use require to load a static .svg file. Why can it not...
Read more >
SVGR generates invalid react component #11753 - GitHub
Describe the bug I've just upgraded to react-scripts 5.0 but my simple import of a Logo svg fails with the error: ERROR in...
Read more >
export-svg-loader - npm Package Health Analysis - Snyk
Extension that svg file is going to be exported. Default to png . fileName - (Optional). A template string for the output file...
Read more >
How to Load SVG with React and Webpack | Pluralsight
In this guide, we'll learn about Scalable Vector Graphics (SVG) and ... 1npm i svg-url-loader --save-dev. node. Add to webpack.config.js :.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found