Cannot use preval.macro with Storybook and Gatsby

[TheFirstMe]

Describe the bug I am using Gatsby with theme-ui and storybook. Trying to use preval.macro with storybook gives the following error (works fine with gatsby):

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 115:43-50
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/design-tokens/colors.js
 @ ./src/design-tokens/index.js
 @ ./src/design-tokens/theme.js
 @ ./src/gatsby-plugin-theme-ui/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

WARNING in ./node_modules/import-fresh/index.js 32:32-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/cosmiconfig/dist/loaders.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/design-tokens/colors.js
 @ ./src/design-tokens/index.js
 @ ./src/design-tokens/theme.js
 @ ./src/gatsby-plugin-theme-ui/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in 'D:\Users\admin\Desktop\ieeesb\ieeesb\node_modules\cosmiconfig\dist'
 @ ./node_modules/cosmiconfig/dist/readFile.js 13:33-46
 @ ./node_modules/cosmiconfig/dist/Explorer.js
 @ ./node_modules/cosmiconfig/dist/index.js
 @ ./node_modules/babel-plugin-macros/dist/index.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/design-tokens/colors.js
 @ ./src/design-tokens/index.js
 @ ./src/design-tokens/theme.js
 @ ./src/gatsby-plugin-theme-ui/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

.........

ERROR in ./node_modules/babel-plugin-preval/node_modules/require-from-string/index.js
Module not found: Error: Can't resolve 'module' in 'D:\Users\admin\Desktop\ieeesb\ieeesb\node_modules\babel-plugin-preval\node_modules\require-from-string'
 @ ./node_modules/babel-plugin-preval/node_modules/require-from-string/index.js 5:13-30
 @ ./node_modules/babel-plugin-preval/dist/helpers.js
 @ ./node_modules/babel-plugin-preval/dist/macro.js
 @ ./node_modules/babel-plugin-preval/macro.js
 @ ./node_modules/preval.macro/index.js
 @ ./src/design-tokens/colors.js
 @ ./src/design-tokens/index.js
 @ ./src/design-tokens/theme.js
 @ ./src/gatsby-plugin-theme-ui/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Code snippets

\\ webpack.config.js

module.exports = ({ config }) => {
    config.resolve.extensions.push('.svg');

    config.module.rules = config.module.rules.map(data => {
        if (/svg\|/.test(String(data.test)))
            data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;

        return data;
    });

    config.module.rules.push({
        test: /\.svg$/,
        use: [{ loader: require.resolve('babel-loader') },
        { loader: require.resolve('react-svg-loader') }]
    });

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")

    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
        require.resolve("@babel/preset-react"),
        require.resolve("@babel/preset-env"),
    ]

    config.module.rules[0].use[0].options.plugins = [
        // use @babel/plugin-proposal-class-properties for class arrow functions
        require.resolve("@babel/plugin-proposal-class-properties"),
        // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
        require.resolve("babel-plugin-remove-graphql-queries"),
    ]

    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ["browser", "module", "main"]

    return config
}

\\ config.js

import { configure, addDecorator, addParameters } from "@storybook/react"
import { action } from "@storybook/addon-actions"
import React from "react"
import { ThemeProvider } from "theme-ui"
import theme from "../src/gatsby-plugin-theme-ui"
import typography from "../src/utils/typography"
import { TypographyStyle, GoogleFont } from 'react-typography'

// automatically import all files ending in *.stories.js
// configure(require.context("../src", true, /\.stories\.js$/), module)

addDecorator((story) => (
    <ThemeProvider theme={theme}>
        <TypographyStyle typography={typography} />
        <GoogleFont typography={typography} />
        {story()}
    </ThemeProvider>
))

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
    enqueue: () => { },
    hovering: () => { },
}
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = ""
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
    action("NavigateTo:")(pathname)
}

\\ colors.js from the error

import preval from "preval.macro"

export const colors = preval`
  const palette = {
    purple: {
      90: '#362066',
      80: '#452475',
      .........
    },
    ......
  }

  module.exports = {
    ...palette,
    ....
  }
`

System:

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 12.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.21.1 - C:\Users\admin\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0

[TheFirstMe]

Finally fixed it. It was a problem with the webpack config that I followed from Gatsby's docs. Here's the updated webpack config that fixed it:

module.exports = ({ config }) => {
    // config.resolve.extensions.push('.svg');
    config.module.rules = config.module.rules.map(data => {
        if (/svg\|/.test(String(data.test)))
            data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;

        return data;
    });
    config.module.rules.push({
        test: /\.svg$/,
        use: [{ loader: require.resolve('babel-loader') },
        { loader: require.resolve('react-svg-loader') }]
    });

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")

    // // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
        require.resolve("@babel/preset-react"),
        require.resolve("@babel/preset-env"),
    ]

    config.module.rules[0].use[0].options.plugins.push(
        // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
        require.resolve("babel-plugin-remove-graphql-queries"),
    )
    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ["browser", "module", "main"]

    return config
}