search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.07k stars 27.01k forks source link

Icons are all broken NextJS@11.0.1 #27158

Closed chris-lee-code closed 3 years ago

chris-lee-code commented 3 years ago

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

16.2.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next build --> AWS Amplify (CloudFront)

Describe the Bug

스크린샷 2021-07-14 오후 12 20 43

Let me be honest. I had been using the 9.5.5 version of next until a few weeks ago. After checking some outdated packages, I realized and decided to update Next to version 11. However, after doing that, all the images and icons were broken too badly.

For the images, after looking over the documentation and GitHub for hours, I figured out the ways with the next/image static import. However, the icons are still not fixed and are just totally broken like above.

I don't know what I'm supposed to do. One thing to keep in mind is that the icons are broken for both Font Awesome and Nucleo. I know icons are supposed to be called in unique ways for NextJS, but I want to ask why it suddenly doesn't work after updating it to the newer version of NextJS. Could this also be a problem with Webpack 5?

In _app.js, I do have imports for CSS for

import "assets/vendor/nucleo/css/nucleo.css"; import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";

Expected Behavior

The icons should be displayed perfectly.

스크린샷 2021-07-14 오후 12 27 00

To Reproduce

package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "next start",
    "build": "next build",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev",
    "compile-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.css",
    "minify-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.min.css --output-style compressed",
    "map-sass": "node-sass assets/scss/nextjs-argon-dashboard-pro.scss assets/css/nextjs-argon-dashboard-pro.css --source-map true",
    "all-sass": "npm run compile-sass && npm run minify-sass && npm run map-sass",
    "dev": "next",
    "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
    "@atlaskit/spinner": "^15.0.9",
    "@aws-amplify/cli": "^5.1.0",
    "@aws-amplify/ui-react": "^1.2.4",
    "@fullcalendar/common": "^5.8.0",
    "@fullcalendar/core": "5.8.0",
    "@fullcalendar/daygrid": "^5.8.0",
    "@fullcalendar/interaction": "5.8.0",
    "@fullcalendar/react": "^5.8.0",
    "@next/bundle-analyzer": "^11.0.1",
    "@zeit/next-css": "1.0.1",
    "@zeit/next-sass": "1.0.1",
    "amazon-cognito-identity-js": "^5.0.3",
    "aws-amplify": "^4.1.2",
    "aws-amplify-react": "^5.0.4",
    "chart.js": "3.4.0",
    "check-password-strength": "^2.0.3",
    "classnames": "2.3.1",
    "compression-webpack-plugin": "^8.0.1",
    "cross-env": "^7.0.3",
    "crypto-browserify": "^3.12.0",
    "dropzone": "5.9.2",
    "email-validator": "^2.0.4",
    "formik": "^2.2.9",
    "formsy-react": "^2.2.5",
    "fullcalendar": "^5.8.0",
    "json-parse-better-errors": "^1.0.2",
    "log-symbols": "^5.0.0",
    "moment": "2.29.1",
    "next": "^11.0.1",
    "next-compose-plugins": "2.2.1",
    "next-fonts": "1.5.1",
    "next-images": "1.8.1",
    "next-transpile-modules": "^4.1.0",
    "nouislider": "15.2.0",
    "password-validator": "^5.1.1",
    "path": "0.12.7",
    "postcss": "^6.0.23",
    "pretty-checkbox": "^3.0.3",
    "prop-types": "15.7.2",
    "rc-checkbox": "^2.3.2",
    "react": "^17.0.2",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-bootstrap-sweetalert": "5.2.0",
    "react-bootstrap-table-next": "4.0.3",
    "react-bootstrap-table2-paginator": "2.1.2",
    "react-bootstrap-table2-toolkit": "2.1.3",
    "react-chartjs-2": "3.0.3",
    "react-checkmark": "^1.4.0",
    "react-copy-to-clipboard": "5.0.3",
    "react-datetime": "3.0.4",
    "react-dom": "^17.0.2",
    "react-google-maps": "9.4.5",
    "react-jvectormap": "0.0.16",
    "react-light-accordion": "^0.1.4",
    "react-loading-skeleton": "^2.2.0",
    "react-notification-alert": "0.0.13",
    "react-perfect-scrollbar": "1.5.8",
    "react-player": "^2.9.0",
    "react-quill": "1.3.5",
    "react-select2-wrapper": "1.0.4-beta6",
    "react-tagsinput": "3.19.0",
    "react-to-print": "2.12.6",
    "react-toastify": "^7.0.4",
    "reactstrap": "8.9.0",
    "rxjs": "^7.1.0",
    "sass": "^1.35.1",
    "slugify": "^1.5.3",
    "stream": "^0.0.2",
    "styled-components": "^5.3.0",
    "webpack": "^5.41.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "yarn": "^1.22.10",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/googlemaps": "3.39.13",
    "@types/markerclustererplus": "2.1.33",
    "@types/react": "17.0.12"
  }
}

next.config.js

const withPlugins = require("next-compose-plugins");
const withFonts = require("next-fonts");
const webpack = require("webpack");
const path = require("path");

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = withBundleAnalyzer(
  withFonts({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
        },
      });
      config.resolve.modules.push(path.resolve("./"));
      config.resolve.fallback = {
        fs: false,
        crypto: require.resolve("crypto-browserify"),
      };
      config.optimization.minimize = true;
      return config;
    },
  })
);

_app.js

import React from "react";
import App from "next/app";
import Head from "next/head";
import Amplify from "aws-amplify";
import awsExports from "../src/aws-exports";
Amplify.configure({ ...awsExports, ssr: true });
import "@aws-amplify/ui/dist/style.css";

// bootstrap rtl for rtl support page
import "assets/vendor/bootstrap-rtl/bootstrap-rtl.scss";
// plugins styles from node_modules
import "react-notification-alert/dist/animate.css";
import "react-perfect-scrollbar/dist/css/styles.css";
// plugins styles downloaded
import "@fullcalendar/common/main.min.css";
import "@fullcalendar/daygrid/main.min.css";
import "assets/vendor/sweetalert2/dist/sweetalert2.min.css";
import "assets/vendor/select2/dist/css/select2.min.css";
import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";

import "react-toastify/dist/ReactToastify.css";

// core styles
import "assets/scss/nextjs-argon-dashboard-pro.scss?v1.0.0";
import "pretty-checkbox/src/pretty-checkbox.scss";
import awsmobile from "../src/aws-exports";

Amplify.configure({ ...awsmobile, ssr: true });

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }
  render() {
    const { Component, pageProps } = this.props;

    const Layout = Component.layout || (({ children }) => <>{children}</>);

    return (
      <React.Fragment>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <title>WorkXP</title>
          <script
            src="https://kit.fontawesome.com/****.js"
            crossorigin="anonymous"
          ></script>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </React.Fragment>
    );
  }
}

export default MyApp;
chris-lee-code commented 3 years ago

It's been 7 days since I reported this issue. Are there still problems duplicating the issue? I need an update.

hspotorno commented 3 years ago

This is happening to me when updating from version 11.0.0 to 11.0.1. These lines are getting removed from next-env.d.ts:

declare module "*.svg" {
  const content: any
  export default content
}

Which is what breaks the icons for me.

blrnw3 commented 3 years ago

What's the fix?

balazsorban44 commented 2 years ago

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.