Dynamic require of "vue" is not supported

[tobiasdiez]

trafficstars

Environment

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 2.16.0-27329775.777a4b7f
• Package Manager: [email protected]
• Bundler: Webpack
• User Config: plugins, bridge, ssr, target, buildModules
• Runtime Modules: -
• Build Modules: @nuxt/[email protected]

Reproduction

https://codesandbox.io/s/loving-panka-09djh?file=/pages/index.vue

This was working in previous versions and only failed recently.

Describe the bug

Use a module/library that uses vue via require('vue') (in my case that's vue-tailwind) and you get an error "Dynamic require of "vue" is not supported" in the browser console.

Additional context

The problematic part of vue-tailwind/dist/vue-tailwind.js is

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lodash.get'), require('body-scroll-lock'), require('lodash.map')) :
    typeof define === 'function' && define.amd ? define(['exports', 'vue', 'lodash.get', 'body-scroll-lock', 'lodash.map'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueTailwind = {}, global.Vue, global.get, global.bodyScrollLock, global.map));
}(this, (function (exports, Vue, get, bodyScrollLock, map) { 'use strict';

Logs

Uncaught Error: Dynamic require of "vue" is not supported
    __require https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/chunk-ENMAWK7U.js?v=53dbd280:30
    js https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/vue-tailwind.js?v=53dbd280:16
    js https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/vue-tailwind.js?v=53dbd280:17
    __require2 https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/chunk-ENMAWK7U.js?v=53dbd280:36
    <anonymous> https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/vue-tailwind.js?v=53dbd280:1935
chunk-ENMAWK7U.js:30:9
    __require https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/chunk-ENMAWK7U.js?v=53dbd280:30
    js https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/vue-tailwind.js?v=53dbd280:16
    js https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/vue-tailwind.js?v=53dbd280:17
    __require2 https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/chunk-ENMAWK7U.js?v=53dbd280:36
    <anonymous> https://09djh.sse.codesandbox.io/node_modules/.cache/vite/client/vue-tailwind.js?v=53dbd280:1935
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    evaluation self-hosted:2349

[danielroe]

This should work if you add vue-tailwind to build.transpile. It looks like an upstream issue to do with ESM in the vue-tailwind package (see docs).

[tobiasdiez]

I tried adding it to transpile, which also fails but now with an error because it tries to call "vue.extend" but the vue instance is undefined for some reason.

It was also working until very recently, see for example nuxt/bridge#180 where @pi0 provided a nice workaround for some export problem.

Can you please reopen this issue? Thanks!

[danielroe]

Up-to-date sandbox: https://stackblitz.com/edit/github-awmnqa.

(Note that this is working fine with webpack.)

[wattanx]

The latest version appears to be working.