Nuxtjs 3 + vanilla extract build error

[rubenmoya]

Describe the bug

Nuxt 3 beta has been released and I was trying to use vanilla-extrat with it. I installed the vite plugin and added it to the nuxt.config.ts file. After running yarn dev I get this error:

some_folder/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.esm.js:1
import outdent from 'outdent';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:170:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async __instantiateModule__ (file://some_folder/.nuxt/dist/server/server.mjs:2319:3)

Let me know if there is any more information I can give you.

Link to reproduction

https://codesandbox.io/s/nuxt3-vanilla-extract-cpfce

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
    Memory: 3.24 GB / 15.57 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 14.17.6 - /tmp/fnm_multishells/1605_1634115304080/bin/node
    Yarn: 1.22.11 - /tmp/fnm_multishells/1605_1634115304080/bin/yarn
    npm: 6.14.15 - /tmp/fnm_multishells/1605_1634115304080/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 93.0
  npmPackages:
    @vanilla-extract/css: ^1.6.2 => 1.6.2
    @vanilla-extract/vite-plugin: ^2.1.3 => 2.1.3

[mattcompiles]

This looks related to the following nuxt issue. https://github.com/nuxt/nuxt.js/issues/11970

[tkofh]

A workaround for this is transpiling @vanilla-extract, outdent, & @emotion like this:

import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  vite: {
    plugins: [
      vanillaExtractPlugin(),
    ]
  },
  build: {
    transpile: ['@vanilla-extract', 'outdent', '@emotion']
  }
})

Repo (part of my ssr issue, nuxt/nuxt.js#11827)

[leithonenglish]

I have a similar issue when I try to integrate vanilla extract. I get a slightly different error even when I try to add the plugin with what's above ☝🏼. Error: couldn't find parent package.json with a name field. Anyone has any fix for this as yet?

[tkofh]

I have a similar issue when I try to integrate vanilla extract. I get a slightly different error even when I try to add the plugin with what's above ☝🏼. Error: couldn't find parent package.json with a name field. Anyone has any fix for this as yet?

@leithonenglish This error can be resolved by adding "name": "my-app" (or whatever name you choose) to your project's package.json. Vanilla Extract looks for the package name to prepend to the virtual modules it creates.

[leithonenglish]

That works perfectly but now when I try to import any of the styles, for example, app.css.ts

import { style } from "@vanilla-extract/css";

export const wrapperStyle = style({
  background: `red`,
});

app.vue

<script lang="ts" setup>
import { wrapperStyle } from "./app.css";
</script>
<template>
  <div :class="wrapperStyle">Hey there</div>
</template>

I get the following warning (node:43589) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. and the server never loads the page. I tried getting info from here https://v3.nuxtjs.org/guide/going-further/esm/ but still not sure what I am missing

[leithonenglish]

No updates on this?

[ljani]

I get the following warning (node:43589) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. and the server never loads the page.

I think I'm facing the same issue with SvelteKit. Someone commented that Node does not like .esm.js and it should be eg. vanilla-extract-css.mjs.

noExternal used to work, but that does not seem to be the case anymore.

[ljani]

Renaming the file to end with .mjs seems to get rid of the errors. Here's another one suggesting fixing the extension.

[ljani]

Okay, my error seems to be fixed by updating to Vite 4.0.3 released 5 hours ago, heh. I guess it was this one.

Anyway, .mjs should be used over .esm.js, or .cjs over .cjs.js, and css-what should be upgraded to v6 so it is ESM, not CJS.

[graup]

I just tested this and don't seem to get any errors. If nobody has anything to add here, I'd close this issue.