Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple hot-reloading source create Maximum call stack error #290

Closed
gjuchault opened this issue Feb 24, 2019 · 17 comments
Closed

Multiple hot-reloading source create Maximum call stack error #290

gjuchault opened this issue Feb 24, 2019 · 17 comments
Labels
bug

Comments

@gjuchault
Copy link

@gjuchault gjuchault commented Feb 24, 2019

Hello,

Using vue-styleguidist from scratch, I had hot-reload error:

Uncaught RangeError: Maximum call stack size exceeded
    at hotAddUpdateChunk

image

It appears to be linked to webpack/webpack-dev-server#87 / webpack/webpack#5655

By removing the plugin https://github.com/vue-styleguidist/vue-styleguidist/blob/master/scripts/make-webpack-config.js#L147 I was able to make Hot Reload works.

I guess combining:

Makes the Maximum Call Stack.

I did not open a PR to remove the plugin line as you specifically said here that the HMR plugin should be after HTMLPlugin, but it seems to be working locally.

@gjuchault

This comment has been minimized.

Copy link
Author

@gjuchault gjuchault commented Feb 24, 2019

Temporary solution:

Add this in styleguide.config.js. It avoids editing the file in node_modules, it's git-ready, and it removes the @vue/cli HMR and keeps the last one.

module.exports = {
    // ...
    dangerouslyUpdateWebpackConfig(webpackConfig) {
        let filteredFirstHMR = false;

        webpackConfig.plugins = webpackConfig.plugins.filter(plugin => {
            if (plugin.constructor.name === 'HotModuleReplacementPlugin' && !filteredFirstHMR) {
                filteredFirstHMR = true;
                return false;
            }

            return true;
        });

        return webpackConfig;
    }
}
@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Feb 24, 2019

Hello @gjuchault, are you using vsg with the @vue/cli 3 ?
If yes, you should probably use the plugin.
If you do, and it is what is failing, can you please open a request on this repo?

@gjuchault

This comment has been minimized.

Copy link
Author

@gjuchault gjuchault commented Feb 24, 2019

No, I'm not using it with @vue/cli 3

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Feb 25, 2019

Hello Gabriel, I do not get your référence to @vue/cli-service if you are not using the CLI.
Would you please set up a repository so that I can reproduce and fix it ? I myself had HMR issues with a router with only * as a route. I understand your frustration.

Thank you in advance.

@JessicaSachs

This comment has been minimized.

Copy link
Collaborator

@JessicaSachs JessicaSachs commented Feb 25, 2019

I'm also getting this @elevatebart... I'm using Vue's CLI Service and a pretty basic setup (aside from Vue Class Component). Do you need me to recreate a minimum viable repo?

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Feb 25, 2019

@JessicaSachs Yes pretty please !! :)

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Feb 25, 2019

Actually @gjuchault, @JessicaSachs was on an older version of the cli-plugin.
To help solve your issue, can you share what your package.json looks like ?
I am especially interested in the devDependencies section.

do not hesitate to ping me on discord ;)

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Feb 27, 2019

Hello Gabriel,
@gjuchault do you have a minute today to try reproducing it for me?
Or at least give me an idea of the contents your package.json file ?

@gjuchault

This comment has been minimized.

Copy link
Author

@gjuchault gjuchault commented Feb 27, 2019

@elevatebart Sorry I was a bit busy the last few days.
To get to this issue, I didn't use the vue-cli plugin.

My package.json (removed desc, etc.)

{
  "name": "ui",
  "version": "1.0.0",
  "scripts": {
      "dev": "vue-styleguidist server",
      "build": "vue-styleguidist build"
  },
  "devDependencies": {
    "vue-styleguidist": "^3.0.16"
  }
}

My styleguide.config.js (removed theming part, and some booleans)

const path = require('path');

module.exports = {
    components: 'src/components/**/*.vue',
    require: [path.join(__dirname, 'src/index.js')],
}

On load, it says:

Loading webpack config from:
/Users/gjuchault/monorepo/packages/ui/node_modules/@vue/cli-service/webpack.config.js
@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Feb 27, 2019

vue-styleguidist needs a webpack.config.js to work out your components.

As you can see in the error message above, styleguidist is picking up the @vue/cli-service webpack config.
This means that the @vue/cli-service package did get installed in your repository. It is part of the vue cli 3. Unless you specify otherwise in vue.config.js, this webpack.config.js contains an extra HMR plugin that needs to be removed. If you do not remove it, you will get this HMR feedback loop.

Vue-cli-plugin-styleguidist will remove this extra HMR for you. if you wish to not use the @vue/cli-service/webpack.config.js, you should set the option webpackConfig in your styleguide.config.js file.

I hope this helps.
Bart

@gjuchault

This comment has been minimized.

Copy link
Author

@gjuchault gjuchault commented Mar 1, 2019

@elevatebart Thansk for the information. You can close the issue. I think it could be nice to specify it in the documentation (either in a FAQ or something)

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Mar 1, 2019

You are right, we could add it to the cookbook. It can be very helpful to go through.
Maybe a troubleshooting page. Please do not hesitate to send a pull requests to the docs.
Did it work ?

Thank you for your interest.

@elevatebart elevatebart closed this Mar 1, 2019
@gjuchault

This comment has been minimized.

Copy link
Author

@gjuchault gjuchault commented Mar 5, 2019

It works very well by using the vue cli plugin :)

@gaconkzk

This comment has been minimized.

Copy link

@gaconkzk gaconkzk commented Apr 23, 2019

hi @gjuchault, I'm having same problem, using the cli plugin vue-cli-plugin-styleguidist with vue-cli 3
my vue.config.js:

const path = require("path")

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons"))
      .end()
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        simbolId: "icon-[name]",
      })
      .end()
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
            @import "@/assets/tokens/tokens.scss";
            @import "@/assets/tokens/tokens.map.scss";
            @import "@/styles/styles.scss";
          `,
      },
    },
  },
}

I have to add your dangerouslyUpdateWebpackConfig function into styleguide.config.js for work around.
Did you have any better solution?
Very appreciated.

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Apr 23, 2019

Hello @gaconkzk

Do you have repository with a reproduction? Can you share your package.json ?

Thank you for taking the time to post your issue.

@ffxsam

This comment has been minimized.

Copy link
Contributor

@ffxsam ffxsam commented Jul 20, 2019

@elevatebart I'm having this issue too. Let me know what you need from me.

@elevatebart

This comment has been minimized.

Copy link
Member

@elevatebart elevatebart commented Jul 20, 2019

Hey @ffxsam do you use the vue cli ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.