vite-plugin-csp-guard: No "exports" main defined in node_modules/vite-plugin-csp-guard/package.json

[mauro-ni]

Hi, many thanks for the CSP vite plugin.

I have the following problem with eslint:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Error while loading rule 'import/no-cycle': No "exports" main defined in /path/to/app/node_modules/vite-plugin-csp-guard/package.json
Occurred while linting /path/to/app/vite.config.js
    at exportsNotFound (node:internal/modules/esm/resolve:296:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:586:13)
    at resolveExports (node:internal/modules/cjs/loader:639:36)
    at Module._findPath (node:internal/modules/cjs/loader:747:31)
    at findModulePath (/path/to/app/node_modules/eslint-import-resolver-alias/index.js:99:27)
    at exports.resolve (/path/to/app/node_modules/eslint-import-resolver-alias/index.js:75:10)
    at withResolver (/path/to/app/node_modules/eslint-module-utils/resolve.js:179:23)
    at fullResolve (/path/to/app/node_modules/eslint-module-utils/resolve.js:200:22)
    at Function.relative (/path/to/app/node_modules/eslint-module-utils/resolve.js:216:10)
    at RemotePath.resolve (/path/to/app/node_modules/eslint-plugin-import/lib/exportMap/remotePath.js:10:37)
husky - pre-commit script failed (code 1)

Many thanks in advance, Mauro

[RockiRider]

Hey @mauro-ni thanks for trying out the plugin!

What version of vite are you using?

From the logs it looks like your expecting a CJS bundle, which this plugin currently doesn't support, due to Vite deprecating this in V5 and moving towards solely ESM.

Let me know if this sounds correct to you, I can try and spin up a CJS version for you if this is the issue!

[mauro-ni]

Hi @RockiRider, many thanks for the plugin.

I'm working on a React app with Vite 5.4.8 and ESLint 8.57.1. I'm using ESM only.

ESLint is complaining about a path not exported by the package.

I checked your package.json of vite-plugin-csp-guard package, is the exports section correct? I'm not an expert of NPM packages, but...

What about having

"exports": {
    ".": {
      "import": "./dist/index.js"
    }
},

instead of

"exports": {
    "import": "./dist/index.js"
},

Many thanks in advance for your help.

Mauro

[mauro-ni]

Hi @RockiRider, the problem persists, ESLint is still complaining.

No "exports" main defined in /path/to/app/node_modules/vite-plugin-csp-guard/package.json

I tested in my own private packages the following configuration, and it works.

"exports": {
    ".": "./dist/index.js"
},

Maybe a ESLint directive to skip cjs check exists.

Mauro

[RockiRider]

I'll make this change today!

[mauro-ni]

@RockiRider many thanks, do you have the possibility to test with ESLint?

[RockiRider]

If you send over your eslint config that would be helpful, so I can test it locally

[mauro-ni]

@RockiRider, here you are

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "airbnb",
    "prettier"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "import/extensions": [
      "error",
      {
        "js": "never",
        "jsx": "never",
        "json": "ignorePackages"
      }
    ],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ],
    "react/jsx-props-no-spreading": 0,
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
  },
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]],
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

[RockiRider]

@mauro-ni Sorry to bother you again - can you provide all the eslint dependacies and their versions from your package json too? Guessing your project is only using Javascript + React?

[mauro-ni]

@RockiRider here are my dev dependencies:

"devDependencies": {
    "@hookform/devtools": "^4.3.1",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react": "^16.0.1",
    "@testing-library/user-event": "^14.5.2",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.1",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.30.0",
    "eslint-plugin-jsx-a11y": "^6.10.0",
    "eslint-plugin-react": "^7.37.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "husky": "^9.1.6",
    "i18next-conv": "^15.0.0",
    "i18next-parser": "^9.0.2",
    "lint-staged": "^15.2.10",
    "prettier": "^3.3.3",
    "vite": "^5.4.8",
    "vite-plugin-csp-guard": "^1.1.1",
    "vite-plugin-html": "^3.2.2",
    "vite-plugin-static-copy": "^1.0.6",
    "vite-plugin-svgr": "^4.2.0"
},

Many thanks, Mauro

[RockiRider]

@mauro-ni

Adding moduleDirectory: ["node_modules"], to the eslint config fixed issue for me. You can check out the repo here

  settings: {
    "import/resolver": {
      alias: {
        map: [["@", "./src"]],
        extensions: [".js", ".jsx"],
        moduleDirectory: ["node_modules"],
      },
    },
  },

The issue with changing the vite-plugins package json to this:

"exports": {
    ".": "./dist/index.js"
},

Is the fact that it would limit us to only es modules, where as in the future we might want to support cjs hence needing something like this:

    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    }