TypeError: Cannot read property "dark" of undefined-CodePudding

Tried recreating Github's Theme for vscode. It takes multiple json files to create multiple vscode theme extensions. My file structure is something like this:

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

index.js has

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 currently has

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 has

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 };

and lastly, for this example, my dark.json has

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

Running the code gives an error and I'm not sure I did wrong. The error is as follows

/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

CodePudding user response：

Please provide a minimal working example, that can reproduce the error, next time. I removed everything that references dimmed.json and light.json since you did not provide those files to us.

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 stays the same.

This runs without errors and does generate ./themes/dark-default.json. The error must originate from either dimmed.json or light.json (maybe both). The error throws because you want to access color.bg.dark (just like the error message says) for that to be possible dimmed.json and light.json must both have a dark key under bg. I suspect that instead they look like this:

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

If that is the case, you must either change the key name in the dimmed.json and the light.json file to dark or you need to change the way that the getTheme function accesses it. A really dirty fix might be hex(color.bg[theme]). But this might cause problems later on if you ever want to access anything besides color.bg.dark, color.bg.dimmed and color.bg.light. A better approach would be to use the same schema for all your json files.