Why not possible to use ES imports in vue.config.js file with VueJS?

Question

Why aren't ES imports working in vue.config.js file?

In example:

import * as path from 'path';
import * as pjson from './package.json';

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
      },
    },
  },
  pwa: {
    name: pjson.title,
    assetsVersion: pjson.version,
  },
};

Getting error after running npm run lint command (which uses vue-cli-service):

\vue.config.js:1
import * as path from 'path';

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:6

Also import 'path'; is not working either (tried also other syntax variants):

import 'path';
       ^^^^^^

SyntaxError: Unexpected string

The reason I'm trying to refactor from const path = require('path'); syntax is to avoid this new linter error after ESLint plugins upgrade:

Require statement not part of import statement. eslint(@typescript-eslint/no-var-requires)

But it seems I still need to append this on top of the file: /* eslint-disable @typescript-eslint/no-var-requires */

Possible duplicate stackoverflow.com/questions/39436322/… because node.js builds your app. — Sergei
– Sergei, Commented Dec 18, 2019 at 12:15
I'm aware there are similar questions specific to NodeJS, however I'm interested about this in the context of Vue CLI. — ux.engineer
– ux.engineer, Commented Dec 18, 2019 at 12:21
For example it seems using ES imports in Node is possible with enabling this experimental flag: nodejs.org/docs/latest-v12.x/api/esm.html#esm_enabling Using this just for vue.config.js file with Vue CLI may not be in the core team's interest, but I'm not aware of the internals of Vue CLI...perhaps it could have other uses as well. — ux.engineer
– ux.engineer, Commented Dec 18, 2019 at 12:23

nstuyvesant · Accepted Answer · 2020-06-27 17:24:54Z

5

The file vue.config.js is loaded by @vue/cli-shared-utils/lib/module.js via CommonJS require. Because of that, it expects vue.config.js to be CommonJS, too.

There are a few schemes you could employ to overcome this built-in limitation such as using vue.config.js to

require('@babel/register');

then require another file like vue.config.mjs where your ESM-based code resides.

But given this is only a config file that usually doesn't have a lot of code, it may be better not to fight city hall and instead use CommonJS.

answered Jun 27, 2020 at 17:24

nstuyvesant

1,5362 gold badges24 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Why not possible to use ES imports in vue.config.js file with VueJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related