commonjsHelpers.js build errors with Vite

[azuline]

trafficstars

I am unable to build a project with this plugin with the Vite toolchain.

I reproduced this with the vite-emotion-typescript example in twin.examples, diffing:

diff --git a/vite-emotion-typescript/package.json b/vite-emotion-typescript/package.json
index 47498d2..8480ae9 100644
--- a/vite-emotion-typescript/package.json
+++ b/vite-emotion-typescript/package.json
@@ -21,6 +21,7 @@
     "@types/react": "^17.0.36",
     "@types/react-dom": "^17.0.11",
     "@vitejs/plugin-react": "^1.0.9",
+    "babel-plugin-twin": "^1.0.2",
     "tailwindcss": "^2.2.19",
     "twin.macro": "^2.8.1",
     "typescript": "^4.5.2",
diff --git a/vite-emotion-typescript/vite.config.ts b/vite-emotion-typescript/vite.config.ts
index daeba20..1ddf194 100644
--- a/vite-emotion-typescript/vite.config.ts
+++ b/vite-emotion-typescript/vite.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
     react({
       babel: {
         plugins: [
+          'babel-plugin-twin',
           'babel-plugin-macros',
           [
             '@emotion/babel-plugin-jsx-pragmatic',

Build output:

blissful@splendor > yarn build
yarn run v1.22.17
warning package.json: No license field
$ tsc && vite build
vite v2.6.14 building for production...
transforming (1) index.html(node:211339) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
transforming (3) src/main.tsxThere was an error trying to load the config "twin" for the macro imported from "twin.macro. Please see the error thrown for more information.
✓ 4 modules transformed.
[vite:react-babel] /home/blissful/sources/twin.examples/vite-emotion-typescript/commonjsHelpers.js: The argument 'path' must be a string or Uint8Array without null bytes. Received '/home/blissful/sources/twin.examples/vite-emotion-typescript/\x00commonjsHelpers.js'
file: commonjsHelpers.js
error during build:
TypeError [PLUGIN_ERROR]: /home/blissful/sources/twin.examples/vite-emotion-typescript/commonjsHelpers.js: The argument 'path' must be a string or Uint8Array without null bytes. Received '/home/blissful/sources/twin.examples/vite-emotion-typescript/\x00commonjsHelpers.js'
    at Object.statSync (node:fs:1531:10)
    at isTypeSync (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/path-type/index.js:28:24)
    at getDirectorySync (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/getDirectory.js:28:61)
    at ExplorerSync.searchSync (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerSync.js:26:63)
    at getConfigFromFile (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/babel-plugin-macros/dist/index.js:260:39)
    at getConfig (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/babel-plugin-macros/dist/index.js:298:24)
    at applyMacros (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/babel-plugin-macros/dist/index.js:214:18)
    at ImportDeclaration (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/babel-plugin-macros/dist/index.js:114:28)
    at NodePath._call (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/blissful/sources/twin.examples/vite-emotion-typescript/node_modules/@babel/traverse/lib/path/context.js:40:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ben-rogerson]

Thanks for the great bug reproduction 👍 I'm also seeing the error also - looks like something in babel-plugin-twin causing circular-type Rollup errors. Will need to look into it a little further.

[zfogg]

+1 please review

[AlexMeah]

The error stems from cosmiconfig trying to read Vite's virtual modules. I opened this https://github.com/sindresorhus/path-type/pull/10 but it was rejected so the fix probably needs to be in cosmiconfig.

You can use this workaround whilst waiting for a fix:

      babel: {
        plugins: [
          "babel-plugin-twin",
          "babel-plugin-macros",
          "babel-plugin-styled-components",
        ],
        ignore: ["\x00commonjsHelpers.js"], // Weird babel-macro bug fix
      },

[ben-rogerson]

[email protected] now has an exclude option that can also avoid the build error:

module.exports = {
  plugins: [
    ["babel-plugin-twin", {
      "exclude": [
        "\x00commonjsHelpers.js" // Avoid build error
      ]
    },
    "babel-plugin-macros",
    // ...
  ],
};

[alainkaiser]

Got the same error as @azuline described above today.

My deps:

    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@types/styled-components": "^5.1.26",
    "@vitejs/plugin-react": "^3.0.0",
    "autoprefixer": "^10.4.13",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-styled-components": "^2.0.7",
    "babel-plugin-twin": "^1.1.0",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "twin.macro": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"

I was also able to fix the build error for production with the following fix described by @ben-rogerson above for a react-ts vite setup:

• open vite.config.ts
• configure the babel plugin under the plugins array as follows:

    react({
      babel: {
        plugins: ['babel-plugin-twin', 'babel-plugin-macros', 'babel-plugin-styled-components'],
        ignore: ['\x00commonjsHelpers.js'], // Weird babel-macro bug fix
      },
    }),