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

[aysiscore]

Following this example code, I am trying to import renderMetaToString but it keeps failing with the following error:

C:\web\node_modules\vue-meta\ssr\index.js:27

export {
renderMetaToString };

^^^^^^

SyntaxError: Unexpected token 'export'

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 };

I am using Webpack with babel to process server.js so using import works fine. My server.js imports are like this:

server.js

    import path from 'path';
    import fs from 'fs';
    import {renderToString} from '@vue/server-renderer';
    import {renderMetaToString} from 'vue-meta/ssr';

If I comment out the import {renderMetaToString} ... part, then everything runs fine. So it can't be the import syntax causing the issue or else the others would also fail. However, even if I change them all to use require I still get the SyntaxError: Unexpected token 'export' error.

What is the issue and how to fix it?

[Trinovantes]

Are you using webpack-node-externals? Since node_modules/vue-meta/ssr/index.js is exported in ESM format so it must be processed by webpack to convert it to CommonJS format.

// webpack.config.ts
import nodeExternals from 'webpack-node-externals'

export default {
    externals: [
        // Do not externalize dependencies that need to be processed by webpack.
        // You should also whitelist deps that modify `global` (e.g. polyfills)
        nodeExternals({
            allowlist: [
                /^vue-meta*/,
                /\.(css|sass|scss)$/,
                /\.(vue)$/,
                /\.(html)$/,
            ],
        }),
    ],
}

@vue/server-renderer is exported in CommonJS format so it's fine exclude it from webpack

[aysiscore]

Are you using webpack-node-externals? Since node_modules/vue-meta/ssr/index.js is exported in ESM format so it must be processed by webpack to convert it to CommonJS format.

// webpack.config.ts
import nodeExternals from 'webpack-node-externals'

export default {
    externals: [
        // Do not externalize dependencies that need to be processed by webpack.
        // You should also whitelist deps that modify `global` (e.g. polyfills)
        nodeExternals({
            allowlist: [
                /^vue-meta*/,
                /\.(css|sass|scss)$/,
                /\.(vue)$/,
                /\.(html)$/,
            ],
        }),
    ],
}

@vue/server-renderer is exported in CommonJS format so it's fine exclude it from webpack

It wasn't included in the allowlist, but now I added it and still get the same error. I am not using Typescript, so my config is webpack.config.js

[Trinovantes]

Can you paste your entire webpack.config.js?

[pimlie]

If you are using babel-loader you will have to include vue-meta so it will be transformed. See eg webpack/webpack#2031 (comment)

[aysiscore]

If you are using babel-loader you will have to include vue-meta so it will be transformed. See eg webpack/webpack#2031 (comment)

Thank you pimlie. To start my dev server I use babel-node like this:

babel-node src/server.js

How can I include /^vue-meta*/ in babel-node? import {renderMetaToString} from 'vue-meta/ssr' resides in server.js

[Trinovantes]

babel-node does not process files node_modules by default https://babeljs.io/docs/en/babel-node#options

Try setting --ignore '' to disable it

[aysiscore]

--ignore ''

Thank you for the suggestion. Even after adding the ignore I get the error "SyntaxError: Unexpected token 'export'". But in my production build using Webpack I have included /^vue-meta*/ as you suggested and it works.

{
      test: /\.m?jsx?$/,
        exclude: ['/node_modules/', /\bcore-js\b/, /\bwebpack\/buildin\b/, /@babel\/runtime-corejs3/],
        include: [utils.resolve('src'), /^vue-meta*/,],
        use: {
        loader: 'babel-loader',
        options: {
          babelrc : false,
      // Fixes "TypeError: __webpack_require__(...) is not a function"
      // https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
      // https://babeljs.io/docs/en/options#sourcetype
          sourceType : "unambiguous",
          presets : [
            ["@babel/preset-env", {
              // Webpack supports ES Modules out of the box and therefore doesn’t require
              // import/export to be transpiled resulting in smaller builds, and better tree
              // shaking. See https://webpack.js.org/guides/tree-shaking/#conclusion
              modules : false,
              // Adds specific imports for polyfills when they are used in each file.
              // Take advantage of the fact that a bundler will load the polyfill only once.
              useBuiltIns : "usage",
              corejs : {
                version : "3.9",
                proposals : true
              },
            }]
          ],
  
        }
      }
    }

[stale]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.

[Darren-Ter]

Does anyone know how to transform vue-meta/ssr to ESM module via vite?

[sandy-shi]

I met the same quesetion when I use vite ssr

[stale]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it
   Issues that are labeled as pending will not be automatically marked as stale.