Component Shadowing gives WebPack error

In the theming section, I added a theme.js file to /src/@reflexjs/gatsby-theme-core and appended the code that was given in the tutorial section 4 “Theming”:

export default {
  colors: {
    text: "#000",
    background: "#fff",
    primary: "#07c",
  },
  fonts: {
    body: '"Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: "Georgia, serif",
    monospace: "Menlo, monospace",
  },
}

But, I’m somehow getting this error:

info Deleting .cache, public
info Successfully deleted directories
success open and validate gatsby-configs - 0.088s
success load plugins - 1.766s
success onPreInit - 0.022s
success initialize cache - 0.013s
success copy gatsby files - 0.088s
info content/pages directory validated.
info content/images directory validated.
info content/blocks directory validated.
info content/navs directory validated.
success onPreBootstrap - 0.054s
success createSchemaCustomization - 0.048s
success source and transform nodes - 0.668s
success building schema - 0.378s
success createPages - 0.029s
success createPagesStatefully - 0.063s
success updating schema - 0.031s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.491s
success write out requires - 0.061s
success write out redirect data - 0.003s
success onPostBootstrap - 0.004s
info bootstrap finished - 8.507s
success run static queries - 0.037s - 4/4 108.29/s
success run page queries - 0.079s - 2/2 25.35/s

 ERROR 

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: Cannot read property 'preset' of undefined





  WebpackError: TypeError: Cannot read property 'preset' of undefined
  
  - build-html.js:107 doBuildPages
    [portfolio]/[gatsby]/dist/commands/build-html.js:107:24
  
  - build-html.js:121 async buildHTML
    [portfolio]/[gatsby]/dist/commands/build-html.js:121:3
  
  - develop-process.js:152 async createIndexHtml
    [portfolio]/[gatsby]/dist/commands/develop-process.js:152:7
  
  - develop-process.js:174 async startServer
    [portfolio]/[gatsby]/dist/commands/develop-process.js:174:3
  
  - develop-process.js:482 async module.exports
    [portfolio]/[gatsby]/dist/commands/develop-process.js:482:7
  

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-base@0.1.6 dev: `gatsby clean && gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gatsby-starter-base@0.1.6 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/atharvakulkarni/.npm/_logs/2020-06-21T07_42_45_504Z-debug.log

What am I doing wrong here?

[shadcn]

Thanks. You’re probably among the first ones building with Reflex. So all feedback welcome. Feel free to reach out.

[shadcn]

The default styles depend on the base preset. You can add it as follows:

import base from "@reflexjs/preset-base"

export default {
  preset: base,
  colors: {
    text: "#000",
    background: "#ff0000",
    primary: "#07c",
  },
  fonts: {
    body: 'Roboto, "Helvetica Neue", sans-serif',
    heading: "Georgia, serif",
    monospace: "Menlo, monospace",
  },
};

More in the docs: https://reflexjs.org/docs/presets#base

Let me know if this works.