vanilla-extract: Imports inside .css.ts files produce an error (Next Js)

Describe the bug

At least on Next 13, some imports inside .css.ts files produce the following error:

NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: $RefreshReg$ is not defined

This is triggered when the file containing the thing you import IS or EXPORTS a .tsx file that exports a function which has a name in PascalCase.

Codesandbox instructions: go to the styles/test.css.ts file and comment / uncomment the imports in order.
Some examples available in the codesandbox:

// problem.tsx

export const PascalCaseFunction = () => {
  console.log(":/");
};

// test.css.ts

import { PascalCaseFunction } from "./problem"

PascalCaseFunction() // error

// works.tsx

export const camelCaseFunction = () => {
  console.log("WORKS");
};

// test.css.ts

import { camelCaseFunction } from "./works"

camelCaseFunction () // works

// multiple_exports.tsx

export * from "./problem";
export * from "./works";

// test.css.ts

import { camelCaseFunction } from "./multiple_exports"

camelCaseFunction () // error (because multiple_exports also exports the PascalCaseFunction)

Not lying, I had a pretty hard testing / debugging time on this one, that’s not obvious at all :p

Reproduction

https://codesandbox.io/p/sandbox/agitated-ride-g44g7r

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 12th Gen Intel(R) Core(TM) i7-12700K
    Memory: 8.07 GB / 15.62 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.19.1 - /usr/local/bin/node
    Yarn: 3.3.1 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm

Used Package Manager

npm

Logs

(in the terminal of course)


NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: $RefreshReg$ is not defined
Import trace for requested module:
./styles/test.css.ts



### Validations

- [X] Check that there isn't [already an issue](https://github.com/vanilla-extract-css/vanilla-extract/issues) that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

About this issue

Original URL
State: open
Created a year ago
Reactions: 15
Comments: 21 (5 by maintainers)

Most upvoted comments

This error also occurred to me in a monorepo. I was using barrel files to combine exports for multiple .css.ts files.

// theme/index.ts
export * from './contract.css';
export * from './sprinkles.css';

// then
import { sprinkles, theme } from 'theme'

Importing directly from .css.ts helped

// before, error pops up
import { sprinkles, theme } from 'theme';

// after, no error
import { sprinkles } from 'theme/sprinkles.css';
import { theme } from 'theme/contract.css';

shelooks16 on Jul 25, 2023

Unfortunately I don’t have a sample repo available, I just have the codesandbox provided in the issue, but that should do it.

The solution (or should I say “workaround”) was to ensure the file you are importing into the .css.ts comes from a file that doesn’t export anything that IS or MIGHT BE MISTAKEN FOR a React component.

Take a look at the sandbox, you have multiple examples of working / not working cases.

The main idea is to not import anything that (is a function|is exported alongside other elements that are functions) starting with a capital letter.

toyi on Apr 5, 2023

I’ve just spent hours upgrading a repo from v6 to v7 replacing createStyles with vanilla extract and now come across this issue. Next.js 13 pages dir app. Followed the Mantine upgrade docs + vanilla extract docs. No idea how to resolve it.

./src/components/layouts/Footer.css.ts NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: document is not defined

mbrookson on Feb 9, 2024

any solution yet?

qmahmoudi74 on Nov 9, 2023

I’ve come up with patching @vanilla-extract/integration to mitigate the $Refresh$ issue by removing the problematic lines from source

diff --git a/dist/vanilla-extract-integration.cjs.dev.js b/dist/vanilla-extract-integration.cjs.dev.js
index f9ece42d38952835bb6c9e3414f64807d9a3d79c..07e3d34ddb0457c057d154c7b31047f40fd119b7 100644
--- a/dist/vanilla-extract-integration.cjs.dev.js
+++ b/dist/vanilla-extract-integration.cjs.dev.js
@@ -128,7 +128,7 @@ async function processVanillaFile({
   const adapterBoundSource = `
     require('@vanilla-extract/css/adapter').setAdapter(__adapter__);
     ${source}
-  `;
+  `.replaceAll(/.*__webpack_require__\.\$Refresh\$.*/g, '');
   const evalResult = evalCode__default["default"](adapterBoundSource, filePath, {
     console,
     process,

guillaumewuip on Oct 7, 2023

Hello any feedback on this yet or can anyone help with this

Is anything other than vars being exported from that theme file?

Hey So all it export is something like this

enyelsequeira on Sep 25, 2023

Importing directly from .css.ts helped

@shelooks16 thanks for that, works like a charm

V-iktor on Aug 22, 2023

@toyi Thanks a lot, I think your investigation saved me from a ton of lost time doing it myself. I have the exact same scenario with Next13. Monorepo where one package is “ui” library implemented with vanilla extract and all of the react components and helper functions are exported via one index file. Then in my <component>.css.ts file in Next13 app inside the monorepo I was importing a helper function (which is just a normal function sitting in a .ts file in ui lib) like import {helperFunctionName} from 'ui' and I was getting this weird error. Changing the import to the exact path like import {helperFunctionName} from 'ui/styles/helperFunctionFile' fixed the error -_-

ssijak on Jun 7, 2023