failed to resolved async component

[flozero]

• 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

[NickChen14]

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

[chris-dura]

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

[flozero]

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

[rubyil]

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

[flozero]

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

[blindedbymscience]

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.

[chris-dura]

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.

[flozero]

@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

[blindedbymscience]

@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.

[flozero]

ok this is not relevant to this bug so

[sinaa]

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.

[brentcappello]

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

[flozero]

i will try to revert the thing in the #1708