Works in Prod/Build, but not in Dev/Preview

[SebastianBoergers]

The Module works like a charm when I build the app and run it in production mode basically.

It doesn't work in Dev-Mode though:

frontend-nuxt-1      | [Vue warn]: Runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
frontend-nuxt-1      | [Vue warn]: Invalid vnode type when creating vnode: undefined.

It's a Mono-Repo, but the node_modules path should be correct at the default "./".

Everything in the config should be correct too, I guess?:

import { resolve } from 'path';

export default defineNuxtConfig({
  ssr: true,
  srcDir: 'src/',
  experimental: {
    writeEarlyHints: false,
  },
  build: {
    transpile: ['@urql/vue', '@vueform/slider'],
  },
  postcss: {
    plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  components: {
    dirs: [
      {
        path: '~/components/global',
        global: true,
      },
      '~/components',
    ],
  },
  css: [
    '~/assets/css/styles.css',
    '@fortawesome/fontawesome-svg-core/styles.css',
  ],
  app: {},
  hooks: {
    'pages:extend'(pages) {
      pages.push(
....
      );
    },
  },
  vue: {},
  vite: {
    resolve: {
      alias: {
        stores: resolve(__dirname, 'src/stores'),
        mixins: resolve(__dirname, 'src/mixins'),
      },
    },
    server: (() => {
      if (process.env.NODE_ENV !== 'production') {
        return {
          hmr: true,
          watch: {
            usePolling: true,
          },
        };
      }
      return {};
    })(),
  },
  nitro: {
    compressPublicAssets: {
      gzip: false,
      brotli: true,
    },
  },
  modules: [
    ['nuxt-runtime-compiler'],
    '@intlify/nuxt3',
    [
      '@pinia/nuxt',
      {
        autoImports: ['defineStore', ['defineStore', 'definePiniaStore']],
      },
    ],
    'nuxt-schema-org',
    '@formkit/nuxt',
    '@vueuse/nuxt',
  ],
  intlify: {
    vueI18n: {
    ....
      },
    },
  },
  schemaOrg: {
...
  },
  runtimeConfig: {
....
    public: {
....
    },
  },
});

I checked if the cwd isn't right, but looking at the output via fs.readdir(process.cwd(), ...) it deffo is right (shortened for readability):

frontend-nuxt-1      | [
....xxxxx
frontend-nuxt-1      |   'formkit.config.ts',
frontend-nuxt-1      |   'jest.config.js',
frontend-nuxt-1      |   'node_modules',
frontend-nuxt-1      |   'nuxt.config.ts',
frontend-nuxt-1      |   'package.json',
.....xxxx
frontend-nuxt-1      | ]

[huang-julien]

Hi thanks for reporting this 🙂 . I tried to reproduce the issue but without success. You config looks good to me 🤔 . I thought that a module might be modifying some aliases but no. Which version of nuxt are you using ?

[SebastianBoergers]

At the moment it'sRC 13, but this problem started to appear around Nuxt RC 9 for me. Back then we made a big leap from RC 4 to 9 (and the upgrade was pretty rough anyway).

My Plan would be: We want to upgrade to the up-to-date Nuxt release version anyway over the next weeks. Maybe that's gonna fix it (somehow, who knows!).

If it doesn't help: Im basically gonna remove stuff from our project until it works to see what causes the issue, and then imma try get a minimal reproduction going.

I'll just report back here once I've got any news. It's probably something really silly, as it always is.

[huang-julien]

@SebastianBoergers Did you manage fix this or reproduce it on a clean repo ?

[SebastianBoergers]

@huang-julien Not yet, but I'll upgrade our project (Nuxt, all modules & packages) in about a week or two - still hope that this will fix it, but if it doesn't i've already got some time allocated get the reproduction going right away. :)

[SebastianBoergers]

Alright, project is upgraded but the problem still persists. I can actually reproduce my issue with a clean nuxt setup. Just the module is installed and this single vue file is used:

<script lang="ts">
import { h, compile } from 'vue';
export default {
  async setup() {
    const t = "<div>ok</div>";
    return { t }
  },
  render() { 
    return h(compile(this.t));
  }
}
</script>

If I import the compile function like import { compile } from 'vue/dist/vue.esm-bundler.js'; things seemingly work as expected on the server.

Is the import I use wrong, maybe? Then again, it still does work on a prod env which is odd.

[huang-julien]

thanks i'll take a look and try to reproduce it 👌 . This is just too strange 🤔 ...

[huang-julien]

I managed to reproduce it with pnpm. Looks like the issue is server-side.

[huang-julien]

@SebastianBoergers let me know if this has been fixed 🙂 , i'll add some tests later

[SebastianBoergers]

Tested it and it seems like you fixed it, thank you so much! :)