"exports is not defined" error in brand new Vue.js 3 project

Viewed 1792

I am creating a Vue project with VueCli v4. Actually I did it like hundreds of times before but today I got an error.

I am creating with "vue create live-chat" Then I pick Vue 3, Babel and Router. When everything is created I go to subfolder and run "npm run serve" as usual. Everything gets compiled without a problem but when I go to http://localhost:8080, I got this error

vue-router.esm-bundler.js?6c02:2306 Uncaught ReferenceError: exports is not defined
    at Module.eval (vue-router.esm-bundler.js?6c02:2306)
    at eval (vue-router.esm-bundler.js:3375)
    at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js (chunk-vendors.js:1236)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?a18c:1)
    at Module../src/router/index.js (app.js:1219)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)

I used the same command yesterday without a problem. This is my package.json:

{
  "name": "live-chat",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^8.1.2",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0"
  }
}

This is the folder I create:

C:\Users\Bugra\Documents\GitHub\Frontend\Udemy\Build Web Apps with Vue JS 3 and Firebase\Section 13 - PROJECT BUILD - Live Chat Room with Authentication\live-chat

Can you please help me?

*Edit

I have put the Udemy instructor's package.json file and it worked. Only difference is firebase version. Still it would be great if you know the reason.

  "name": "live-chat",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^8.0.1",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0"
  }
}
1 Answers

I encountered the same issue. Changing to the following versions & re-running yarn or npm install worked for me:

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.3"
  },

Note: I scaffolded the app via npx @vue/cli create my-app then added the vue-router dependency.

Related