Vuepress: failed to resolved async component

Created on 30 Jul 2019  Â·  14Comments  Â·  Source: vuejs/vuepress




  • [x] I confirm that this is an issue rather than a question.




Bug report

Steps to reproduce

  • create a vue js project with vue create examples
  • adding --save-dev vuepress@next 1.0.0-rc.1
  • running "docs": "vuepress dev --no-clear-screen"

  • adding a config.js in .vuepress folder

const path = require('path');

module.exports = {
  title: 'VuePress Docgen',
  description: 'Preview your components',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: "Components Examples", link: "/components/" },
      { text: 'Github', link: 'https://github.com/f3ltron/vuepress-plugin-docgen' }
    ],
    sidebar: {},
  },
  base: "/vuepress-plugin-docgen/"
}
  • adding a readme at the root of the docs
home: true
tagline: Vuepress-plugin-docgen
actionText: Get Started →
features:
- title: Simplicity First
  details: Minimal setup to helps you focus on writing.
- title: Customisable
  details: All templates are customisables
- title: Easy to particpate
  details: Check the contributing guide and you dream <3 
footer: MIT Licensed | Copyright © 2019-f3ltron
---

What is expected?

it should just work when we run the doc

What is actually happening?

[Vue warn]: Failed to resolve async component: function Layout() {
    return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./node_modules/@vuepress/theme-default/layouts/Layout.vue */ "./node_modules/@vuepress/theme-default/layouts/Layout.vue"));
  }
Reason: TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Other relevant information

  • Output of npx vuepress info in my VuePress project:
Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: Not Found
    Safari: 12.1.2
  npmPackages:
    @vuepress/core:  1.0.3
    @vuepress/theme-default:  1.0.3
    vuepress: ^1.0.0-rc.1 => 1.0.3
  npmGlobalPackages:
    vuepress: Not Found

Most helpful comment

This looks like maybe a problem introduced by 1.0.3... I was experiencing the same problem and rolled back to 1.0.2 and I no longer receive that error.

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 64.0
    Safari: 12.1.2
  npmPackages:
    @vuepress/core:  1.0.2 
    @vuepress/theme-default:  1.0.2 
    vuepress: 1.0.2 => 1.0.2 
  npmGlobalPackages:
    vuepress: Not Found

I have the same problem, and rolling back to 1.0.2 doesn't work.
System:
OS: macOS 10.14.3
Binaries:
Node: 10.12.0
Yarn: 1.15.2
npm: 6.5.0
Browsers:
Chrome: 75.0.3770.100
npmPackages:
vuepress: 1.0.2
npmGlobalPackages:
vuepress: Not Found

All 14 comments

Sorry, I have a similar issue.

Inside an Existing Vue Project

  • yarn add vuepress -D
  • add a config.js in .vuepress folder.
module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  configureWebpack: config => {
  },
  chainWebpack: (config, isServer) => {
    // console.log(config);
    // config is an instance of ChainableConfig
  },
}
  • add README.md in src/pages/sitemap
  • yarn docs:dev
"scripts": {
    "docs:dev": "vuepress dev src/pages/sitemap",
    "docs:build": "vuepress build src/pages/sitemap"
  },
# DOCUMENT

What is actually happening?

_is-object.js?bc74:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (_is-object.js?bc74:1)
    at eval (_is-object.js:8)
    at Module../node_modules/@vuepress/core/node_modules/core-js/library/modules/_is-object.js (app.js:1920)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (_an-object.js?4958:1)
    at Object../node_modules/@vuepress/core/node_modules/core-js/library/modules/_an-object.js (app.js:1650)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (_object-dp.js?305e:1)

Other relevant information

  • Output of yarn vuepress info in my VuePress project:
Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
  Binaries:
    Node: 8.12.0 - /var/folders/tn/0sghtx4n4q5gf1k4hz3nl8_j_m35y3/T/yarn--1564475916238-0.0777654533078318/node
    Yarn: 1.16.0 - /var/folders/tn/0sghtx4n4q5gf1k4hz3nl8_j_m35y3/T/yarn--1564475916238-0.0777654533078318/yarn
    npm: 6.8.0 - ~/Documents/Web/f2e/104-f2e-cvue/node_modules/.bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 67.0.4
    Safari: 12.1.1
  npmPackages:
    @vuepress/core:  1.0.3 
    @vuepress/theme-default:  1.0.3 
    vuepress: ^1.0.3 => 1.0.3 
  npmGlobalPackages:
    vuepress: Not Found

This looks like maybe a problem introduced by 1.0.3... I was experiencing the same problem and rolled back to 1.0.2 and I no longer receive that error.

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 64.0
    Safari: 12.1.2
  npmPackages:
    @vuepress/core:  1.0.2 
    @vuepress/theme-default:  1.0.2 
    vuepress: 1.0.2 => 1.0.2 
  npmGlobalPackages:
    vuepress: Not Found

i will try to find the error in 1.0.3 next week i cant till there because coming to Canada ^^

I removed node_modules and global vuepress installation, then ran npm install in the project folder and this solved the issue.

i dont understand how it can solve the problem to do that. I dont have vuepress global install. And npm install will install the exact same packages

I'd like to add that I also encountered this error.

At first I thought it had to do with an async promise in my custom component (in this case it was a cognito login popup) but after troubleshooting for a while I found that the issue only came up when I ran a build.

npm run docs:build

Diving deeper into the error messaging I found that it wasn't a problem with async code in the component, but rather that my component referenced "window" in it's environment detection logic.

Window isn't available when your code is building - thats a browser thing.

Hopefully this helps you figure out the issue.

Window isn't available when your code is building - thats a browser thing.

This means, depending on your component usage, you _may_ need to use the <ClientOnly/> builtin component, or move the window code to a mounted() or beforeMount() hook in your component.

However, this doesn't _precisely_ explain why it happens in 1.0.3 and _not_ 1.0.2 ... so I still believe there may be something else still at play with 1.0.3.

@blindedbymscience you faced the same issue but it was about window after you investigate ? I am not sure i understand here ^^. I will check if i can have more infos in my day off this weekend

observation 1: The intersting fact here is i cloned vuepress and link it to my project and it's working... npm problem maybe. Because the project is using yarn for boostrap etc

observation 2: Not an npm problem same project with yarn install same problem but the link work

@f3ltron In my case, the build was failing while running on AWS CodeBuild -in that Node environment there was no "window" object so that component was throwing errors while the build was running.

As soon as I removed the call in my code to window the build ran fine.

ok this is not relevant to this bug so

I am facing the same issue, however, in my case, I am defining a custom plugin.

Everything compiles fine if I use a for .. in loop in the code, but fails if I use a for .. of loop in the module. I imagine it has something to do with the way the transpiling/webpack logic are set up.

Same issue. Clean install into a clean project. V1.0.3.
I'm still investigating.

i will try to revert the thing in the #1708

This looks like maybe a problem introduced by 1.0.3... I was experiencing the same problem and rolled back to 1.0.2 and I no longer receive that error.

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.10.2 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 64.0
    Safari: 12.1.2
  npmPackages:
    @vuepress/core:  1.0.2 
    @vuepress/theme-default:  1.0.2 
    vuepress: 1.0.2 => 1.0.2 
  npmGlobalPackages:
    vuepress: Not Found

I have the same problem, and rolling back to 1.0.2 doesn't work.
System:
OS: macOS 10.14.3
Binaries:
Node: 10.12.0
Yarn: 1.15.2
npm: 6.5.0
Browsers:
Chrome: 75.0.3770.100
npmPackages:
vuepress: 1.0.2
npmGlobalPackages:
vuepress: Not Found

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shaodahong picture shaodahong  Â·  3Comments

sankincn picture sankincn  Â·  3Comments

AleksejDix picture AleksejDix  Â·  3Comments

zeke picture zeke  Â·  3Comments

lesliecdubs picture lesliecdubs  Â·  3Comments