Issue: svg-components with absolute imports not working

Examples bug report

Example name

custom-server-typescript svg-components with-absolute-imports

Describe the bug

with the svg-components and absolute import the svg’s are not found

[ error ] ./components/cowsay.tsx
Error: Cannot find module 'svg/cat.svg' from '/Users/Projects/Playground/next/components' 

with tslint it does not see .jpg, .svg or any images as paths but instead as modules

Absolute Paths: Cannot find module 'svg/cat.svg.ts(2307) Cannot find module ‘images/pexels-photo.jpg’.ts(2307)

Relative Paths: Cannot find module ‘…/assets/svg/cat.svg’.ts(2307) Cannot find module ‘…/assets/images/pexels-photo.jpg’.ts(2307)

( as i side note i added paths to my tsconfig )

    "paths": {
      "images/*": ["assets/images/*"],
      "svg/*": ["assets/svg/*"]
    },

To Reproduce

https://github.com/PaulPCIO/next.js-issues-svg-absolute-imports-tslint

uncomment lines in components/ImageExamples.tsx

• https://github.com/PaulPCIO/next.js-issues-svg-absolute-imports-tslint/blob/e3b6490d2456abcf6c0f5f4caba081cc28662c82/components/ImageExamples.tsx#L4
• https://github.com/PaulPCIO/next.js-issues-svg-absolute-imports-tslint/blob/e3b6490d2456abcf6c0f5f4caba081cc28662c82/components/ImageExamples.tsx#L42

Expected behavior

1. Expect SVG’s to import from absolute paths
2. Expect tslint to recognise image importations

Screenshots

#issue 1:

import Absolute_CatSVG from 'svg/cat.svg'

#issue 2: RESOLVED

System information

• OS: macOS
• Version of Next.js: 8.1.0

[hoangvvo]

Not sure if it is related but I recently stumbled upon this while using Next.js absolute import with babel-plugin-inline-react-svg and expected import SvgThing from '@/assets/svg/thing.svg' magically works. It won’t.

I guess because it is Babel related, not Webpack related so absolute import won’t work out of the box. Also this

My solution is to create a index.ts in assets/svg and reexports the svgs (export { default as SvgThing } from './thing.svg') and import from that file instead of directly from the .svg files.

[EzraBerendsen]

Not sure if it is related but I recently stumbled upon this while using Next.js absolute import with babel-plugin-inline-react-svg and expected import SvgThing from '@/assets/svg/thing.svg' magically works. It won’t.

I guess because it is Babel related, not Webpack related so absolute import won’t work out of the box. Also this

My solution is to create a index.ts in assets/svg and reexports the svgs (export { default as SvgThing } from './thing.svg') and import from that file instead of directly from the .svg files.

If I use this I get the following error: index.ts: pass.get(...) is not a function