Как исправить ошибку «Предупреждение: имя класса свойства не совпало» при использовании UIkit и NextJs - PullRequest
Новая
       62

Как исправить ошибку «Предупреждение: имя класса свойства не совпало» при использовании UIkit и NextJs

0 голосов
/ 02 августа 2020

Предупреждение появляется при использовании UIkit для стилизации компонентов в Next JS.

Для воспроизведения:

  1. Создать новое следующее js приложение: npx create-next-app {app-name}
  2. cd {app-name} && npm i
  3. Замените код в pages/index.js приведенным ниже фрагментом (2-я часть)
  4. Создайте components/layout.js и добавьте фрагмент ниже (1-й часть)
  5. npm run dev и go до http://localhost: 3000
  6. Вы увидите предупреждение в консоли

Приложение работает нормально, но предупреждения действительно отключение 

// components/layout.js (1st part)

import Head from "next/head";

const Layout = ({ children }) => {
  return (
    <>
      <Head>
        {/* UIkit CSS */}
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css"
        />
        <title>NextJs App</title>

        {/* UIkit JS */}
        <script
          async
          src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"
        />
        <script
          async
          src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"
        />
      </Head>
      {children}
    </>
  );
};

export default Layout;


// pages/index.js (2nd part)
import Layout from "../components/layout";

const Home = () => {
  return (
    <Layout>
      <div className="uk-child-width-expand@s uk-text-center" data-uk-grid>
        <div>
          <div className="uk-card uk-card-default uk-card-body">Item</div>
        </div>
        <div>
          <div className="uk-card uk-card-default uk-card-body">Item</div>
        </div>
        <div>
          <div className="uk-card uk-card-default uk-card-body">Item</div>
        </div>
      </div>
    </Layout>
  );
};

export default Home;

Ошибка на консоли отображается, как показано на рисунке ниже

введите описание изображения здесь

1 Ответ

0 голосов
/ 05 августа 2020

Проблема, похоже, заключалась в том, как я загружал скрипты.

Когда я изменил атрибут скрипта async на defer, предупреждение исчезло, и страница была скомпилирована без каких-либо предупреждений

...