10

I created a new Vue app using Vite via npm init vue@latest. I added TailwindCSS to the project based on the official guide.

Running npm run lint throws errors

error 'module' is not defined no-undef

because it wants postcss.config.js and tailwind.config.js to be ES modules (I think).

When converting postcss.config.js from

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

to

export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

and tailwind.config.js from

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

to

export const content = ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"];
export const theme = {
  extend: {},
};
export const plugins = [];

and running npm run dev the app crashes with the error

[vite] Internal server error: Unexpected token 'export' Plugin: vite:css

How do I solve this linting error?

  • 1
    Why are you doing this? Do the tools you're using support ESM in their configs? I would suggest not linting config files with the same rules as your code. – evolutionxbox Feb 03 '22 at 14:50
  • Why? What value would it add? Maybe this might help: https://stackoverflow.com/questions/45854169/how-can-i-use-an-es6-import-in-node-js? – captainskippah Feb 03 '22 at 14:52
  • ok other question: How would you fix this linting error? Ignore those files when linting? –  Feb 03 '22 at 15:09
  • Exactly, why are you linting the config files at all? Remember, these files are to configure tools. There could be some value, but I would think for now you should ignore them – evolutionxbox Feb 03 '22 at 15:11

2 Answers2

26

You can actually keep those config files as CommonJS. ESLint's env needs to be set to node in those config files because Node is the actual environment during the build.

Option 1: Use inline comment to configure ESLint

Insert this comment at the top of postcss.config.js and tailwind.config.js:

/* eslint-env node */

Option 2: Configure env for *.config.js

Configure overrides to set env for *.config.js files:

// .eslintrc.cjs
module.exports = {
  ⋮
  overrides: [
    {
      files: ['*.config.js'],
      env: {
        node: true,
      },
    },
  ],
}

If using VS Code, you'll likely need to restart the ESLint server (or the IDE) to reload the configuration.

Option 3: Disable ESLint rules for *.config.js

Configure ignorePatterns to not lint these config files:

// .eslintrc.cjs
module.exports = {
  ⋮
  ignorePatterns: ['*.config.js'],
}

If using VS Code, you'll likely need to restart the ESLint server (or the IDE) to reload the configuration.

tony19
  • 125,647
  • 18
  • 229
  • 307
6

Rename the files to postcss.config.cjs resp. tailwind.config.cjs. Note the c in cjs, which stands fro CommonJS Module.

Max
  • 61
  • 1
  • 1