Issue: svg-components with absolute imports not working

[paul-vd]

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

[paul-vd]

Update:

as for the tslinting part i ended up just adding an index.d.ts under my @types folder and then declaring the modules

declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.svg'
declare module '*.gif'

[AdamT213]

I would like to work on this. @Timer , any advice on where I can start looking?

[paul-vd]

I would like to work on this. @Timer , any advice on where I can start looking?

This should be resolved, as i explained in my update it was just a declaration problem with typescript,
I had to define the declaration for images:

Update:

as for the tslinting part i ended up just adding an index.d.ts under my @types folder and then declaring the modules

declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.svg'
declare module '*.gif'

[chasevida]

For anyone else landing here from Google at 1.30am in the morning whilst trying to deploy a prototype for a pitch, the following format in the index.d.ts resulted in errors for my build:

declare module '*.png'

I had to declare the properties as such:

declare module "*.png" {
  const value: any;
  export default value;
}

[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.

[samerset-rmn]

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.

Thank you! So far, this is the best solution

[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

[dbroadhurst]

fixed VSCode from complaining and works in runtime as expected

import InfoIcon from '.info-solid.svg'

return (<InfoIcon />)

next-env.d.ts

declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.svg'
declare module '*.gif'

next-config.js

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.