1

I am creating a Next.js Blog. Inside it, I have a scripts/ folder which contains all kinds of scripts from generating RSS to building Sitemap as well as creating new post using ink CLI.

I have scaffolded a new CLI project inside the Next app using create-ink-app under scripts/new-post/ folder.

I want to access a file named authors.ts which exists outside of the new-post/ folder but inside of the Next.js app under src/_data/authors.ts.

The tree structure inside the Next.js root looks like:

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── scripts/new-post
│   ├── package-lock.json
│   ├── package.json
│   ├── readme.md
│   ├── source
│   │   ├── cli.tsx
│   │   ├── components
│   │   │   ├── Input.tsx
│   │   │   ├── MultiSelect.tsx
│   │   │   └── index.ts
│   │   ├── state.ts
│   │   ├── test.tsx
│   │   └── ui.tsx
│   └── tsconfig.json
├── src
│   ├── _data
│   │   └── authors.ts
│   └── pages
│       ├── _app.tsx
│       └── index.tsx
└── tsconfig.json

When I run the CLI using tsc (I type npm run dev) inside of new-post/, it creates a sub-folder in dist/ while creating folders inside it namely scripts/ & src/. I want the cli.js to be created inside the dist/ folder but it actually creates it inside sub-folders.

The tree command inside dist/ looks like:

.
├── scripts/new-post/source
│   ├── cli.d.ts
│   ├── cli.js
│   ├── components
│   │   ├── Input.d.ts
│   │   ├── Input.js
│   │   ├── MultiSelect.d.ts
│   │   ├── MultiSelect.js
│   │   ├── index.d.ts
│   │   └── index.js
│   ├── state.d.ts
│   ├── state.js
│   ├── test.d.ts
│   ├── test.js
│   ├── ui.d.ts
│   └── ui.js
└── src/_data
    ├── authors.d.ts
    └── authors.js

Notice, the additional scripts/new-post/source command created additionally. I don't want that.

I tried to use "rootDir": "./" in tsconfig.json as this popular question suggests but it doesn't allow me to use authors.ts as it exists in src/_data/ folder.

How do I create a flat output in dist/ folder that is not nested inside it?

I have scaffolded an entire reproduction here -> https://github.com/deadcoder0904/next-ink-dist-error

I try to point my bin script in package.json to dist/scripts/new-post/source/cli.js but it doesn't work when I run new-post. It throws:

❯ new-post
node:internal/modules/cjs/loader:944
  throw err;
  ^

Error: Cannot find module 'C:\Users\<username>\AppData\Roaming\npm\node_modules\new-post\dist\cli.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:941:15)
    at Function.Module._load (node:internal/modules/cjs/loader:774:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

I don't really want to maintain a flat structure. I just want to make the new-post bin command work but it doesn't work so I'm trying to get it to flat structure.

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163

1 Answers1

-1

Could you try running npx tsc inside your new-post folder? I'm not sure, but running npm run dev you are running next dev which probably transpile according to the root tsconfig.json instead of the one inside the folder. I suggest try with the rootDir config and this command, you should be close to your expected result. I can't help with the flat output part of your question.

user13944195
  • 47
  • 2
  • Hey `npx tsc` will result in similar results that I do with `npm run dev` which runs `npm run predev` before that & it contains `tsc` as its command. And as I run it from within the `new-post` folder, it gives the same result. What I want to accomplish is access to `new-post` command that `create-ink-app` generates automatically but it stops working when I add `components/` folder to the mix even when I point to the perfect location ,i.e, `node dist/scripts/new-post/source/cli.js`. See my edited question as well for more info :) – deadcoder0904 Aug 05 '21 at 07:18