universal-vue / uvue

Vue CLI plugin to create universal Vue applications with ease
https://universal-vue.github.io/docs/
MIT License
127 stars 13 forks source link

Api object recurrence causes an error when working with typescript. #37

Closed AliLozano closed 4 years ago

AliLozano commented 5 years ago

Describe the bug A clear and concise description of what the bug is.

To Reproduce Install "@vue/cli-plugin-typescript": "^3.8.0" and put uvue after it dependence in package.json

Expected behavior Run npm run ssr:build or npm run build

It throw error

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at PoolWorker.writeJson (/projects/project/node_modules/thread-loader/dist/WorkerPool.js:116:44)
    at PoolWorker.run (/projects/project/node_modules/thread-loader/dist/WorkerPool.js:100:10)
    at WorkerPool.distributeJob (/projects/project/node_modules/thread-loader/dist/WorkerPool.js:332:15)
    at runQueue (/projects/project/node_modules/thread-loader/node_modules/neo-async/async.js:8097:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 ERROR  Error: Command failed: /projects/project/node_modules/@vue/cli-service/bin/vue-cli-service.js build --modern
Error: Command failed: /projects/project/node_modules/@vue/cli-service/bin/vue-cli-service.js build --modern
    at makeError (/projects/project/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/projects/project/node_modules/execa/index.js:278:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I don't know if is a typescript loader, but moving dependence, it fails,

I've identified that problem is this: @uvue/vue-cli-plugin-ssr/uvue/index.js

constructor(api) { // Constructor de UVueApi
    this.api = api;

and @uvue/vue-cli-plugin-ssr/index.js

  api.uvue = new UVueAPI(api);

After the PoolWorker wants to serialize it and it fails.

I have a solution, but it need to you evaluate it, and add a test. I will pull request.

yabab-dev commented 5 years ago

Hi,

Sorry for late response, but actually I cannot reproduce your issue. Can you provide a repository ?

Thanks !

AliLozano commented 5 years ago

Here is:

Steps:

Create a project with this: vue-router, vuex, dart-sass, babel, typescript, pwa, eslint, unit-jest, e2e-cypress

vue create foobar 
vue add @uvue/sur

When run npm run serve page is in blank. When run npm run build page is in blank. When run npm run ssr:serve it works. When run npm run ssr:build it works.

Change package.json order: (@uvue/vue-cli-plugin-ssr after@vue/cli-plugin-typescript) https://github.com/AliLozano/uvue-typescript-issue

When run npm run serve it works When run npm run build it works When run npm run ssr:serve it fails with circular reference When run npm run ssr:build it fails with circular reference

With my pull request, both works.

yabab-dev commented 5 years ago

Hi, I've tested your procedure and I am able to only reproduce the first issue (blank page) but cannot reproduce the circular to JSON issue.

Can you give me your NodeJS version ?

AliLozano commented 5 years ago

Did you download my repo?, in my repo I've changed the package order. https://github.com/AliLozano/uvue-typescript-issue

screen

My node version is v10.16.0

yabab-dev commented 5 years ago

Yep, I've take your repo and I'm on same node version.

yabab-dev commented 5 years ago

OK I've reproduced the issue but only with ssr:build command. Vue CLI enable thread-loader in production builds, and this one call JSON.stringify.

As a workaround, you can setup your vue.config.js like this:

module.exports = {
  parallel: false,
};

I'll close your PR and I'll try find a better way to solve this issue.

AliLozano commented 5 years ago

Thanks I'll be waiting :).

AliLozano commented 5 years ago

Can you see why In default package order, npm run serve gives a blank page?

yabab-dev commented 5 years ago

It will be fixed in next version.

As a workaround, you can put this in vue.config.js:

module.exports = {
  chainWebpack(config) {
    config.entryPoints
      .get('app')
      .clear()
      .add(require.resolve('@uvue/core/client'));
  },
};

(On next update of this plugin, you need to remove this code)

AliLozano commented 5 years ago

Thanks :)

yabab-dev commented 4 years ago

Fixed in v0.1.1