unsafe assignment of an `any` value

Caspian Nightworth · 2024-06-09T22:43:23.175Z

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: ```js /** * 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?

J

Juraj98•6/10/24, 9:22 AM

The error you're seeing is an ESLint rule that prevents you from assigning

any

any

to a variable.

In my opinion, the best way to solve this is to parse data using

zod

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"),
  ),
);

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 */

/* 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" };

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

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

The advantage of this is that the

packageJson

packageJson

packageJson

packageJson will be in the exact shape of your

package.json

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.

C

Caspian NightworthOP•6/10/24, 10:18 PM

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

❯ 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

J

Juraj98•6/11/24, 3:03 PM

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

JSON.parse

JSON.parse

JSON.parse?

C

Caspian NightworthOP•6/11/24, 4:28 PM

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"),
  ),
);

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"),
  ),
);

J

Juraj98•6/11/24, 5:30 PM

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

Solution

C

Caspian Nightworth•6/11/24, 8:17 PM

yeah, i can. need to commit the changes

C

Caspian NightworthOP•6/11/24, 8:20 PM

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

unsafe assignment of an `any` value

Similar Threads

Similar Threads

Similar Threads