Build Script throws error (using vue-cli 3)

[Vannsl]

Hey! The local build (npm run styleguide) works fine but if I'm trying to run the build-script, I get the following error:

$ npm run styleguide:build

> [...]
> vue-cli-service styleguidist:build

Loading webpack config from:
[...]/node_modules/@vue/cli-service/webpack.config.js

Building style guide...
(node:5451) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 FAIL  Failed to compile

build/bundle.4cc02fdc.js from UglifyJs
Unexpected token: punc ()) [build/bundle.4cc02fdc.js:79260,0]

The webpack conf was NOT changed, it takes the default-config. Do you have any idea or related questions?

Best Vannsl

[elevatebart]

Hello @Vannsl,

Thank you for reporting this bug, we are always eager to get more feedback.

Would you mind sharing your webpack.config and maybe your package.json? What would be even more helpful is if you set up a repo for reproduction. I unfortunately do not reproduce nor recognize this bug yet and those would help.

Keep in mind that for now I am working on a mac/linux and that node is updated to the LTS. What version of node/webpack/vue-cli/OS are you running the plugin on?

Thanks in advance

[Vannsl]

Hey @elevatebart Thanks for your answer! I'm also running the script on a mac, node v10.12.0

I've got a vue.config.js:

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'development') {
      config.plugin('copy')
        .tap((args) => {
          args[0].push({
            from: path.resolve(__dirname, 'node_modules/frontend-library/dist'),
            to: 'web/',
            ignore: ['.*'],
          });
          return args;
        });
    }
  },
  css: {
    extract: false,
    loaderOptions: {
      sass: {
        data: `
          // two imports
        `,
      },
    },
  },
};

with the webpack config provided by vue-cli 3.

package.json:

{
  "name": "...",
  "version": "0.6.2",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-bundle": "vue-cli-service build --target lib --name components ./src/index.js",
    "test:unit": "vue-cli-service test:unit",
    "version": "echo $npm_package_version",
    "styleguide": "vue-cli-service styleguidist",
    "styleguide:build": "vue-cli-service styleguidist:build"
  },
  "dependencies": {
    "frontend-library": "...",
    "intl": "^1.2.5",
    "intl-locales-supported": "^1.0.0",
    "raf": "^3.4.0",
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-plugin-unit-jest": "^3.0.4",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-airbnb": "^3.0.0-rc.10",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.0.1",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-styleguidist": "^0.1.7",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "main": "./dist/components.common.js",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "files": [
    "dist/*.js",
    "dist/*.css",
    "!*.map",
    "!**/.DS_Store"
  ]
}

and styleguide.config.js:

const path = require('path');

module.exports = {
  title: 'Component Library Style Guide',
  components: 'src/components/**/[A-Z]*.vue',
  ignore: ['**/components/Overlay.vue'],
  require: [
    path.join(__dirname, 'styleguide/global.requires.js'),
    path.join(__dirname, 'styleguide/styles.css'),
    path.join(__dirname, 'node_modules/frontend-library/dist/css/style.min.css'),
  ],
};

Best Vanessa

[elevatebart]

Ooops, sry @vannsl, just found out the source of the issue and it is well... good news I guess.

Reading through this error https://github.com/viljamis/vue-design-system/issues/120 and this issue https://github.com/webpack/webpack/issues/5858 @viljamis, figured that UglifyJs is out of date and therefore incompatible with the version of babel vue-cli is using es6/2015.

IMO, your frontend library is written in es6 and not babelified. Can you try adding it to babel? This way uglify would have no trouble minifying it. Vueds is jumping to terser in last versions to avoid this problem. We should probably do the same.

Tell me if it helps.

[Vannsl]

Yes, you're totally right and of course this is not an issue of this project. Thank you!