0

I'm using the eslint-plugin-vue in my Vue project, but unfortunately there's a mix of both ESM (ECMAScript modules) and CJS (CommonJS) module formats used in the SFCs (Single File Components). Some components are using module.exports = {} in the <script> section, and others the ESM format; export default {}.

The plugin are able to detect errors in the <script> section when defined using the ESM format, but not when using the CJS format.

For example, the linter is correctly warning about vue/require-prop-types in this snippet:

<script>
export default {
  name: 'About',
  props: ['name']
}
</script>

But not when defining it this way:

<script>
module.exports = {
  name: 'About',
  props: ['name']
}
</script>

Any idea if it's possible to enable the eslint-plugin-vue inside CJS module formats in Vue SFCs?

inillie
  • 1
  • 1
  • I'm surprised that CJS didn't cause problems earlier. CJS is harder to statically analyze, you can expect problems with IDE too. Considering that SFC is non-standard format, all tools implement it differently, all you can do is to keep it as standard as possible to avoid odd issues with it. I'd recommend to just refactor all SFC to ESM, this is solved with simple replacement. – Estus Flask Oct 09 '21 at 06:59
  • @EstusFlask I went the long road, and converted all CJS code to ESM. All good now. – inillie Oct 29 '21 at 17:26

0 Answers0