module not defined in Vue Project

Question

I just created a new Vue app by running npm init vue@latest like specified in the official documentation. Then I tried adding Tailwind to my app by following the guide for Vue & Vite on their website. However, when opening the file tailwind.config.js I noticed that ESLint tells me that module is not defined and the module.exports syntax does not work.

Why is that and how can I fix it?

Edit: The default .eslintrc.cjs file that gets created by Vue looks like this:

/* 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",
  },
};

You'll need to share more info, include your .eslintrc.js in your question. — Alicia Sykes
– Alicia Sykes, Commented Aug 14, 2022 at 13:21
I edited my question. Also: Vue created a .eslintrc.cjs not .js file. Is that the problem? — muell
– muell, Commented Aug 14, 2022 at 13:26

Ihar Aliakseyenka · Accepted Answer · 2022-08-14 16:44:15Z

6

Add this to .eslintrc.cjs

env: {
  node: true,
},

so your file will look 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

answered Aug 14, 2022 at 16:44

Ihar Aliakseyenka

14.8k5 gold badges51 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

muell Over a year ago

Alternatively, you can also use the comment /* eslint-env node */ in the affected files. This is just a per-file based variant of the accepted answer, but I wanted to mention it for completeness sake.

Ihar Aliakseyenka Over a year ago

@muell true. You're welcome to edit the answer

D. Naumov · Accepted Answer · 2023-02-20 21:34:32Z

Consider to use

.eslintrc.cjs

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

as well as setting compilerOptions.types: ["node"] TS option only for those files.

This is necessary to ensure that I'm not using NodeJS API in sourcecode and doesn't pulling polyfills on it.

This is how it might looks like:

.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"]
  }
}

Collectives™ on Stack Overflow

module not defined in Vue Project

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related