@svgr/rollup is not working along with @rollup/plugin-alias, Unexpected token

[hotyhuang]

🐛 Bug Report

When I use @svgr/rollup and @rollup/plugin-alias together, looks like it cannot understand the alias that I have set up. Here is the error:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
./src/assets/svg/5161.svg (1:0)
1: <svg width="98" height="127" viewBox="0 0 98 127" fill="none" xmlns="http://www.w3.org/2000/svg">
   ^
2: <rect x="0.25" y="0.25" width="97.0464" height="125.788" fill="white" stroke="black" stroke-width="0.5"/>
3: <rect x="51.0234" y="4.70947" width="41.5" height="9.5" rx="0.75" fill="white" stroke="black" stroke-width="0.5"/>

To Reproduce

Below is my configs & code snippet. Then I get the error after typing cmd npm run build.

rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import { terser } from 'rollup-plugin-terser';
import alias from '@rollup/plugin-alias';
import svgr from '@svgr/rollup';

export default {
  input: 'src/index.tsx',
  output: { file: 'dist/modal.esm.js', format: 'es' },
  plugins: [
    json(),
    nodeResolve({ browser: true }),
    commonjs({ include: 'node_modules/**' }),
    replace({ 'process.env.NODE_ENV': '"production"' }),
    typescript({ exclude: [/__mocks__/, /\.story\.tsx?/, /\.test\.tsx?/] }),
    terser(),
    alias({
      entries: {
        '@src': './src'
      }
    }),
    svgr(),
  ],
};

SomeComponent.tsx

import SvgOne from '@src/assets/svg/one.svg';
import SvgTwo from '@src/assets/svg/two.svg';
import SvgThree from '@src/assets/svg/three.svg';
....

in package.json

...
"scripts": {
    "build": "rm -rf dist && rollup -c"
  },

Expected behavior

The rollup cmd should not fail.

Link to repl or repo (highly encouraged)

Sry I cannot share the link, bcs that belongs to my current employer's org... You should be able to easily reproduce by adding @rollup/plugin-alias and use the alias for the svg imports. But let me know if a POC repo is really needed.

Workaround

The errors are gone after I replaced the alias (for svg files only) with relative paths.

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.6.2
 - CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
 - Memory: 1.03 GB / 32.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.13.2 - /usr/local/bin/node
 - npm: Using Hermetic NodeJS v16.13.2
 - 8.1.2 - /usr/local/bin/npm
## npmPackages:
 - @svgr/rollup: ^6.2.1 => 6.2.1 
 - @svgr/webpack: ^6.2.1 => 6.2.1

[MastaAaron]

@hotyhuang From my own digging, it looks like this plugin doesn't properly handle relative paths. It seems to have been coded with the assumption that it will always receive absolute paths from Rollup, so it fails silently when it encounters an SVG import with a relative path (as outputted by the alias plugin). Since the SVGR plugin fails to handle the import, Rollup ends up trying to do so itself and treats the SVG file as JS, leading to the "Unexpected token" error.

The fact that Rollup itself clearly seems to resolve the relative path just fine serves as evidence that the problem is with this plugin. In the meantime, this should fix the immediate issue for you:

alias({
  entries: {
    "@src": path.resolve(__dirname, "./src")
  }
})

[backus]

@MastaAaron THANK YOU. I was debugging the alias plugin + SVGr + rollup for like 2 hours and your tip about relative paths finally helped me fix my problem

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tortilaman]

This is still an issue, FYI.

[solyane2002]

I confirm that this is still an issue FYI @gregberge

[SuperPauly]

Still an issue for me.

[solyane2002]

I finally solved this issue by using alias plugin as follow:

import alias from '@rollup/plugin-alias';
import svgr from '@svgr/rollup';
import path from 'path';
// ....
export default [
  {
//...
plugins: [
// other plugins ...
    alias({
        entries: {
          "@": path.resolve(import.meta.dirname, "./src")
        }
      }),
      svgr(),
  ],

// ...
  },
];

The images are in the folder "assets" under "src".

I use them like this in the source files:

import MyIcon from '@/assets/images/my_icon.svg';

<MyIcon />

Even if you have the path defined in tsconfig.json for the source files, it does not apply for *.svg files, that's why you need the alias plugin too.

Hope it will help.