Недопустимый тип элемента - React.js (решение не найдено в Интернете)

Я искал решение в последний час, и ничего не помогло. Мой экспорт и импорт определены правильно. Я также попытался заменить все содержимое Clock.js другим компонентом, и это сработало. я просто схожу с ума..

import React from 'react';

const pad = n => (n < 10 ? `0${n}` : n);
const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;

const Clock = ({ lastUpdate, light }) => (
  <div className={light ? 'light' : ''}>
    {format(new Date(lastUpdate))}
    <style jsx>{` 
        div {
          padding: 15px;
          display: inline-block;
          color: #82FA58;
          font: 50px menlo, monaco, monospace;
          background-color: #000;
        }

        .light {
          background-color: #999;
        }
      `}
    </style>
  </div>
);

export default Clock;

Импорт и вызов:

import Clock from '../components/Clock';
<Clock lastUpdate={lastUpdate} light={light} />

Ошибка:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Часы импортированы в: https://pastebin.com/fWRCaYM5


person Neone    schedule 23.04.2018    source источник
comment
<style jsx> что это?   -  person Roy Wang    schedule 23.04.2018
comment
github.com/zeit/styled-jsx . Та же ошибка без этого тега.   -  person Neone    schedule 23.04.2018
comment
Это сработает, если вы удалите весь <style jsx> ... </style>? (это похоже на ужасную библиотеку, которая, кстати, поощряет плохие методы)   -  person Roy Wang    schedule 23.04.2018
comment
Нет, та же ошибка. Как я уже говорил.   -  person Neone    schedule 23.04.2018
comment
Добавьте код для всего вашего компонента, который импортировал Clock. Возможно ошибка именно в этом файле.   -  person Roy Wang    schedule 23.04.2018
comment
Сделано это. Когда я заменяю Clock другим компонентом, ошибки нет. Все остальное то же самое. Поэтому я думаю, что проблема внутри Clock. Что еще более странно, этот пример отлично работает в другом проекте, из которого я вставил..   -  person Neone    schedule 23.04.2018
comment
Будет ли это работать, если вы замените его на const Clock = () => null?   -  person Roy Wang    schedule 23.04.2018
comment
Нет, та же ошибка. Отладка React даже говорит: «Проверьте свой код в layout.jsx: 25»...   -  person Neone    schedule 23.04.2018
comment
Можете ли вы создать stackoverflow.com/help/mcve на codesandbox.io/s/new?   -  person Roy Wang    schedule 23.04.2018
comment
Да, здесь это работает.. codesandbox.io/s/vn828mvkwl   -  person Neone    schedule 23.04.2018
comment
Проверьте, идентичны ли у вас код и версии пакетов на вашем локальном компьютере.   -  person Roy Wang    schedule 23.04.2018
comment
Неа. Каждый пакет новее на локальной машине, кроме следующего, у которого в примере самая последняя версия.   -  person Neone    schedule 23.04.2018
comment
Что ж... никто в Интернете не сможет решить вашу проблему, если она возникает только на вашем компьютере. Попробуйте запустить новый проект в новом каталоге, установите зависимости и посмотрите, произойдет ли это по-прежнему.   -  person Roy Wang    schedule 23.04.2018
comment
Или нажмите кнопку загрузки на ссылке codeandbox, которую вы разместили, и попробуйте запустить ее локально.   -  person Roy Wang    schedule 23.04.2018
comment
Другая проблема, которая может возникнуть, — скрытый символ, вызывающий синтаксическую ошибку где-то в исходном коде. Это может быть проблемой... ну, вы знаете.   -  person 3Dos    schedule 23.04.2018


Ответы (2)


Я исправил это, удалив стилизованный jsx. Я не заставил его работать, даже прочитав инструкции с модулем NPM и конфигурацией babel.

Webpack использовал HMR, поэтому ошибка не исчезла без перезапуска сборки.

Сейчас я использую встроенные стили. Я хотел бы получить предложения по написанию стилей className для компонента React. Кто угодно?

person Neone    schedule 23.04.2018

Вы пытались переименовать часы во что-то другое? Где-то может быть какой-то конфликт.

РЕДАКТИРОВАТЬ ---

Вы можете использовать такие стили:

var style = {
    padding: "15px",
    display: "inline-block",
    color: "#82FA58",
    font: "50px menlo, monaco, monospace",
    backgroundColor: light? "#999" : "#000"
};

А затем используйте:

<div style={style}>
person Will    schedule 23.04.2018
comment
Да, я пробовал. Но это не было корнем проблемы. - person Neone; 23.04.2018
comment
Я обновил свой ответ в ответ на ваш новый вопрос. - person Will; 23.04.2018
comment
Да, это встроенные стили. Как насчет определения className и последующего повторного использования следующим образом: <div className={light ? 'light' : ''} . Как определить стиль .light? - person Neone; 23.04.2018
comment
Вам нужно будет создать .light{background-color: #999}; в таблице стилей. В качестве альтернативы используйте тернарный оператор в стиле в моем предложении. - person Will; 23.04.2018
comment
Я решил использовать SCSS с модулями. Выгляди сексуально: import scss from '../static/styles.scss'; className={scss.serverClock} - person Neone; 23.04.2018