[Help] NextJS example

[message]

Hey Craig. I decided to give css-zero a try, but can't manage to make it work in next.js. I encountered a few issues. When I required import {css, styles} from 'css-zero/macro'; I got:

Module not found: Can't resolve 'fs' in ...

and later...

Module not found: Can't resolve 'module' in '/www/next/node_modules/css-zero/src/babel/utils'

To fix fs and module errors I added to next.config.js:

module.exports = {
    distDir: 'build', // Build folder instead of the default .next folder
    poweredByHeader: false, // Removes X-Powered-By header from response
    webpack: (config, {isServer}) => {
        // Fixes npm packages that depend on `fs` module
        if ( ! isServer) {
            config.node = {
                fs: "empty",
                module: "empty"
            }
        }

        return config;
    }
};

And now I get:

warn  - ./node_modules/babel-plugin-macros/dist/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

TypeError: css_zero_macro__WEBPACK_IMPORTED_MODULE_3__.css is not a function
    at Module../pages/about.tsx (/www/next/build/server/static/development/pages/about.js:1989:64)
    at __webpack_require__ (/www/next/build/server/static/development/pages/about.js:23:31)
    at Object.4 (/www/next/build/server/static/development/pages/about.js:2057:18)
    at __webpack_require__ (/www/next/build/server/static/development/pages/about.js:23:31)
    at /www/next/build/server/static/development/pages/about.js:91:18
    at Object.<anonymous> (/www/next/build/server/static/development/pages/about.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.requirePage (/www/next/node_modules/next/dist/next-server/server/require.js:41:12)
    at Object.loadComponents (/www/next/node_modules/next/dist/next-server/server/load-components.js:26:36)
    at DevServer.findPageComponents (/www/next/node_modules/next/dist/next-server/server/next-server.js:567:60)

Generated about.js from tsx

/* harmony import */ var css_zero_macro__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! css-zero/macro */ "css-zero/macro");
/* harmony import */ var css_zero_macro__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(css_zero_macro__WEBPACK_IMPORTED_MODULE_3__);
var _jsxFileName = "/www/next/pages/about.tsx";
var __jsx = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement;

const blue = css_zero_macro__WEBPACK_IMPORTED_MODULE_3__["css"]`
  color: blue;
`;

Do you have any ideas how i can make it work?