unsafe assignment of an `any` value
Unanswered
Caspian Nightworth posted this in #help-forum
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
I have the red squiggly lines for the entire
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;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?65 Replies
What version of nextjs are you running?
I am running 14.2.1
app router or pages?
import { readFile } from 'fs/promises';
const json = JSON.parse(
await readFile(
new URL('./package.json', import.meta.url)
)
);
const nextConfig = {
publicRuntimeConfig: {
version: json.version,
},
};
export default nextConfig;File should be next.config.mjs
This should work?
Router
Yeah then that should work
What i gave above
I get no type errors
Oh wait I dont think I have the typescripit eslint plugin installed 😂
lol
i am using trpc and everything is bubbling down to that
sec
Whats in your .eslintrc.json
well, it is
eslintrc.cjs for me, but the contents are/** @type {import("eslint").Linter.Config} */
const config = {
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": true
},
"plugins": [
"@typescript-eslint",
"drizzle"
],
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended-type-checked",
"plugin:@typescript-eslint/stylistic-type-checked"
],
"rules": {
"@typescript-eslint/array-type": "off",
"@typescript-eslint/consistent-type-definitions": "off",
"@typescript-eslint/consistent-type-imports": [
"warn",
{
"prefer": "type-imports",
"fixStyle": "inline-type-imports"
}
],
"@typescript-eslint/no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_"
}
],
"@typescript-eslint/require-await": "off",
"@typescript-eslint/no-misused-promises": [
"error",
{
"checksVoidReturn": {
"attributes": false
}
}
],
"drizzle/enforce-delete-with-where": [
"error",
{
"drizzleObjectName": [
"db",
"ctx.db"
]
}
],
"drizzle/enforce-update-with-where": [
"error",
{
"drizzleObjectName": [
"db",
"ctx.db"
]
}
]
}
}
module.exports = config;Lol you using the nextjs recommend eslint setup im assuming? I remember seeing that awhile back
my installation comes from using this: https://create.t3.gg/en/introduction
oh god, this guy
😂
guess you don't like him, lol
Meh. Gimme a few mins, im getting it setup
I am using drizzle, trpc, postgresql, TypeScript, tailwindcss
I think that is all the options in the setup
Gotcha.
Yeah this template is super opinionated, and I tend to not agree with him, but doesnt mean I cant help
He does state that it is opinionated
So heres the rub. Can it be fixed? yes. can it reallllly be fixed? No. 😂
await import("./src/env.js");
import { readFile } from 'fs/promises';
interface PackageJson {
version: string;
}
const json = JSON.parse(
await readFile(new URL('./package.json', import.meta.url), 'utf-8')
) as PackageJson;
/** @type {import("next").NextConfig} */
const config = {
publicRuntimeConfig: {
version: json.version,
},
};
export default config;the issue is now that its saying you cant use typings, because its a .js file.
but you cant turn it into a .ts file
because nextjs requires that to be either js or mjs
Interfaces can't be used in a js file
Right..... then why is the eslint rule for typescript being applied to a .js file?
Idk
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const json = JSON.parse(
await readFile(new URL('./package.json', import.meta.url), 'utf-8')
);
/** @type {import("next").NextConfig} */
const config = {
publicRuntimeConfig: {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
version: json.version,
},
};
export default config;just do this and move on with life
lol
for you can change the eslint file to exclude that file.
Those are the only two options I think
Ok. Just need to then deal with this on the trpc side
So question if you dont mind.
Do you NEED this to be imported in the next.config file?
or can you externalize this to a config_appver.js
or something
and import where you need.
Never thought of it like that. I am new to reach and nextjs
I gotcha. soooo. heres what I would recommend.
One moment.
I can surely start this from scratch without using t3
I mean its up to you bud, what ever you are more comfortable with. I just dont use trpc and ive never used his package/framework.
😂
I feel dumb now
{process.env.npm_package_version}
My main thing is go with community standards. Theo looked like he knew what he is talking about
its already in the environment variables
I think a large portion of the community HERE will say the standard is npx create-next-app@latest
but it doesnt come with all the stuff he has setup
But you will learn ALOT more.
but either way, you can access the version of your application using
{process.env.npm_package_version}So no need to do any sort of fetch on the file. Nice to know
I agree, ive never really had the desire to fetch the version number like that tbh
I just found it looking through the nextjs code, because I know some places they reference their app version, so I knew they had a way to do it
anyways, hopefully that helps! Sorry for the run around trying to figure it out
If that was sufficient as an answer for you when you get back to your computer dont forget to mark it so it closes the thread
it's ok. it is nice to get insights from others in the community, especially with a noob like myself. i know my app will be making api calls. idk if trpc is the way to go now
Yeah im just not familiar with it unfortunately.