Error: Unterminated string constant (Note that you need plugins to import files that are not JavaScript)

[valery-lavrik]

I work in conjunction with tsdx

I'm trying to connect svg files directly with the code, but I get an error when assembling:

that's how I import a svg file:

import ArrowDownIcon from "../assets/icons/arrow-down.svg"
console.log('ArrowDownIcon', ArrowDownIcon);  //  Here I expect to see the svg file code
export { ArrowDownIcon };

What am I doing wrong?

My package.json file:

{
    "version": "0.1.0",
    "license": "MIT",
    "main": "dist/index.js",
    "typings": "dist/index.d.ts",
    "files": [
        "dist",
        "src"
    ],
    "engines": {
        "node": ">=10"
    },
    "scripts": {
        "start": "tsdx watch",
        "build": "tsdx build",
        "test": "tsdx test --passWithNoTests",
        "lint": "tsdx lint",
        "prepare": "tsdx build",
        "size": "size-limit",
        "analyze": "size-limit --why",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build"
    },
    "peerDependencies": {
        "react": ">=16"
    },
    "husky": {
        "hooks": {
            "pre-commit": "tsdx lint"
        }
    },
    "prettier": {
        "useTabs": false,
        "tabWidth": 4,
        "printWidth": 150,
        "semi": true,
        "singleQuote": true,
        "trailingComma": "es5"
    },
    "name": "tnt-uikit-reactjs",
    "author": "lavrik acer",
    "module": "dist/tnt-uikit-reactjs.esm.js",
    "size-limit": [
        {
            "path": "dist/tnt-uikit-reactjs.cjs.production.min.js",
            "limit": "10 KB"
        },
        {
            "path": "dist/tnt-uikit-reactjs.esm.js",
            "limit": "10 KB"
        }
    ],
    "devDependencies": {
        "@babel/core": "^7.22.10",
        "@babel/preset-env": "^7.22.10",
        "@babel/preset-react": "^7.22.5",
        "@babel/preset-typescript": "^7.22.5",
        "@size-limit/preset-small-lib": "^8.2.6",
        "@storybook/addon-essentials": "^7.3.2",
        "@storybook/addon-info": "^5.3.21",
        "@storybook/addon-links": "^7.3.2",
        "@storybook/addon-styling": "^1.3.6",
        "@storybook/addons": "^7.3.2",
        "@storybook/react": "^7.3.2",
        "@storybook/react-webpack5": "^7.3.2",
        "@types/jquery": "^3.5.16",
        "@types/react": "^18.2.20",
        "@types/react-dom": "^18.2.7",
        "babel-loader": "^9.1.3",
        "husky": "^8.0.3",
        "node-sass": "^9.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-is": "^18.2.0",
        "rollup-plugin-inline-svg": "^3.0.3",
        "sass": "^1.66.1",
        "size-limit": "^8.2.6",
        "storybook": "^7.3.2",
        "tsdx": "^0.14.1",
        "tslib": "^2.6.2",
        "typescript": "^5.1.6"
    },
    "dependencies": {
        "@rollup/plugin-image": "^3.0.2",
        "@rollup/plugin-url": "^8.0.1",
        "@svgr/rollup": "^8.1.0",
        "autoprefixer": "^10.4.15",
        "cssnano": "^6.0.1",
        "jquery": "^3.7.0",
        "lodash-es": "^4.17.21",
        "rollup-plugin-postcss": "^4.0.2",
        "rollup-plugin-svg": "^2.0.0",
        "svg-inline-loader": "^0.8.2",
        "svg-react-loader": "^0.4.6"
    }
}

[sionzee]

Hey!

This plugin exports the EcmaScript module and stringifies using the ' apostrophe, as you can see here.

If there is an apostrophe in your SVG file, you must replace it with another symbol, i.e. the quotation mark ".

Please let me know if this is the case for you! Good luck

[valery-lavrik]

I just checked and tweaked the settings a bit. Added @rollup/plugin-url plugin. Now here's what I get:

SVG file with which the problem:

<svg width="10" height="12" viewBox="0 0 10 12" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C5.55228 0 6 0.447715 6 1V8.58579L8.29289 6.29289C8.68342 5.90237 9.31658 5.90237 9.70711 6.29289C10.0976 6.68342 10.0976 7.31658 9.70711 7.70711L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071L0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289C0.683417 5.90237 1.31658 5.90237 1.70711 6.29289L4 8.58579V1C4 0.447715 4.44772 0 5 0Z" fill="currentColor"/>
</svg>

[valery-lavrik]

I tried to debug the variable, and that's what I got in it:

ast:  [
  {
    type: 'text',
    content: 'export default "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.5%209.29199H3.5M17.5%209.29199C18.6046%209.29199%2019.5%2010.1874%2019.5%2011.292V17.292C19.5%2018.3966%2018.6046%2019.292%2017.5%2019.292H3.5C2.39543%2019.292%201.5%2018.3966%201.5%2017.292V11.292C1.5%2010.1874%202.39543%209.29199%203.5%209.29199M17.5%209.29199V7.29199C17.5%206.18742%2016.6046%205.29199%2015.5%205.29199M3.5%209.29199V7.29199C3.5%206.18742%204.39543%205.29199%205.5%205.29199M5.5%205.29199V3.29199C5.5%202.18742%206.39543%201.29199%207.5%201.29199H13.5C14.6046%201.29199%2015.5%202.18742%2015.5%203.29199V5.29199M5.5%205.29199H15.5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3C%2Fsvg%3E"'
  }

I hope this will help in parsing the cause