metalpipemomo Posts - Answer Overflow

metalpipemomo

•Created by metalpipemomo on 8/2/2023 in #questions

How does ct3a launch the cli on install?

Hi! I am trying to build a template/cli app of my own and I've been studying the ct3a github repo (the cli portion specifically), and I don't really have a clue as to how the cli is launched on install! Currently, my app works by pnpm init -> pnpm install package -> npx package. (Weirdly, it only works if I use pnpm, npm is a no-go). On a similar note, create-next-app uses npx to launch itself which adds more to the confusion. Any clue about any of these would be great help!

7 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 7/31/2023 in #questions

CommonJS/Module Errors Feel Random?

Hey! I have two projects with an identical configuration. For some reason, one project will run while the other one will fail due to an ES Module error. package.json and tsconfig.json of project that works:

# package.json
{
  "name": "assessment_server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "@prisma/client": "^5.0.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.5",
    "@types/uuid": "^9.0.2",
    "prisma": "^5.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

# package.json
{
  "name": "assessment_server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "@prisma/client": "^5.0.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.5",
    "@types/uuid": "^9.0.2",
    "prisma": "^5.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

package.json and tsconfig.json of project that does not work:

# package.json
{
  "name": "cli-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "chalk": "^5.3.0",
    "commander": "^11.0.0",
    "figlet": "^1.6.0"
  },
  "devDependencies": {
    "@types/figlet": "^1.5.6",
    "@types/node": "^20.4.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

# package.json
{
  "name": "cli-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "chalk": "^5.3.0",
    "commander": "^11.0.0",
    "figlet": "^1.6.0"
  },
  "devDependencies": {
    "@types/figlet": "^1.5.6",
    "@types/node": "^20.4.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

The first project is basically the prisma-express.js example from their github repo. The second project is just me trying to learn how to make a CLI app.

8 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 3/23/2023 in #questions

Consuming a tRPC Query in getServerSideProps

6 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 10/16/2022 in #questions

getStaticProps runs multiple times!

Have no idea why this happens, few threads on github but no solution it seems. When it runs, only one of the runs has the proper params, the rest are just undefined.

//[pid].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';

import axios from '../../utils/axiosBase';

const getPost = (pid) => {
    return axios.get('/get-post', { params: { pid } });
};

const Post = ({ post }) => {
    const { data } = useQuery(['get-post'], getPost, { initialData: post });
    return <p>h</p>;
};

export const getStaticProps: GetStaticProps = async (context) => {
    const post = await getPost(context.params.pid);
    return {
        props: { post: post.data }
    };
};

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        paths: [],
        fallback: 'blocking'
    };
};

export default Post;

//[pid].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';

import axios from '../../utils/axiosBase';

const getPost = (pid) => {
    return axios.get('/get-post', { params: { pid } });
};

const Post = ({ post }) => {
    const { data } = useQuery(['get-post'], getPost, { initialData: post });
    return <p>h</p>;
};

export const getStaticProps: GetStaticProps = async (context) => {
    const post = await getPost(context.params.pid);
    return {
        props: { post: post.data }
    };
};

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        paths: [],
        fallback: 'blocking'
    };
};

export default Post;

While we're at it, I don't totally understand the dataflow here (I followed the SSG Query pattern suggested on the tanstack page) so any explanation would be super appreciated.

22 replies

TTCTheo's Typesafe Cult

•Created by metalpipemomo on 10/13/2022 in #questions

NextJS build works locally but fails when deployed to Vercel

7 replies

Gaming

Programming