Module is not defined in Vue project
P粉235202573
P粉235202573 2023-11-17 12:38:53
0
2
1199

I just created a new Vue application by running npm init vue@latest as specified in the official documentation. I then tried to add Tailwind to my application following the guides on the Vue and Vite websites. However, when opening the file tailwind.config.js, I noticed that ESLint tells me that module is undefined and the module.exports syntax does not work.

why is that? How can I solve it?

Edit: The default .eslintrc.cjs file created by Vue is as follows:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};


P粉235202573
P粉235202573

reply all(2)
P粉333186285

Consider using

  • .eslintrc.cjs
    …
      overrides: [
        {
          files: ["{vue,vite}.config.*"],
          env: {
            node: true,
          },
        },
      ],
    

and set the compilerOptions.types: ["node"] TS option only for these files.



It might look like this:

  • .eslintrc.cjs

    /* eslint-env node */
    require("@rushstack/eslint-patch/modern-module-resolution");
    
    module.exports = {
      root: true,
      extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/eslint-config-typescript",
        "@vue/eslint-config-prettier",
      ],
      overrides: [
        {
          files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
          extends: ["plugin:cypress/recommended"],
        },
        {
          files: ["{vue,vite}.config.*"],
          env: {
            node: true,
          },
        },
      ],
      parserOptions: {
        ecmaVersion: "latest",
      },
    };
  • tsconfig.config.json

    {
      "extends": "@vue/tsconfig/tsconfig.node.json",
      "include": ["vue.config.*", "vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
      "compilerOptions": {
        "composite": true,
        "types": ["node"]
      }
    }
    
P粉738821035

Add it to .eslintrc.cjs

env: {
  node: true,
},

So your file looks like

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

You can add any of these values ​​

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template