search

solidjs / solid-meta

Write meta tags to the document head
127 stars 16 forks source link

renderToString failing #4

Closed snargle007 closed 1 year ago

snargle007 commented 2 years ago

Hi,

Using the example code:

const tags = []; // mutated during render so you can include in server-rendered template later const app = renderToString(

);

I get an error: server.js:14

^ SyntaxError: Invalid or unexpected token at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
ryansolid commented 2 years ago

Can I get more context? Bundler? Rest of the file? The example in the README is expected to be in the context of a req handler from something like Express. This error suggests a syntax error but I feel I'm missing something.

snargle007 commented 2 years ago

Hey - sorry about no context!

Here's the full server.js

const express = require('express');
const app = express();
const port = 3000;

import { renderToString } from 'solid-js/web';
import { MetaProvider, renderTags } from 'solid-meta';
import App from './App';

app.get('/', (req, res) => {

  const tags = []; // mutated during render so you can include in server-rendered template later
  const app = renderToString(
    <MetaProvider tags={tags}>
      <App />
    </MetaProvider>
  );

    res.send(`
    <!doctype html>
        <head>
        ${renderTags(tags)}
        </head>
        <body>
        <div id="root">${app}</div>
        </body>
    </html>
    `);

})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Using rollup:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import del from "rollup-plugin-delete";
import { terser } from "rollup-plugin-terser";

const plugins = [
  del({
    targets: ["public/*.js", "!public/index.html"],
    watch: true
  }),
  babel({
    exclude: "node_modules/**",
    babelHelpers: "bundled",
    presets: ["solid"],
    plugins: ["@babel/syntax-dynamic-import", "@babel/plugin-proposal-optional-chaining"]
  }),
  resolve({ extensions: [".js", ".jsx"] }),
  commonjs(),
  terser(),
  process.env.production && terser()
];

export default {
  input: "src/index.js",
  output: {
    dir: "public",
    format: "esm"
  },
  preserveEntrySignatures: false,
  plugins
};
snargle007 commented 2 years ago

Not sure how I "closed" the issue :(

ryansolid commented 2 years ago

Are you running rollup on the server code as well. I think it might be choking on the JSX and doesn't know how to deal with it. You probably need to build the serverside as well. There are a few extra things in here, but this config might be helpful as reference: https://github.com/solidjs/solid/blob/main/packages/solid-ssr/examples/ssr/rollup.config.js.

The ssr folder in that example is essentially what you are looking at I think.

snargle007 commented 2 years ago

I updated rollup.config.js to below (it then requires import json from '@rollup/plugin-json'; but then I get a circular dependencies). I'll check around some more. I guess this really isn't an "Issue", it's more of a build process problem on my end,

import { resolve, nodeResolve } from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import del from "rollup-plugin-delete";
import common from "@rollup/plugin-commonjs";
import copy from "rollup-plugin-copy";
import json from '@rollup/plugin-json';

export default [
  {
    input: "src/server.js",
    output: [
      {
        dir: "static/server.js",
        format: "cjs"
      }
    ],
    external: ["solid-js", "solid-js/web", "path", "express", "stream"],
    plugins: [
      del({
        targets: ["public/*.js", "!public/index.html"],
        watch: true
      }),
      nodeResolve({ preferBuiltins: true, exportConditions: ["solid", "node"] }),
      babel({
        babelHelpers: "bundled",
        presets: [["solid", { generate: "ssr", hydratable: true }]],
      }),
      common(),
      json()
    ],
    preserveEntrySignatures: false
  },
  {
    input: "src/index.js",
    output: [
      {
        dir: "public",
        format: "esm"
      }
    ],
    preserveEntrySignatures: false,
    plugins: [
      nodeResolve({ exportConditions: ["solid"] }),
      babel({
        babelHelpers: "bundled",
        presets: [["solid", { generate: "dom", hydratable: true }]],
        exclude: "node_modules/**",
        plugins: ["@babel/syntax-dynamic-import", "@babel/plugin-proposal-optional-chaining"]
      }),
      common(),
      copy({
        targets: [
          {
            src: ["static/*"],
            dest: "public"
          }
        ]
      })
    ]
  }
];

(!) Circular dependencies ../node_modules/@grpc/grpc-js/build/src/channel.js -> ../node_modules/@grpc/grpc-js/build/src/subchannel-pool.js -> ../node_modules/@grpc/grpc-js/build/src/subchannel.js -> ../node_modules/@grpc/grpc-js/build/src/channelz.js -> ../node_modules/@grpc/grpc-js/build/src/make-client.js -> ../node_modules/@grpc/grpc-js/build/src/client.js -> ../node_modules/@grpc/grpc-js/build/src/channel.js ../node_modules/@grpc/grpc-js/build/src/channel.js -> ../node_modules/@grpc/grpc-js/build/src/subchannel-pool.js -> ../node_modules/@grpc/grpc-js/build/src/subchannel.js -> ../node_modules/@grpc/grpc-js/build/src/channelz.js -> ../node_modules/@grpc/grpc-js/build/src/make-client.js -> ../node_modules/@grpc/grpc-js/build/src/client.js -> /home/jim/firebase/node_modules/@grpc/grpc-js/build/src/channel.js?commonjs-proxy -> ../node_modules/@grpc/grpc-js/build/src/channel.js ../node_modules/protobufjs/src/util/minimal.js -> ../node_modules/protobufjs/src/util/longbits.js -> ../node_modules/protobufjs/src/util/minimal.js

ryansolid commented 2 years ago

Sometimes these are just warnings and it will still work. Sometimes you need to change code organization. Does it complete build and can it run? You could always set @grpc/grpc-js as an external dependency on the server and not pull it in. external: ["@grpc/grpc-js"] or something like that.

snargle007 commented 2 years ago

I finally gave up and am using the solid-ssr package and trying to add meta tag generation to that. I may not be good enough at JS to get that working. We'll see. If I do, that might be another good starter app - SSR with dynamic Meta Tags.

ryansolid commented 2 years ago

You might be interested in this starter template: https://github.com/amoutonbrady/vite-ssr-solid

snargle007 commented 2 years ago

Hmm - I'll try that before going to far :)

snargle007 commented 2 years ago

Worked for the meta tags - Now trying to get routing to a page other than / with new meta tags I have it working to change meta tags using a router navlink, but not directly deep link in to /comment. Once I have that figured out I could create a starter ssr app with meta tag replacement :)

snargle007 commented 2 years ago

Ok - I have it working - routing, dynamic meta tags, deep linking. Last thing (I think) is CSS I add: in App.tsx It is copied to /dist/client/ as:

but it gets rendered as: <link data-sm="" rel="stylesheet" type="text/css" href="export default "/static/styles.css""/>

<!DOCTYPE html>

Solid.js & Vite - SSR ...
...