Arrow style not coming proper

[tarun1992]

Hi,

I am using Carousel in one of my Next.js applications and arrow style is not coming in an arrow shape. The same can be checked on my website under section Featured Bikes and then Popular bikes. I am using the below code: `
<Carousel arrows={true} showDots={true} responsive={responsive} ssr={true} keyBoardControl={true} containerClass="carousel-container" deviceType={props.deviceType} dotListClass="custom-dot-list-style" itemClass="carousel-item-padding-40-px" partialVisbile>

    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 1</p>
    </div>
    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 2</p>
    </div>
    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 3</p>
    </div>
    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 4</p>
    </div>
  </Carousel>`

[YIZHUANG]

You need to add something like this https://github.com/webpack-contrib/url-loader

[tarun1992]

Already added. Check my Package.json { "name": "bikewalevlog", "version": "1.0.0", "description": "", "scripts": { "dev": "next", "build": "next build", "start": "next start", "export": "next export", "analyze": "cross-env ANALYZE=true next build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@material-ui/core": "^4.9.0", "@material-ui/icons": "^4.5.1", "@next/bundle-analyzer": "^9.2.1", "@zeit/next-css": "^1.0.1", "axios": "^0.19.2", "cross-env": "^7.0.0", "material-ui": "^0.20.2", "material-ui-search-bar": "^0.4.2", "next": "^9.1.5", "next-compose-plugins": "^2.2.0", "next-fonts": "^1.0.3", "next-images": "^1.3.0", "next-routes": "^1.4.2", "nodemon": "^2.0.2", "nprogress": "^0.2.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-jss": "^8.0.0", "react-multi-carousel": "^2.5.0", "react-redux": "^7.1.3", "react-responsive-carousel": "^3.1.51", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "ua-parser-js": "^0.7.21" }, "devDependencies": { "css-loader": "^3.4.2", "file-loader": "^5.0.2", "url-loader": "^3.0.0" } }

[tarun1992]

Any findings on the above. Please let me know.

[raajnadar]

Paste your next.config.js file here

[tarun1992]

next.config.js:-

`const withPlugins = require("next-compose-plugins"); const withCSS = require("@zeit/next-css"); const withFonts = require("next-fonts");

const config = { webpack: config => { config.module.rules.push({ test: /.(png|svg|eot|otf|ttf|woff|woff2)$/, use: { loader: "url-loader", options: { limit: 8192, publicPath: "/_next/static/", outputPath: "static/", name: "[name].[ext]" } } }); return config; } };

module.exports = withPlugins([withCSS], config);`

[raajnadar]

const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");

module.exports = withPlugins([withFonts, withCSS], {});

Replace the whole file with this snippet. Make sure you clear your browser cache and restart you nextjs server. The icon will be visible now.

[tarun1992]

Thanks for your reply. Is there no need for a config object which imports 'url-loader'?. Though, I will test with above configurations and let you know soon.

[raajnadar]

next-fonts will do it internally you don't need to do it manually check the last line in my code you forgot to add withFonts

[tarun1992]

I have checked but it is not working. After checking the example code, the arrow is appearing via an ASCII code in the style element 'content'. next-fonts is of no help to resolve the issue. The arrow is coming in a rectangular shape as can be checked on my website [https://bikersdunia.com]

[raajnadar]

Wait I will give you a very minimal example in codesandbox

[tarun1992]

I tried again with the above configurations. It is working now. I wanted to understand the reason for config object issue.

[raajnadar]

It is not an issue you don't need to do anything manually next-fonts imports fonts properly and automatically. You need to clear your cache to check the changes.

[tarun1992]

Thank you for your help. I am closing the issue.

[paulotijero]

@tarun1992 This closed because it was solved? If that is the case, please tell us if you followed the previous recommendations? or had to do some extra steps

[tarun1992]

I had to do write custom arrow styles to fix the issue.

[raajnadar]

@paulotijero did you try my fix, because that fixed my issue.

[paulotijero]

@raajnadar I followed the path of @tarun1992 and adding custom arrows.

[tarun1992]

Hello @raajnadar you have created unnecessary follow backlinks to my website on the URL " https://githubmemory.com/@raajnadar". Please remove those backlinks immediately.

[raajnadar]

I didn't create any. I don't even have an account on githubmemory. You can contact GitHub memory to resolve this issue.

Maybe removing the link from this issue ticket will resolve your issue.

[raajnadar]

@tarun1992 you can do this to solve the issue https://support.google.com/webmasters/answer/2648487?hl=en.

Also, remove your website link from the title & also delete the edit history of the OP.

[tarun1992]

I don't know if that's your profile or not - https://githubmemory.com/@raajnadar but the backlink is created from this URL. I Disavowed it for now but check with the website why they are creating profile without your knowledge,

[raajnadar]

They also have your profile https://githubmemory.com/@tarun1992.

They are scrapping GitHub's data. Maybe they are using GitHub API for that.

[tarun1992]

@raajnadar When are you planning to launch version 3?