Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается прочитать свойство «темный» неопределенного

Ошибка типа: Не удается прочитать свойство «темный» неопределенного

#node.js #json #visual-studio-code #fs #theming

Вопрос:

Попытался воссоздать тему Github для vscode. Для создания нескольких расширений темы vscode требуется несколько файлов json. Моя файловая структура выглядит примерно так:

 src
|_ themeColors
|  |__ dark.json
|  |__ dimmed.json
|  |__ light.json
|_ color.js
|_ index.js
|_ theme.js

index.js имеет

 const fs = require('fs').promises;
const getTheme = require('./theme');

const darkDefaultTheme = getTheme({
    theme: 'dark',
    name: 'SimpliCT Dark Default',
});

const darkDimmedTheme = getTheme({
    theme: 'dimmed',
    name: 'SimpliCT Dark Dimmed',
});

const lightDefaultTheme = getTheme({
    theme: 'light',
    name: 'SimpliCT Light Default',
});

fs.mkdir('./themes', { recursive: true })
    .then(() => Promise.all([
        fs.writeFile( './themes/dark-default.json', JSON.stringify(darkDefaultTheme, null, 2),),
        fs.writeFile( './themes/dark-dimmed.json', JSON.stringify(darkDimmedTheme, null, 2),),
        fs.writeFile( './themes/light-default.json', JSON.stringify(lightDefaultTheme, null, 2),),
    ]))
    .catch(() => process.exit(1));

тема.в настоящее время js имеет

 const chroma = require('chroma-js');
const { getColors } = require('./colors');

const hex = color => {
    return chroma(color).hex();
};

const getTheme = ({ theme, name }) => {
    const color = getColors(theme);

    return {
        name: name,
        colors: {
            foreground: hex(color.bg.dark),
        },
        semanticHighlighting: true,
        semanticTokenColors: {},
        tokenColors: [],
    };
};

module.exports = getTheme;

colors.js имеет

 const darkColors = require('./themeColors/dark.json');
const dimmedColors = require('./themeColors/dimmed.json');
const lightColors = require('./themeColors/light.json');

function getColors(theme) {
    if (theme === 'dark') {
        return darkColors;
    } else if (theme === 'dimmed') {
        return dimmedColors;
    } else if (theme === 'light') {
        return lightColors;
    }
}

module.exports = { getColors };

и, наконец, для этого примера у моего dark.json есть

 {
    "bg": {
        "dark": "#12181e",
        "darker": "#0f1318",
        "darkest": "#0c0e12"
    }
}

Запуск кода выдает ошибку, и я не уверен, что поступил неправильно. Ошибка заключается в следующем

 /home/head/documents/GitForks/simplict-vscode/src/theme.js:17
                    foreground: hex(color.bg.dark),
                                             ^

TypeError: Cannot read property 'dark' of undefined
    at getTheme (/home/head/documents/GitForks/simplict-vscode/src/theme.js:17:29)
    at Object.<anonymous> (/home/head/documents/GitForks/simplict-vscode/src/index.js:9:25)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain](internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

Комментарии:

1. Пожалуйста, не добавляйте код в виде изображений, вместо этого вставляйте его в свой вопрос с помощью блоков кода. Таким образом, его можно скопировать, а также прочитать напрямую. Также, пожалуйста, уточните «выдает ошибку». Пожалуйста, предоставьте вывод об ошибке или, по крайней мере, сообщение об ошибке.

2. Также, пожалуйста, уточните, называется ли файл dark.json или dark.js. Если это так dark.js затем вам нужно экспортировать объект, чтобы потребовать его в другом месте module.exports = {"bg": {…}} , если он темный.json, тогда я думаю, что вам нужно изменить инструкцию require в color.js (или colors.js) для `требуется(«./themeColors/темный.json»)

3. Верно, иронизируй по этому поводу. Это было тогда, когда я пробовал кучу вещей, чтобы попытаться исправить код.. В любом случае, это все равно дает ту же ошибку

4. Пожалуйста, найдите на этом сайте свойство typeerror не может прочитать значение undefined . Очень похожие вопросы задавались буквально десятки (если не сотни) раз здесь и раньше. По крайней мере, один из них должен предоставить достаточно информации, чтобы помочь вам решить возникшую проблему.

Ответ №1:

Пожалуйста, приведите минимальный рабочий пример, который может воспроизвести ошибку в следующий раз. Я удалил все, что ссылается на dimmed.json и light.json, так как вы не предоставили нам эти файлы.

index.js

 const fs = require('fs').promises;
const getTheme = require('./theme');

const darkDefaultTheme = getTheme({
    theme: 'dark',
    name: 'SimpliCT Dark Default',
});

fs.mkdir('./themes', { recursive: true })
    .then(() => Promise.all([
        fs.writeFile( './themes/dark-default.json', JSON.stringify(darkDefaultTheme, null, 2),),
    ]))
    .catch(() => process.exit(1));

color.js

 const darkColors = require('./themeColors/dark.json');

function getColors(theme) {
    if (theme === 'dark') {
        return darkColors;
    }
}

module.exports = { getColors };

theme.js остается прежним.

Это выполняется без ошибок и создает ./themes/dark-по умолчанию.json. Ошибка должна быть вызвана либо dimmed.json, либо light.json (возможно, и то, и другое). Ошибка возникает, потому что вы хотите получить доступ color.bg.dark (как указано в сообщении об ошибке), чтобы это было возможно.json и light.json должны иметь dark ключ под bg . Я подозреваю, что вместо этого они выглядят так:

 {
  "bg": {
    "light": "#123456",
    …
}

В этом случае вам необходимо либо изменить имя ключа в файле dimmed.json и файле light.json на dark , либо изменить способ getTheme доступа к нему функции. Действительно грязное решение может быть hex(color.bg[theme]) . Но это может вызвать проблемы позже , если вы когда-нибудь захотите получить доступ к чему-либо, кроме color.bg.dark , color.bg.dimmed и color.bg.light . Лучшим подходом было бы использовать одну и ту же схему для всех ваших файлов json.

Метки: