Nuxt.js: Dynamic imports not working in vue-server-renderer

[lehni]

I have this bit of code in one of my SSR plugins:

let ScrollSnap = null
if (process.browser) {
  (async function () {
    ScrollSnap = await import('./ScrollSnap')
  })()
}

But when running the server, I get this error:

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token import
[vue-router] uncaught error during route navigation:
pages/index.7e17fc3259340ada06a8.js:244
            return import('./ScrollSnap');
                   ^^^^^^

SyntaxError: Unexpected token import
    at getCompiledScript (/path/to/project/node_modules/vue-server-renderer/build.js:7714:18)
    at evaluateModule (/path/to/project/node_modules/vue-server-renderer/build.js:7729:18)
    at r (/path/to/project/node_modules/vue-server-renderer/build.js:7737:16)
    at Function.requireEnsure [as e] (server-bundle.js:41:25)
    at _a7b33a52 (server-bundle.js:2880:29)
    at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1711:17
    at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1738:66
    at Array.map (<anonymous>)
    at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1738:38
    at Array.map (<anonymous>)
    at flatMapComponents (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1737:26)
    at /path/to/project/node_modules/vue-router/dist/vue-router.common.js:1673:5
    at iterator (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1872:7)
    at step (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1654:9)
    at step (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1658:9)
    at runQueue (/path/to/project/node_modules/vue-router/dist/vue-router.common.js:1662:3)

I looks like Nuxt.js is using babel-preset-vue-app which uses babel-plugin-syntax-dynamic-import, so I was surprised by this not working...

But then I realized it happens on the Node.js side of things, so I tried to install babel-plugin-dynamic-import-node and use it in Babel by adding this to my nuext.config.js, but that didn't have any effect either:

  babel: {
    plugins: [
      'dynamic-import-node'
    ]
  }

What am I missing? Is there a way to get the vue-server-renderer to use the same babel configuration as the browser?

_{This question is available on Nuxt.js community (#c1436)}

[NicoPennec]

On which method of Nuxt did you run your import? (your extract of code)

ps: follow this similar issue https://github.com/nuxt/nuxt.js/issues/1615

[lehni]

I just found a simple way to reproduce this issue, without the involvement of any plugins:

You can repllicate this in a fresh Nuxt.js project, created from the nuxt/starter template:

vue init nuxt/starter nuxt-import-test

Then add the following to layout/default.vue:

<script>
if (process.browser) {
  (async function () {
    const Vue = await import('vue')
    console.log('Vue', Vue)
  })()
}

export default {
}
</script>

Running this will produce the Unexpected token import error in your browser.

But if you change the code and remove the if (process.browser) statement, it works:

<script>
(async function () {
  const Vue = await import('vue')
  console.log('Vue', Vue)
})()

export default {
}
</script>

And if you move the statement inside the function, it also works:

<script>
(async function () {
  if (process.browser) {
    const Vue = await import('vue')
    console.log('Vue', Vue)
  }
})()

export default {
}
</script>

This is rather strange. Perhaps there is some pre-processing issue going on when handling process.browser in the outer script scope?

[lehni]

And the problem isn't linked to the use of async / await. This also fails, in the same way:

<script>
if (process.browser) {
  import('vue').then(module => {
    console.log(module)
  })
}

export default {
}
</script>

[NicoPennec]

Try this way:

<script>
  export default {
    async mounted () {
      const test = await import('test')
      console.log(test)
    }
  }
</script>

[lehni]

Yes that works. But why do the others produce an error? They look like correct code to me?

[Atinux]

@lehni it works, but import has to be on top of the file:

const VueLib = () => import('vue').then(m => m.default)

async function start () {
  const Vue = await VueLib()
  console.log('Vue', Vue)
}

start()

In your nuxt.config.js:

module.exports = {
  plugins: [
    { src: '~/plugins/vue', ssr: false }
  ]
}

[lehni]

Could you explain why my code fails? I'm trying to understand the different execution contexts that Nuxt code ends up being run in... I imagine it has something to do with pre-processing. Is there a text about this somewhere on the site?

[simllll]

I've tried to use the syntax mentioned here: https://vuejsdevelopers.com/2017/07/17/vue-js-2-4-important-features/

so that the includes can be used on server side rendernig, but will load async on client. this does not work though..any idea? or how is the correct syntax for this feature with nuxt?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.