Search code examples
reactjstypescriptnpmpackage.jsontsc

How to copy package.json in dist or build folder when running tsc (TypeScript compiler)

I have a TypeScript React component that uses a package.json file (see screenshot) and I run tsc in order to transpile it to es5 in my dist folder but the package.json file doesn't get copied. Please note that in the screenshot I manually copied it in the dist folder.

component screenshot

So my question: Is there a way to do this via tsc/tsconfig ... without having to add a copy script (ran via yarn build). Because I would like this to be updated also when running tsc --watch

Also I do NOT wish to rename my Component.tsx to index.tsx in the component folders. I don't want to have 200 index.tsx files in my project and using the package.json's main allow me to have import SomeComponent from './components/SomeComponent' instead of doing import SomeComponent from './components/SomeComponent/SomeComponent' so it's great.

Here is my tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "declaration": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Many thanks for your time and your help or suggestions.

Solution

  • Just include it in your tsconfig.json file and enable the resolveJsonModule compiler option. You can do this by merging the following config into your tsconfig.json file:

    {
    "compilerOptions": {
        "resolveJsonModule": true
    },
    "include": ["./package.json"]
}