TypeError: Cannot read property "dark" of undefined

Question

尝试为 vscode 重新创建 Github 的 Theme。创建多个 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));

theme.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

Answer 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-default.json。错误必须源自 dimmed.json 或 light.json（可能两者都有）。错误抛出是因为你想访问 color.bg.dark （就像错误消息所说的那样），以便 dimmed.json 和 light.json 必须在 [= 下都有一个 dark 键15=]。我怀疑它们看起来像这样：

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

如果是这种情况，您必须将 dimmed.json 和 light.json 文件中的键名更改为 dark 或者您需要更改 getTheme 函数访问它。一个真正肮脏的修复可能是 hex(color.bg[theme])。但是，如果您想要访问除 color.bg.dark、color.bg.dimmed 和 color.bg.light 之外的任何内容，这可能会在以后引起问题。更好的方法是对所有 json 文件使用相同的模式。

TypeError: Cannot read property "dark" of undefined

TypeError: Cannot read property "dark" of undefined

json

theming

fs

node.js

visual-studio-code