.16 custom plugin not found (webpack)

[dgk]

I followed the docs for custom plugin

in my /src/plugin folder I have a file Socket.js with this content

// import WebSocket from '@uci/websocket-client'
import WebSocket from '../../uci-websocket-client/browser-client'

// leave the export, even if you don't use it
export default ({ Vue }) => {
  let url = process.env.WSS || 'ws://0.0.0.0:8090'
  const ws = new WebSocket(url)

  Vue.prototype.$socket = ws
}

I then have 'Socket' in the plugins section of the config file but I get

17:221-227 "export 'Socket' was not found in 'quasar'

no manner of fiddling with names get’s me by this error. Am I not supposed to use the default export like in the axios example?

[rstoenescu]

Hi,

1. Mind that the default export is a function.
2. Are you import Socket from ‘quasar’? That ain’t right.
3. I’d rewrite your plugin:

// import WebSocket from '@uci/websocket-client'
import WebSocket from '../../uci-websocket-client/browser-client'

const ws = new WebSocket(process.env.WSS || 'ws://0.0.0.0:8090')

export ws

// leave the export, even if you don't use it
export default ({ Vue }) => {
  Vue.prototype.$socket = ws
}

Reasons for rewrite: You can then import { ws } from 'plugins/Socket' or use the Vue prototype injection (this.$socket).

Plugins are simple ES6 files. Organize them however you want. Quasar is only interested in the default export only, which should be a function with which you get access to the router, Vue object, store and app (Vue root component of your app). You can re-export stuff (through named export names) that you’ll later need.

[dgk]

@rstoenescu

had to do this with your suggestion
export { ws }
but the warning still continues.
FYI I imported my custom websocket module directory into my .vue page and it works fine. Clearly nothing to do with my code itself.

==========================

Ok so if I try your axios example from the guide page verbatuim I get the same warning
17:235-240 "export 'axios' was not found in 'quasar'

so this really has nothing to do with my plugin. Either I am doing something wrong or something changed in .16? that was not documented. Capital or lower case in plugins prop or file name makes no difference. Is latest version of webpack missing bundling this??

First I yarn added axios to my package.json node_modules
then

in src/plugins I have axios.js with code from your guide.

import axios from 'axios'

export default ({ Vue }) => {
  // we add it to Vue prototype
  // so we can reference it in Vue files
  // without the need to import axios
  Vue.prototype.$axios = axios

  // Example: this.$axios will reference Axios now so you don't need stuff like vue-axios
}

here is my config file. Note I did start this a a clean new .16 project not as an upgrade from .15x

// Configuration for your app

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
    ],
    css: [
      'app.styl'
    ],
    extras: [
      ctx.theme.mat ? 'roboto-font' : null,
      'material-icons',
      ctx.theme.ios ? 'ionicons' : null
      // 'mdi',
      // 'fontawesome'
    ],
    supportIE: false,
    build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      // vueCompiler: true,
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/
        })
      }
    },
    devServer: {
      // https: true,
      // port: 8080,
      open: true // opens browser window automatically
    },
    // framework: 'all' --- includes everything; for dev only!
    framework: {
      components: [
        'QLayout',
        'QLayoutHeader',
        'QLayoutDrawer',
        'QPageContainer',
        'QPage',
        'QToolbar',
        'QToolbarTitle',
        'QBtn',
        'QIcon',
        'QList',
        'QListHeader',
        'QItem',
        'QItemMain',
        'QItemSide',
        'QInput',
        'QField'
      ],
      directives: [
        'Ripple'
      ],
      // Quasar plugins
      plugins: [
        'Notify',
        'axios'
      ],
      iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons'
    },
    // animations: 'all' --- includes all animations
    animations: [
    ],
    pwa: {
      // workboxPluginMode: 'InjectManifest',
      // workboxOptions: {},
      manifest: {
        // name: 'Quasar App',
        // short_name: 'Quasar-PWA',
        // description: 'Best PWA App in town!',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            'src': 'statics/icons/icon-128x128.png',
            'sizes': '128x128',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-192x192.png',
            'sizes': '192x192',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-256x256.png',
            'sizes': '256x256',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-384x384.png',
            'sizes': '384x384',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-512x512.png',
            'sizes': '512x512',
            'type': 'image/png'
          }
        ]
      }
    },
    cordova: {
      // id: 'org.cordova.quasar.app'
    },
    electron: {
      // bundler: 'builder', // or 'packager'
      extendWebpack (cfg) {
        // do something with Electron process Webpack cfg
      },
      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Window only
        // win32metadata: { ... }
      },
      builder: {
        // https://www.electron.build/configuration/configuration

        // appId: 'quasar-app'
      }
    }
  }
}

[rstoenescu]

‘axios’ should be under:

return {
   // app plugins (/src/plugins)
   plugins: [ 'axios' ]
}

NOT under:

framework: {
  plugins: {...}
}

You’re using an app plugin, not a Quasar plugin.