Vue "ParseError: 'import' and 'export' may appear only with 'sourceType: module'"

Question

I am trying to import a node module into my Vue project and am getting the following error:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I understand that this is probably due to the node module not being transformed by babelify but I am not sure how to fix it.

My code can be found here:

https://github.com/timothyylim/vue-date-picker-example

Running

npm install 
npm run dev 

should show the error. I simply started with the vue-cli browserify template and tried to pull in a date picker component.

Any help would be greatly appreciated!

Answer 1

Follow the readme of the project you linked and use vue-cli: ~

npm install -g vue-cli
vue init browserify my-project
cd my-project
npm install
npm run dev

Follow up the command-line instructions, I had to install also @vue/cli-init as suggested. By the time being this worked, I can see the vue-cli compiles the same example you pointed out.

EDIT:

Looks like this was a issue with the component weifeiyue/vue-datepicker-local, it was recently fixed here:

https://github.com/weifeiyue/vue-datepicker-local/commit/a6e3078936a37acc1d6344b7b4d8c14b42be0844

The solution should be as simple as update the component.

Answer 2

This error came up for me in an already Vue 3 working project. There was no apparent reason as everything worked okay before this issue.

I added the type key to the package.json to enforce the build process, using CommonJs as vue.config.js is in this format.

{
  "type": "commonjs"
}

Then from the terminal:

npm ci

---

If it still does not work. I would delete the package-lock.json, remove the node_modules directory then reinstall. Ultimately, I took this step, but it should not be necessary.