gesture icon indicating copy to clipboard operation
gesture copied to clipboard

Add "types" to "exports" in package.json

Open thomasaull opened this issue 2 years ago • 2 comments

VS Code is complaining about a "wrong" configuration when using this package in a TypeScript project:

Could not find a declaration file for module '@vueuse/gesture'. '[…]/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vueuse/gesture/dist/index.mjs' implicitly has an 'any' type. There are types at '[…]/node_modules/@vueuse/gesture/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@vueuse/gesture' library may need to update its package.json or typings.ts(7016)

It can be easily fixed by adding a reference to the types to the exports section:

"exports": {
  ".": {
    "import": "./dist/index.mjs",
    "require": "./dist/index.cjs",
    "types": "./dist/index.d.ts"
  }
},

thomasaull avatar Aug 29 '23 17:08 thomasaull

Related to https://github.com/vueuse/gesture/pull/25

happy-turtle avatar Feb 15 '24 12:02 happy-turtle

For anyone that's getting bitten by this, until the maintainer can patch it up - I made this quick & dirty fix-it script.

It's supposed to run as a post-install script in your project's package.json

// util/scripts/post-install-hooks/postInstall.cjs
const fs = require('fs');
const path = require('path');
const packageJsonPath = path.resolve(__dirname, '../../../node_modules', '@vueuse', 'gesture', 'package.json');

// Function to check if the required entry exists in package.json
function checkPackageJson() {
  try {
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));

    if (packageJson.exports && packageJson.exports['.'] && packageJson.exports['.'].types === './dist/index.d.ts') {
      console.log('Required entry already exists in package.json.');
      return true;
    }
  } catch (error) {
    console.error('Error reading package.json:', error);
    return false;
  }

  return false;
}

// Function to update package.json with the required entry
function updatePackageJson() {
  try {
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));

    if (!packageJson.exports) {
      packageJson.exports = {};
    }

    if (!packageJson.exports['.']) {
      packageJson.exports['.'] = {};
    }

    packageJson.exports['.'].types = './dist/index.d.ts';

    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
    console.log('package.json updated successfully.');
  } catch (error) {
    console.error('Error updating package.json:', error);
  }
}

// Run the post-install script
if (!checkPackageJson()) {
  updatePackageJson();
}

In your package.json

...

    "postinstall": "node util/scripts/post-install-hooks/postInstall.cjs",

---

armenr avatar Mar 12 '24 07:03 armenr