Closed snargle007 closed 1 year 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.
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
};
Not sure how I "closed" the issue :(
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.
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
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.
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.
You might be interested in this starter template: https://github.com/amoutonbrady/vite-ssr-solid
Hmm - I'll try that before going to far :)
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 :)
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>
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