"Error: Styles were unable to be assigned to a file" when building React app

Question

Running npm run build returns this error. I believe it was working properly 3-4 months ago and, in fact, npm run dev works great. I suspect it has something to do with the removal requirement of the @vanilla-extract/babel-plugin


> wellness-saas@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 672 ms (291 modules)
wait  - compiling...
event - compiled client and server successfully in 68 ms (291 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 72 ms (294 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 57 ms (295 modules)
Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
    at Object.getFileScope (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:33:11)
    at generateIdentifier (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:183:49)
    at createVar (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:262:47)
    at /home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:310:12
    at walkObject (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.cjs.dev.js:38:20)
    at Object.walkObject (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.cjs.dev.js:40:20)
    at createThemeContract (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:309:19)
    at createGlobalTheme (/home/asdf/work/i-nuba-wellness-front/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:330:38)
    at eval (webpack-internal:///./styles/vars.css.ts:33:85)
    at ./styles/vars.css.ts (/home/asdf/work/i-nuba-wellness-front/.next/server/pages/_app.js:132:1)

and this is the image I see in the browser:

and this is my package.json

{
  "name": "wellness-saas",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@vanilla-extract/babel-plugin": "^1.1.7",
    "@vanilla-extract/css": "^1.9.2",
    "@vanilla-extract/css-utils": "^0.1.2",
    "axios": "^0.27.2",
    "chart.js": "^3.9.1",
    "classnames": "^2.3.1",
    "next": "12.2.5",
    "next-auth": "^4.10.3",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-chartjs-2": "^4.3.1",
    "react-cookie": "^4.1.1",
    "react-dom": "18.2.0",
    "react-loading": "^2.0.3",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "@types/node": "18.7.6",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "@vanilla-extract/next-plugin": "^2.1.1",
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5",
    "typescript": "4.7.4"
  }
}

As I said, I think it was working before, maybe some package has been updated that was not specified in the package.json?

The vanilla-extract package is properly installed and configured I believe. I'm thinking of using webpack but it's probably some package structure misconfiguration, I would rather not switch to webpack yet.

"Error: Styles were unable to be assigned to a file" when building React app

0 Answers0