1

I'm trying to import svg file in NEXT.js using babel-plugin-inline-react-svg.

Followed all instructions and it works fine.

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    "inline-react-svg"
  ]
}

// image.tsx

import styled from 'styled-components';
import BackgroundImage from '../public/assets/img.svg';
export const WhyChooseUsSection = () => {
    return <>
                <div className="background">
                    <BackgroundImage/>
                </div>
                <style jsx>{`
                    div {
                        position: relative;
                        width: 100%;
                    }
                `}</style>
            </>
}

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

But it occurs warning.

Warning: Invalid attribute name: `'data-name'`

Is this Because of Typescript? How can I fix it?

BlueLotus
  • 81
  • 2
  • 11
  • 1
    Where is this warning occurring? I can't see any attribute named `data-name` in your posted code. I guess it is present in your SVG file. Can you check that and add your `next.config.js` to your question? – brc-dd Aug 01 '21 at 15:40
  • Yes. there are`data-name` attributes in the SVG file. This is a large file so I couldn't write here. – BlueLotus Aug 01 '21 at 15:45
  • @brc-dd I used `next-images`. Can I use these together? – BlueLotus Aug 01 '21 at 15:48
  • Yes they can be used together. Although I guess `next-images` is somehow interfering with `babel-plugin-inline-react-svg` as the issue was [fixed](https://github.com/airbnb/babel-plugin-inline-react-svg/pull/22) with the latter. Can you try editing your `next.config.js` to exclude `svg` files from `next-images`? Here is the [documentation](https://github.com/twopluszero/next-images#file-extensions). If that too doesn't work then try setting the options of `inline-react-svg` same as this in your babelrc: https://github.com/airbnb/babel-plugin-inline-react-svg#options – brc-dd Aug 01 '21 at 15:57
  • I tried to edit `plugin-inline-react-svg` but it occurs error. ```TypeError: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer" at Array.forEach () ``` – BlueLotus Aug 01 '21 at 15:59
  • What is your Next.js version? Also I didn't think you added it properly. Copy and paste this: https://pastebin.com/xTcs4aDM – brc-dd Aug 01 '21 at 16:00
  • @brc-dd Next version is 11.0.1 – BlueLotus Aug 01 '21 at 16:03
  • 1
    Then firstly you don't need `next-images` at all. Secondly, try configuring webpack instead as probably next.js new static import feature will cause issues with this. Change your `next.config.js` as mentioned in this answer: https://stackoverflow.com/a/67641345/11613622 after installing the related packages. – brc-dd Aug 01 '21 at 16:09
  • https://duncanleung.com/next-js-typescript-svg-any-module-declaration/ https://stackoverflow.com/a/67641345/ https://stackoverflow.com/a/68129058/ – brc-dd Aug 01 '21 at 16:17
  • Maybe if you provide us with the svg code we can check if everything is ok there. – SIMBIOSIS surl Aug 01 '21 at 19:29

1 Answers1

0

I ran into a similar issue and was able to resolve by updating plugins in my .babelrc file. I updated it to match what is listed in the "options" section of the babel-plugin-inline-react-svg README.

{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}
reng
  • 9
  • 1