Theo's Typesafe Cult•4mo ago

unsafe assignment of an `any` value

I am needing to pull in a value from my package.json file (the version of the application) and with t3 I am thrown the following error (see screenshot). This is being thrown in my next.config.js file which has the following code:

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.js");
import { readFile } from "fs/promises";

const packageJson = JSON.parse(
  await readFile(new URL("./package.json", import.meta.url), "utf-8")
);

/** @type {import("next").NextConfig} */
const config = {
    reactStrictMode: true,
    publicRuntimeConfig: {
        version: packageJson.version,
    },
};

export default config;

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.js");
import { readFile } from "fs/promises";

const packageJson = JSON.parse(
  await readFile(new URL("./package.json", import.meta.url), "utf-8")
);

/** @type {import("next").NextConfig} */
const config = {
    reactStrictMode: true,
    publicRuntimeConfig: {
        version: packageJson.version,
    },
};

export default config;

I have the red squiggly lines for the entire const packageJson variable assignment and down on the config where version: packageJson.version is. How do I resolve this typing error?

Solution:

yeah, i can. need to commit the changes

Jump to solution

7 Replies

Juraj98•3mo ago

The error you're seeing is an ESLint rule that prevents you from assigning any to a variable. In my opinion, the best way to solve this is to parse data using zod. This way, you can be certian the data comes in a shape you expect. That would look like this:

import { z } from "zod";

const packageJsonSchema = z.object({ version: z.string() });

const packageJson = packageJsonSchema.parse(
  JSON.parse(
    await readFile(new URL("./package.json", import.meta.url), "utf-8"),
  ),
);

import { z } from "zod";

const packageJsonSchema = z.object({ version: z.string() });

const packageJson = packageJsonSchema.parse(
  JSON.parse(
    await readFile(new URL("./package.json", import.meta.url), "utf-8"),
  ),
);

Another solution would be to just disable the ESLint rules for this file. But this is not ideal. If you want to go this route, just put this at the top of the file:

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */

Last option is to not read the file but import it instead. Just add this import statement with assert:

import packageJson from "./package.json" assert { type: "json" };

import packageJson from "./package.json" assert { type: "json" };

The advantage of this is that the packageJson will be in the exact shape of your package.json. But this relies on some experimental features and you'll get these two warnings: - ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time - ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.

Caspian Nightworth•3mo ago

i made the changes to use zod and it wasn't liked too well

❯ npm run dev

> ffxiv-blue-mage-tracker@0.1.0 dev
> next dev

file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/node_modules/zod/lib/index.mjs:587
                const error = new ZodError(ctx.common.issues);
                              ^

ZodError: [
  {
    "code": "invalid_type",
    "expected": "object",
    "received": "string",
    "path": [],
    "message": "Expected object, received string"
  }
]
    at get error (file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/node_modules/zod/lib/index.mjs:587:31)
    at ZodObject.parse (file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/node_modules/zod/lib/index.mjs:692:22)
    at file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/next.config.mjs:6:39 {
  issues: [
    {
      code: 'invalid_type',
      expected: 'object',
      received: 'string',
      path: [],
      message: 'Expected object, received string'
    }
  ],
  addIssue: [Function (anonymous)],
  addIssues: [Function (anonymous)],
  errors: [
    {
      code: 'invalid_type',
      expected: 'object',
      received: 'string',
      path: [],
      message: 'Expected object, received string'
    }
  ]
}

Node.js v22.2.0

❯ npm run dev

> ffxiv-blue-mage-tracker@0.1.0 dev
> next dev

file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/node_modules/zod/lib/index.mjs:587
                const error = new ZodError(ctx.common.issues);
                              ^

ZodError: [
  {
    "code": "invalid_type",
    "expected": "object",
    "received": "string",
    "path": [],
    "message": "Expected object, received string"
  }
]
    at get error (file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/node_modules/zod/lib/index.mjs:587:31)
    at ZodObject.parse (file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/node_modules/zod/lib/index.mjs:692:22)
    at file:///home/demonicpagan/development/nextjs/ffxiv-blue-mage-tracker/next.config.mjs:6:39 {
  issues: [
    {
      code: 'invalid_type',
      expected: 'object',
      received: 'string',
      path: [],
      message: 'Expected object, received string'
    }
  ],
  addIssue: [Function (anonymous)],
  addIssues: [Function (anonymous)],
  errors: [
    {
      code: 'invalid_type',
      expected: 'object',
      received: 'string',
      path: [],
      message: 'Expected object, received string'
    }
  ]
}

Node.js v22.2.0

Juraj98•3mo ago

Well, it says that instead of object you passed string into the validation function. Did you by chance forget to parse it using JSON.parse?

Caspian Nightworth•3mo ago

i used this code right here that you suggested:

import { z } from "zod";

const packageJsonSchema = z.object({ version: z.string() });

const packageJson = packageJsonSchema.parse(
  JSON.parse(
    await readFile(new URL("./package.json", import.meta.url), "utf-8"),
  ),
);

import { z } from "zod";

const packageJsonSchema = z.object({ version: z.string() });

const packageJson = packageJsonSchema.parse(
  JSON.parse(
    await readFile(new URL("./package.json", import.meta.url), "utf-8"),
  ),
);

Juraj98•3mo ago

Can you please provide a repo with reproducible example? I tried the same exact code and it works.

Solution

Caspian Nightworth•3mo ago

yeah, i can. need to commit the changes

Caspian Nightworth•3mo ago

wow, now it works, lol. love it when you threaten things it starts to work, lol

Gaming

Programming

unsafe assignment of an `any` value