Re-create samples with Vue CLI and upgrade to latest version

[mraible]

When I tried upgrading these samples to the latest versions, I ran into eslint errors. I think it might be good to start from scratch and add existing files from the samples.

I'll take responsibility for fixing this.

[mraible]

I created a new app with Vue CLI and copied the dependencies into custom-login/package.json. Then I added in the Okta SDKs and dependencies that are needed for this sample. The results is the following package.json:

{
  "name": "custom-login",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@okta/okta-signin-widget": "^4.4.2",
    "@okta/okta-vue": "^2.1.1",
    "semantic-ui-css": "^2.4.1",
    "text-encoding": "^0.7.0",
    "vue": "^2.6.12",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

When I run npm start, I get the following error. Why does this sample need webpack, but a new Vue CLI-generated app does not?

> custom-login@1.0.0 start /Users/mraible/dev/okta/samples-js-vue/custom-login
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'webpack/lib/RequestShortener'
Require stack:
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/core/extractWebpackError.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/core/transformErrors.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/index.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@vue/cli-service/lib/config/base.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@vue/cli-service/lib/Service.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@vue/cli-service/bin/vue-cli-service.js
Error: Cannot find module 'webpack/lib/RequestShortener'
Require stack:
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/core/extractWebpackError.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/core/transformErrors.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/index.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@vue/cli-service/lib/config/base.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@vue/cli-service/lib/Service.js
- /Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
    at Function.Module._load (internal/modules/cjs/loader.js:743:27)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/core/extractWebpackError.js:4:26)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/mraible/dev/okta/samples-js-vue/custom-login/node_modules/@soda/friendly-errors-webpack-plugin/src/core/transformErrors.js:3:22)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! custom-login@1.0.0 start: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the custom-login@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[aarongranick-okta]

Maybe this will help? https://github.com/vuejs/vue-cli/issues/2548#issuecomment-423593100 (Try deleting package-lock.json)

[mraible]

@aarongranick-okta Nope, unfortunately, that doesn't help. The strange thing is if I npm i in my CLI-generated app, it works:

npm i
audited 1309 packages in 4.676s

57 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Execution time: 6 s.

The same command in the custom-login sample has a different tune:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @intervolga/optimize-cssnano-plugin@1.0.6 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @soda/friendly-errors-webpack-plugin@1.7.1 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @vue/preload-webpack-plugin@1.1.2 requires a peer of html-webpack-plugin@>=2.26.0 but none is installed. You must install peer dependencies yourself.
npm WARN @vue/preload-webpack-plugin@1.1.2 requires a peer of webpack@>=4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-errors@1.0.1 requires a peer of ajv@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN cache-loader@4.1.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN mini-css-extract-plugin@0.9.0 requires a peer of webpack@^4.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN terser-webpack-plugin@1.4.5 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN thread-loader@2.1.3 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

audited 1657 packages in 5.003s

50 packages are looking for funding
  run `npm fund` for details

found 319 vulnerabilities (318 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

I'll keep digging.

[mraible]

Related: this can't be good - npm WARN deprecated text-encoding@0.7.0: no longer maintained

[mraible]

@aarongranick-okta I had to delete node_modules and package-lock.json, and now it works. Thanks!

[mraible]

Now I'm having issues with dotenv and getting the values from ../testenv to be resolved. I found this answer on Stack Overflow, but I'm not sure it'll work for what I'm trying to do. Will revisit tomorrow.

[aarongranick-okta]

The environment variables are exposed to the app using the Webpack.define plugin: https://github.com/vuejs/vue-cli/blob/9e5b16b00140ef62fa26abd5ff938b7cd8380192/packages/%40vue/cli-service/lib/config/base.js#L241 https://github.com/vuejs/vue-cli/blob/01e36f30cfbc82814cf0fea8da1c408667daa052/packages/%40vue/cli-service/lib/util/resolveClientEnv.js

It looks like it would be possible to modify options for the "define" plugin: https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin Here you can use dotenv to load the testenv file and add the values as options to the webpack.Define plugin.

[mraible]

Thanks, @aarongranick-okta, I'll try that. As far as test/e2e/runner.js, do you have any idea how to modify it to load in webpack's configuration? It currently has:

const webpack = require('webpack')
const DevServer = require('webpack-dev-server')

const webpackConfig = require('../../build/webpack.prod.conf')
const devConfigPromise = require('../../build/webpack.dev.conf')

let server

devConfigPromise.then(devConfig => {
  const devServerOptions = devConfig.devServer
  const compiler = webpack(webpackConfig)
  server = new DevServer(compiler, devServerOptions)
  const port = devServerOptions.port
  const host = devServerOptions.host
  return server.listen(port, host)
})

[mraible]

@aarongranick-okta I tried adding a vue.config.js to each project, but it doesn't seem to help. I still get the following error on startup:

Uncaught Error: Your Okta URL is missing.

[mraible]

This has been implemented.