import { renderMetaToString } from 'vue-meta/ssr/index.js'; does not work

sandy-shi commented 2 years ago

Describe the bug

My program is vue3.0 that use vite ssr. I try to use vue-meta to manage page title for better SEO. But following vue-meta's example code, I am trying to import renderMetaToString but it keeps failing with the following error:

/Users/shiminghui/Desktop/yuanma/TXKJ/official-website/node_modules/vue-meta/ssr/index.js:27
export { renderMetaToString };
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)

The code that exports renderMetaToString looks like this...

vue-meta\ssr\index.js:

async function renderMetaToString(app, ctx = {}) {
        // TODO: better way of determining whether meta was rendered with the component or not
        if (!ctx.teleports || !ctx.teleports.head) {
            const { renderToString } = await import('@vue/server-renderer');
            const teleports = app.config.globalProperties.$metaManager?.render();
            await Promise.all(teleports.map((teleport) => renderToString(teleport, ctx)));
        }
        const { teleports } = ctx;
        for (const target in teleports) {
            if (target.endsWith('Attrs')) {
                const str = teleports[target];
                // match from first space to first >, these should be all rendered attributes
                teleports[target] = str.slice(str.indexOf(' ') + 1, str.indexOf('>'));
            }
        }
        return ctx;
    }

    export { renderMetaToString };

sever.js:

import { renderMetaToString } from 'vue-meta/ssr';

Use ssr external can not fix it,

const config = require('./vite.config.js');
/**
 * @type {import('vite').UserConfig}
 */
module.exports = Object.assign(config, {
  ssr: {
    noExternal: [/^vue-meta*/],
    // external: [/^vue-meta*/]
  },
  resolve: {
    // necessary because vue.ssrUtils is only exported on cjs modules
    alias: [
      {
        find: '@vue/runtime-dom',
        replacement: '@vue/runtime-dom/dist/runtime-dom.cjs.js'
      },
      {
        find: '@vue/runtime-core',
        replacement: '@vue/runtime-core/dist/runtime-core.cjs.js'
      }
    ]
  }
})

Reproduction

click here to see the question code

System Info

System:
    OS: macOS 11.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 87.81 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Firefox: 84.0.2
    Safari: 14.0.2

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

bluwy commented 2 years ago

@sandy-shi It would be great to still create a Stackblitz or github repro so someone who likes to take a look at this can quickly get up and running instead of rebuilding from the description.

github-actions[bot] commented 2 years ago

Hello @sandy-shi. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

sapphi-red commented 2 years ago

Closing as it worked with noExternal: 'vue-meta'. Please create a new issue or discussion if it is still not working.

vitejs / vite