Dynamic import in Vue Router component don't work on deployment

theara · January 31, 2019, 1:52am

Vue Router with dynamic import

{
    path: '/',
    name: 'Dashboard',
    component: () => import('./pages/Dashboard.vue'), // don't work
    meta: {
      title: 'Dashboard',
      icon: 'fas fa-tachometer-alt',
      noCache: true,
    },
  },

Work fine on Local, but don’t work on Deployment on DigitalOcean.
Get error

19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:25 POST http://1.2.3.4/__meteor__/dynamic-import/fetch net::ERR_CONNECTION_REFUSED
i @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:25
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:25
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:1
Promise.then (async)
n.then @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:21
t.fetch @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:25
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:7
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:7
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:1
Promise.then (async)
n.then @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:21
d.prefetch @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:7
f.dynamicImport @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:25
component @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:157
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
Re @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
p @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
a @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
a @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
s.beforeEach @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:157
p @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
a @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
Oe @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
e @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
e @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
e @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
(anonymous) @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
s.beforeEach @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:157
p @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
a @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
Oe @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
e @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
e @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
e @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
a @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
Nn @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
Va.e._init @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
qa @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9
r.startup @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:157
a @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:1
u @ 19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:1
19937063ae2e425ee107d2413fd967864776394b.js?meteor_js_resource=true:9 TypeError: Failed to fetch

theara · January 31, 2019, 2:22am

Now I tried import component on the top, but don’t use

import Dashboard from './pages/Dashboard.vue'

{
    path: '/',
    name: 'Dashboard',
    // component: Dashboard,
    component: () => import('./pages/Dashboard.vue'),
    meta: {
      title: 'Dashboard',
      icon: 'fas fa-tachometer-alt',
      noCache: true,
    },
  },

it work fine too

wildhart · January 31, 2019, 5:59pm

I’m using vue-router with dynamic import exactly as you have it in the first case and it’s working perfectly on Digital Ocean.

The reason it’s working for you in the 2nd case (where you manually import the component at the top) is because then it’s not being imported dynamically, instead it’s part of the initial app bundle. Open an incognito tab in chrome and watch the devtools network tab and you will not see any requests to __meteor__/dynamic-import/fetch on this route. That will tell you that the component is already part of the app bundle.

The problem is with your dynamic import, see the error http://68.183.176.122/__meteor__/dynamic-import/fetch net::ERR_CONNECTION_REFUSED.

The dynamic import module cannot access your server to fetch the file.

How are you deploying to Digital Ocean? mup? Do you have a domain name? The dynamic import should be using your domain name (if you have one) rather than the IP

Check that your ROOT_URL is configured properly.

theara · January 31, 2019, 11:53pm

Thanks for your reply.
I use Mup with IP deployment (not domain name).
My structure

/client
  main.js
/imports
  /api
  /client
  /startup

  app.js
  router.js
  client.js
  both.js

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import routes from './...........'

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

app.js

import './plugins'

import { Meteor } from 'meteor/meteor'
import Vue from 'vue'
import router from './router'

// App layout
import AppLayout from '/imports/client/layouts/AppLayout.vue'

Vue.config.productionTip = false

Meteor.startup(() => {
  new Vue({
    router,
    ...AppLayout,
  }).$mount('app')
})

main.js

import '/imports/both'
import '/imports/client'
import '/imports/app'

wildhart · February 1, 2019, 12:59am

What happens if you enter “http://68.183.176.122/__meteor__/dynamic-import/fetch” in a browser while the server is running? You should get the response “method GET not allowed”.

Can you post some of your mup.js file?

theara · February 1, 2019, 2:24am

Mup.js

module.exports = {
  servers: {
    one: {
      // TODO: set host address, username, and authentication method
      host: '1.2.3.4',
      username: 'root',
      pem: '~/.ssh/id_rsa',
      // password: 'server-password'
      // or neither for authenticate from ssh-agent
    },
  },

  app: {
    // TODO: change app name and path
    name: 'meteor-element',
    path: '../',
    volumes: {
      '/data/file_uploads': '/data/file_uploads',
    },

    servers: {
      one: {},
    },

    buildOptions: {
      serverOnly: true,
    },

    env: {
      // TODO: Change to your app's url
      // If you are using ssl, it needs to start with https://
      ROOT_URL: 'http://1.2.3.4',
      MONGO_URL: 'mongodb://mongodb/meteor-element',
      MONGO_OPLOG_URL: 'mongodb://mongodb/local',
      PORT: 9999,
    },

    docker: {
      // change to 'abernix/meteord:base' if your app is using Meteor 1.4 - 1.5
      image: 'abernix/meteord:node-8.4.0-base',
    },

    // The maximum number of seconds it will wait
    // for your app to successfully start (optional, default is 60)
    deployCheckWaitTime: 120,

    // Show progress bar while uploading bundle to server
    // You might need to disable it on CI servers
    enableUploadProgressBar: true,
  },

  mongo: {
    version: '4.0.5',
    servers: {
      one: {},
    },
  },

  // (Optional)
  // Use the proxy to setup ssl or to route requests to the correct
  // app when there are several apps

  // proxy: {
  //   domains: 'mywebsite.com,www.mywebsite.com',

  //   ssl: {
  //     // Enable Let's Encrypt
  //     letsEncryptEmail: 'email@domain.com'
  //   }
  // }
}

wildhart · February 1, 2019, 4:55am

I’m not an expert, but a couple of things I would try:

Try without the PORT: 9999 option.
Try keeping the PORT: 9999 option but change ROOT_URL to http://1.2.3.4:9999

theara · February 1, 2019, 7:14am

will try soon

theara · February 1, 2019, 8:32am

Now work fine, very thanks

    env: {
      // TODO: Change to your app's url
      // If you are using ssl, it needs to start with https://
      ROOT_URL: 'http://1.2.3.4:9999',
      MONGO_URL: 'mongodb://mongodb/meteor-element',
      MONGO_OPLOG_URL: 'mongodb://mongodb/local',
      PORT: 9999,
    },

wildhart · February 1, 2019, 9:53am

Great, glad I could help! I’ve created an issue at meteor-up: https://github.com/zodern/meteor-up/issues/1057