solidjs / solid-start Goto Github PK
View Code? Open in Web Editor NEWSolidStart, the Solid app framework
Home Page: https://start.solidjs.com
License: MIT License
SolidStart, the Solid app framework
Home Page: https://start.solidjs.com
License: MIT License
Changing the adapter to "solid-start-static" causes the error:
node:fs:1722
handleErrorFromBinding(ctx);
Hello.
Maybe this is more of a discussion question, but I'd like to mention it. Though this may be used as a recommendation to enable discussions here. I might of went into the discord channels, but still don't have such an account.
So, have you thought of using one of the more-promising imho snowpack unbundling build tool for the improvement of the solid starter? As to how I understand the diffs between snowpack and others, it offers more modern approach to setting up dev environment and for the actual builds, it can be made utilize only simpler and efficient esbuild
without relying on prev-gen rollup/webpack stuff. Snowpack v3.0.
I personally am eager to delve into making a flexible ground for developing mixedly(i.e. browser+server)- rendered apps with multipage support and find the solidjs project as a step forward in that direction. So I hope its tooling could be kept up-to-date with the good js-stuff that's out there.
Cheers,
Kostadin
Describe the bug
I bootstrapped new project using solid-start but when trying to start it I get the error originating from solid-js/dist/server.cjs
To Reproduce
Provide a code snippet and steps to reproduce the behavior:
mkdir my-app
cd my-app
npm init solid@next
npm install
npm ls solid-js
npm run dev -- --open
Expected behavior
No error, example app runs correctly.
Actual behavior
$ npm run dev -- --open
> dev
> solid-start dev "--open"
Pre-bundling dependencies:
solid-js
solid-js/web
solid-js/store
solid-js/html
solid-js/h
(this will be run only when your dependencies or config have changed)
http://localhost:3000
TypeError: Cannot read properties of undefined (reading 'id')
at wrap (C:\dev\my-app\node_modules\solid-js\dist\server.cjs:385:37)
at Proxy.createComponent (C:\dev\my-app\node_modules\solid-js\dist\server.cjs:229:10)
at Object.element.component.element.element [as outlet] (/node_modules/solid-app-router/dist/routing.js:59:35)
at Object.get children [as children] (c:/dev/my-app/node_modules/solid-app-router/dist/components.jsx:56:57)
at C:\dev\my-app\node_modules\solid-js\dist\server.cjs:138:35
at C:\dev\my-app\node_modules\solid-js\dist\server.cjs:106:43
at createMemo (C:\dev\my-app\node_modules\solid-js\dist\server.cjs:54:13)
at children (C:\dev\my-app\node_modules\solid-js\dist\server.cjs:106:10)
at C:\dev\my-app\node_modules\solid-js\dist\server.cjs:138:14
at createMemo (C:\dev\my-app\node_modules\solid-js\dist\server.cjs:54:13)
Additional context
Downgrading solid-js to 1.2.5 fixes the issue:
npm i -g npm@^8.3.0
diff --git a/package.json b/package.json
index b7bd862..21928be 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"type": "module",
"devDependencies": {
"solid-app-router": "^0.1.14",
- "solid-js": "^1.2.6",
+ "solid-js": "1.2.5",
"solid-meta": "^0.27.2",
"solid-start": "next",
"solid-start-node": "next",
@@ -16,5 +16,8 @@
},
"engines": {
"node": ">=12"
+ },
+ "overrides": {
+ "solid-js": "1.2.5"
}
}
rm -rf package-lock.json node_modules
npm install
npm ls solid-js
npm run dev -- --open
$ npm run dev -- --open
> dev
> solid-start dev "--open"
Pre-bundling dependencies:
solid-js
solid-js/web
solid-js/store
solid-js/html
solid-js/h
(this will be run only when your dependencies or config have changed)
http://localhost:3000
You appear to have multiple instances of Solid. This can lead to unexpected behavior.
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
computations created outside a `createRoot` or `render` will never be disposed
this is what manifest looks like on windows in getAssetsFromManifest
:
getAssetsFromManifest: route= [ { originalPath: '/', pattern: '', path: '/', params: {} } ]
manifest: {
'/C:/Users/me/src/test-solid-start/2022-01-23/src': [
{ type: 'script', href: '/assets/index.1ce99872.js' },
{ type: 'script', href: '/assets/client.99f63873.js' },
{ type: 'style', href: '/assets/index.adcc5497.css' }
],
'*': [ { type: 'script', href: '/assets/client.99f63873.js' } ]
}
that C:/Users/..
path is just '/' on linux
as a result, on windows, no script and style tags are added to the <head>
If the HTTP verb begins with a P, then it has a Request body.
Sorry if this is not the right place for this issue - I'm not sure if it belongs here or in solid-styled-components or in vite.
mkdir repro
cd repro
npm init solid@next
- it doesn't matter if we go with TS or notnpm install
npm install solid-styled-components
echo 'import {} from "solid-styled-components"' >> src/root.jsx
npm run dev -- --open
$ npm run dev -- --open
> repro@ dev C:\dev\repro
> solid-start dev "--open"
http://localhost:3000
23:37:59 [vite] Error when evaluating SSR module /src/root.jsx:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\dev\repro\node_modules\solid-styled-components\src\index.js
require() of ES modules is not supported.
require() of C:\dev\repro\node_modules\solid-styled-components\src\index.js from C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\dev\repro\node_modules\solid-styled-components\package.json.
at new NodeError (node:internal/errors:363:5)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at nodeRequire (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
at ssrImport (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
at eval (/src/root.jsx:25:31)
at instantiateModule (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73464:166)
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\dev\repro\node_modules\solid-styled-components\src\index.js
require() of ES modules is not supported.
require() of C:\dev\repro\node_modules\solid-styled-components\src\index.js from C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\dev\repro\node_modules\solid-styled-components\package.json.
at new NodeError (node:internal/errors:363:5)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at nodeRequire (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73479:17)
at ssrImport (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73431:20)
at eval (/src/root.jsx:25:31)
at instantiateModule (C:\dev\repro\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73464:166)
$ npx envinfo --system --npmPackages --binaries
npx: installed 1 in 1.411s
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
Memory: 7.97 GB / 15.86 GB
Binaries:
Node: 16.2.0 - C:\.tools\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.13 - C:\.tools\nodejs\npm.CMD
npmPackages:
solid-app-router: ^0.1.3 => 0.1.3
solid-js: ^1.0.5 => 1.0.6
solid-meta: ^0.27.0 => 0.27.1
solid-start: next => 0.1.0-alpha.28
solid-start-node: next => 0.1.0-alpha.28
solid-styled-components: ^0.27.1 => 0.27.1
vite: ^2.4.3 => 2.4.4
A top-level index data function (i.e. pages/index.data.js
) does not get executed.
This is because the identifier in the data lookup table is /
while findNestedPath
gets called with an empty string as id.
Hello SolidJS,
I have a yarn
error (warnings, but vercel
builds failed) here, where I've been trying to resolve the incorrect peer dependency, for solid-start@next
.
Also, here's my package.json
file:
{
"scripts": {
...
},
"type": "module",
"private": true,
"devDependencies": {
"solid-app-router": "^0.3.2",
"solid-js": "^1.3.15",
"solid-meta": "^0.27.3",
"solid-start": "next",
"solid-start-vercel": "next",
"vite": "^2.9.9"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"axios": "^0.27.2",
"tachyons": "4.12.0"
}
}
Can you help? Thank you!
Currently, from what I can see, the adapters seem to be semi-limited to what is provided here in the solid-start repro (Edit: Custom adaptors are currently possible, however, imports/dependencies are a little tricky). I'm sure Ryan and contributors have inspected every inch of SvelteKit and have noticed how they handle adapter specification, e.g.:
// svelte.config.cjs
const node = require('@sveltejs/adapter-node');
module.exports = {
kit: {
adapter: node()
}
};
Are there any plans to implement a similar solution? I ask because I'd like to customize my cloudflare-worker deployment with template
predefined in memory, along with a few other changes. Eventually, I may open a PR here when I feel like I've matured my implementation.
Additionally, is this adapter architecture and conceptualization the best approach to handle deployments for various targets/environments? I have a hunch that many developers would like to modify their serving logic (in addition to the conventions laid out in adapters) and neither the current string implementation nor SvelteKit's adapter specification lends themselves well to such a scenario.
I believe the ideal developer experience (DX) would involve using the solid-start CLI to generate server logic in a file(s), from which devs can modify how they see fit. Likely the biggest pain point with this approach would be version management/diffing when trying to upgrade the server logic to a new release (if there were changes made from the developer/user).
There are of course other caveats to this but I believe it would be a superior DX, even to SvelteKit's adapter spec, as it would be much easier to pick and choose what logic users/devs would like to extend from first-party adapters. Currently, extending a SvelteKit adapter involves wrapping their constructors, a process that involves less transparency/clarity than writing directly to a file(s) containing server logic.
npm run dev --port 4000
spawns the dev server on port 3000
Solid App Router supports nested routing. They do so by naming a file the same name as the folder. In so it acts as the parent. I haven't added that yet.
In addition we need to make sure that manifest lookup for preload works as well.
The mobile terminal rating requirements are very high.
I'm going to migrate from NextJS to SolidJS.
Hi,
It would be nice to have an option like the sveltekit package
to allow people to create library without the pain to configure rollup or vite build config, add .d.ts files etc...
The route jsx files are transpiled after the const routes = $ROUTES;
routes definition. Explicitly importing the routes tsx files before importing Routes fixes the issue.
p.then(mod => resolved = mod.default);
TypeError: Cannot read properties of undefined (reading 'default')
If you create two files in the pages folder, Pagination
and PaginationNav
, navigating to either one will show an empty page, and not render the appropriate route. Removing one of the files causes the remaining page to render properly. You can easily repro by using npm init solid@next
and adding two pages with a simple function to each.
I just did the above, but using solid-js 1.2.5 (as I am on windows, as per #29), and solid-start 0.1.0-alpha.44
due to solid-js dependency resolution.
/node_modules/.pnpm/[email protected][email protected]/node_modules/solid-start-node/index.js:9
const { preferStreaming } = config.solidOptions;
^
TypeError: Cannot read properties of undefined (reading 'solidOptions')
The error only occurs when using pnpm (shamefully-hoist=true does not fix the error). Dev server works the same as npm / yarn
Is it possible to use both async and streaming SSR within the same page?
Consider the situation where:
Ideally in this situation we could use async SSR for the first 2 requests (i.e. SolidJS should only start returning a response once those 2 backend requests have completed) and streaming SSR for the third, in order to avoid unnecessary page reflows and distracting visual flicker.
Is it possible to do this at present? As I understand it, Solid's SSR depends on Suspense boundaries to identify which content should be rendered asynchronously, so it presumably wouldn't currently be possible to distinguish between the two types of SSR (and therefore use them within the same page), but I would be very grateful for confirmation.
If not, is it something worth considering? This would also mean that users would not need to make a binary choice between async and streaming SSR.
Hi, I was trying to do a base install of solid-start following the instructions in the readme :
mkdir my-app
cd my-app
npm init solid@next
npm install
npm run dev
Unfortunately, after running the npm run dev
command I receive the error UnhandledPromiseRejectionWarning: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'stream' imported from /Users/{user}/projects/my-app/node_modules/solid-start/runtime/node-globals.js
Can anyone advise how I might resolve?
I'm using Node v14.19.0 and NPM v6.14.16, I've tried cleaning and re-installing a couple of times to see if it resolved, also with cleaning npm cache but it's not helped.
Some files in the pages
directory are incorrectly resolved as routes.
For example:
src/pages/rockets.tsx
--> /rock.tsx
This is because the periods (.
) in the below regex are not escaped.
solid-start/packages/start/routes.js
Lines 22 to 24 in 596bc2e
My client side rendered solid.js App was hosted on cloudflare pages which is a static sites hosting platform. It's really cool that it gives a git based deployment, production & staging environments, real time site analytics, unlimited bandwidth & edge funtions by integrating workers in to it & also short domain project_name.pages.dev.
When I try to build that same App with Solid Start, I noticed that I can't host it on cloudflare pages because it's needs an ssr. But cloudflare pages also supports ssr by making a funtions/[[path]].ts files & implement the ssr code in it or import a workers ssr logic into it.
https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/
https://blog.cloudflare.com/remix-on-cloudflare-pages/
https://developers.cloudflare.com/pages/platform/functions
You Can see these links to know more about it.
It will be so much similar with the cloudflare adapter the only difference will be the functions folder & the static files storage will not be in kv store, so please implement an adapter for cloudflare pages.
The template
variable within entry-stream.js can be stale, which will lead to very odd behavior upon uploading changes to CF Workers KV (while an instance of template
is instantiated).
// solid-start-cloudflare-workers/entry-stream.js
// ...
let template;
// ...
async function handleEvent(event) {
// ...
if (!template) { // <=== Can be stale if worker's template is updated AND already in memory
template = await __STATIC_CONTENT.list({prefix: "index"})
.then(res => __STATIC_CONTENT.get(res.keys[0].name));
}
// ...
}
An easy repro is:
solid-start
+ CF worker project with wrangler dev
.title
in the index.html
vite entry (for example, "!").wrangler dev
.We need a good suite of:
We should then run these as Github Actions.. we need confidence across the adapters
Hello, we deployed new application using solid-start and after doing npm run build, we cannot open files in /public folder. It always gives us fallback route index.js. What could be the cause? We checked other examples (like hackernews-ts) and did not find any difference.
Hi, there is an issue when use pnpm.
Steps:
npm init solid@next
It will outputs:
Next steps:
1: npm install (or pnpm install, or yarn)
2: npm run dev -- --open
Then run pnpm install && pnpm run build
, it will output 'node-fetch' is imported by .solid/server/index.js, but could not be resolved
:
โ solid-pnpm pnpm run build
> solid-pnpm@ build /Users/owenyoung/inbox/solid-pnpm
> solid-start build
vite v2.5.10 building for production...
vite v2.5.10 building SSR bundle for production...
โ 27 modules transformed.
โ 25 modules transformed.
.solid/server/rmanifest.json 0.08 KiB
.solid/server/manifest.json 0.24 KiB
.solid/server/nodeStream.js 25.36 KiB
dist/rmanifest.json 0.26 KiB
dist/manifest.json 0.51 KiB
dist/assets/index.4675620e.js 0.62 KiB / brotli: 0.31 KiB
dist/assets/index.02b9559a.css 0.67 KiB / brotli: 0.32 KiB
dist/assets/client.b4785e53.js 20.59 KiB / brotli: 7.10 KiB
'node-fetch' is imported by .solid/server/index.js, but could not be resolved
I also try npm install
, it works fine.
Steps to reproduce:
npm init solid@next
npm install
npm build
the to start the server
npm run start
or cd dist; node index.js
Error rendered to the browser: Cannot read property 'reduce' of undefined
Error rendered to console: Failed to load resource: the server responded with a status of 500 (Internal Server Error)
A deeper scan seems to reveal it's a Vite error @vite/client:351 and 352 line ref - looks like it's trying to access the route remotely and of getting a 500 status code <- I could be wrong.
The weird thing is this only occurs in a production build, it works fine in dev mode.
Finally, could not see if a default 404 page gets generated for bad paths, or if a 404 in pages dir would be used by default for any paths that do not exist clientside or are exposed to the client serverside via actions?
I am just trying solid start to port my solid.js client side renderded app to solid start (although solid start is in active development) & It works really while dev build (solid-start dev). I tried it with graphql (urql), fetch to an api & its really cool!
but when i tried to run a production build (solid-start build) it fails saying can't find an entry module! why is this happening? I see that it needs unavailable files, how can i fix this?
I have a repo that builds on top of solid-start here: https://github.com/nikitavoloboev/nikitavoloboev
I have a pdf file in public called cv.pdf
: https://github.com/nikitavoloboev/nikitavoloboev/blob/main/public/cv.pdf
If I for example do this:
<a class="nav-link" href="./cv.pdf">
CV
</a>
Inside the app if I go to this page, it will 404:
https://www.loom.com/share/900b34ae19904c59aed372d2a7457103
Not sure what I am doing wrong. I need to refresh the page for the PDF to actually show.
I got this error at build
$ npm run build
> build
> solid-start build
(node:8785) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
vite v2.7.13 building for production...
transforming (24) node_modules/solid-app-router/dist/integration.jsError when using sourcemap for reporting an error: Can't resolve original location of error.
โ 30 modules transformed.
'innerHTML' is not exported by node_modules/solid-js/web/dist/web.js, imported by src/components/comment.tsx
file: /Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/components/comment.tsx:3:9
1: import { template as _$template } from "solid-js/web";
2: import { delegateEvents as _$delegateEvents } from "solid-js/web";
3: import { innerHTML as _$innerHTML } from "solid-js/web";
^
4: import { effect as _$effect } from "solid-js/web";
5: import { getNextElement as _$getNextElement } from "solid-js/web";
/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:160
base = Object.assign(new Error(base.message), base);
^
Error: 'innerHTML' is not exported by node_modules/solid-js/web/dist/web.js, imported by src/components/comment.tsx
at error (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:160:30)
at Module.error (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:12438:16)
at Module.traceVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:12808:29)
at ModuleScope.findVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:11601:39)
at ReturnValueScope.findVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:6964:38)
at ChildScope.findVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:6964:38)
at ReturnValueScope.findVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:6964:38)
at ChildScope.findVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:6964:38)
at ReturnValueScope.findVariable (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:6964:38)
at Identifier.bind (/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/rollup/dist/shared/rollup.js:6479:40) {
code: 'MISSING_EXPORT',
url: 'https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module',
id: '/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/components/comment.tsx',
pos: 131,
loc: {
column: 9,
file: '/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/components/comment.tsx',
line: 3
},
frame: '1: import { template as _$template } from "solid-js/web";\n' +
'2: import { delegateEvents as _$delegateEvents } from "solid-js/web";\n' +
'3: import { innerHTML as _$innerHTML } from "solid-js/web";\n' +
' ^\n' +
'4: import { effect as _$effect } from "solid-js/web";\n' +
'5: import { getNextElement as _$getNextElement } from "solid-js/web";',
watchFiles: [
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/entry-client.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-js/web/package.json',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/package.json',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-js/web/dist/web.js',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/index.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/Links.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/Meta.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/Routes.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/Scripts.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/StartClient.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/StartContext.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/components/StartServer.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-js/package.json',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-js/dist/solid.js',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-app-router/package.json',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-app-router/dist/index.jsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/routes/[...stories].tsx?data',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/routes/stories/[id].tsx?data',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/routes/users/[id].tsx?data',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/routes/[...stories].tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/routes/stories/[id].tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/routes/users/[id].tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-meta/package.json',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-meta/dist/index.jsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/root.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/server/index.ts',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/components/story.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/components/comment.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/components/nav.tsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/src/root.css',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-app-router/dist/components.jsx',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-app-router/dist/integration.js',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-app-router/dist/routing.js',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-app-router/dist/utils.js',
'/Users/efxair/Desktop/dev/solidtuts/hacker-news-solid-start/node_modules/solid-start/server/constants.js'
]
}
The npm run dev has some troubles too.
ReferenceError: exports is not defined
at processRoute (file:///home/brian/work/portfoliome/censible-core/vendor/solid-start/packages/start/routes.js:65:44)
at file:///home/brian/work/portfoliome/censible-core/vendor/solid-start/packages/start/routes.js:82:5
at Array.reduce (<anonymous>)
at getRoutes (file:///home/brian/work/portfoliome/censible-core/vendor/solid-start/packages/start/routes.js:80:29)
at async Context.load (file:///home/brian/work/portfoliome/censible-core/vendor/solid-start/packages/start/plugin.js:24:26)
at async Object.load (/home/brian/work/portfoliome/censible-core/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-0351185a.js:36961:32)
at async doTransform (/home/brian/work/portfoliome/censible-core/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-0351185a.js:51996:24)
This will allow the solid-start
middleware to be bypassed to the next middleware.
entry-server
can take a next
param which will enable it to move to the next middleware.
When running solid-start build
, I'm getting the error:
Error: 'ssrBoolean' is not exported by ../../node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js, imported by .solid/server/app.js
It looks like ssrBoolean is not defined in the dom-expressions
package, yet is defined in solidjs
server-mock.ts
.
I'm trying to use solid-scroll-shadows package with SSR and it fails.
Here's the repo to replicate https://github.com/aquaductape/test-scroll-shadows. File/Page where solid-scroll-shadows
is being used https://github.com/aquaductape/test-scroll-shadows/blob/main/src/routes/index.tsx
I suspect it's a package output issue because I copied the library into the repo https://github.com/aquaductape/test-scroll-shadows/tree/main/src/lib/solid-scroll-shadows, and used it instead of using the official package and it works.
// import ScrollShadows from "solid-scroll-shadows";
import ScrollShadows from "../lib/solid-scroll-shadows";
2:29:28 AM [vite] Error when evaluating SSR module /src/routes/index.tsx:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
2:29:28 AM [vite] Error when evaluating SSR module /node_modules/solid-start/root/Routes.tsx:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
2:29:28 AM [vite] Error when evaluating SSR module /node_modules/solid-start/root/index.tsx:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
2:29:28 AM [vite] Error when evaluating SSR module /src/root.tsx:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
2:29:28 AM [vite] Error when evaluating SSR module /node_modules/solid-start/entry-server/StartServer.tsx:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
2:29:28 AM [vite] Error when evaluating SSR module /node_modules/solid-start/entry-server/index.ts?v=ddf2b99f:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
2:29:28 AM [vite] Error when evaluating SSR module /Users/caleb/Documents/just-programming/test-scroll-shadows/src/entry-server:
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
ERROR file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/esm/index.js:1
import { template, effect, style, insert, createComponent, isServer, classList } from 'solid-js/web';
^^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'classList'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async nodeImport (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56262:21)
at async eval (/src/routes/index.tsx:19:31)
at async instantiateModule (/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:9)
file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/rollup/dist/es/shared/rollup.js:1784
base = Object.assign(new Error(base.message), base);
^
Error: Could not resolve './components/ScrollShadows/ScrollShadows' from node_modules/solid-scroll-shadows/dist/source/index.jsx
at error (file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/rollup/dist/es/shared/rollup.js:1784:30)
at ModuleLoader.handleResolveId (file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/rollup/dist/es/shared/rollup.js:22285:24)
at file:///Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/rollup/dist/es/shared/rollup.js:22248:26 {
code: 'UNRESOLVED_IMPORT',
watchFiles: [
'/Users/caleb/Documents/just-programming/test-scroll-shadows/.solid/server/index.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/dist/rmanifest.json',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/dist/manifest.json',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/.solid/server/app.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-start-node/server.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-start/runtime/prepareManifest.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-start/runtime/fetch.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/source/index.jsx',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-js/dist/server.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-js/web/dist/server.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/polka/build.mjs',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/sirv/build.mjs',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/compression/index.js',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/parse-multipart-data/dist/multipart.js',
'\x00commonjsHelpers.js',
'\x00/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/compression/index.js?commonjs-module',
'\x00/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/parse-multipart-data/dist/multipart.js?commonjs-exports',
'/Users/caleb/Documents/just-programming/test-scroll-shadows/node_modules/solid-scroll-shadows/dist/source/plugins/shadowMask.js'
]
}
Using create-solid
to setup a new project within a monorepo that uses yarn workspaces and hoisted dependencies (which is the default) does not appear to work.
See reproduction here:
Running yarn install
and then yarn dev
results in the following warning and the app does not serve
You appear to have multiple instances of Solid. This can lead to unexpected behavior.
computations created outside a `createRoot` or `render` will never be disposed
Usage within a monorepo without hoisted dependencies seems to work fine. However, I would like for all projects within the repo to use the same solidjs dependency.
Testing with npm v7 workspaces also seems to have the same error, though I'm less familiar with npm workspaces so it's unclear if they are expected to work similarly to yarn workspaces.
StartContext is not included in index.tsx
Is it possible to have child routes under the root path. It is possible with solid-app-router but I can't see how to do it with file path routing.
Something like this example
<Route path='/' element={<div>Onion starts here <Outlet /></div>}>
<Route path='layer1' element={<div>Another layer <Outlet /></div>}>
<Route path='layer2' element={<div>Innermost layer</div>}></Route>
</Route>
</Route>
Hi, thanks for your great work, I love solid, I want to give it a try in my new project.
After npm init solid@next
, it inited a simple template without feching any API, I can't find any documents about this, is there anything I missed?
Minor stuff, but currently the code block for "workspaces" option uses json
for language identifier, which doesn't allow comments and leads to an eyesore (i.e. unintended text & background colors):
// in workspace root
{
"workspaces": {
"packages": [
/* ... */
],
"nohoist": ["**/solid-start"]
}
}
// in project root of a workspace child
{
"workspaces": {
"nohoist": ["solid-start"]
}
}
Simply changing the language identifier from json
to jsonc
makes that go away:
// in workspace root
{
"workspaces": {
"packages": [
/* ... */
],
"nohoist": ["**/solid-start"]
}
}
// in project root of a workspace child
{
"workspaces": {
"nohoist": ["solid-start"]
}
}
Describe the bug
The dev server successfully opens a new tab with the default address/port (http://localhost:3000/ in this case), however, it almost immediately crashes with the following error:
Taros-MBP:<DIR_NAME> potatopotaro$ pnpm run dev -- --open
> <DIR_NAME>@ dev /Users/potatopotaro/Documents/projects/<DIR_NAME>
> solid-start dev "--open"
failed to load config from /Users/potatopotaro/Documents/projects/<DIR_NAME>/vite.config.js
(node:1533) UnhandledPromiseRejectionWarning: file:///Users/potatopotaro/Documents/projects/<DIR_NAME>/node_modules/.pnpm/[email protected]/node_modules/vite-plugin-solid/dist/esm/index.mjs:5
import { mergeAndConcat } from 'merge-anything';
^^^^^^^^^^^^^^
SyntaxError: The requested module 'merge-anything' does not provide an export named 'mergeAndConcat'
at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:107:20)
at async Loader.import (internal/modules/esm/loader.js:179:24)
at async importModuleDynamicallyWrapper (internal/vm/module.js:432:15)
at async loadConfigFromFile (/Users/potatopotaro/Documents/projects/<DIR_NAME>/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-6e02b235.js:46235:31)
at async resolveConfig (/Users/potatopotaro/Documents/projects/<DIR_NAME>/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-6e02b235.js:45889:28)
at async Object.createServer (/Users/potatopotaro/Documents/projects/<DIR_NAME>/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-6e02b235.js:69129:20)
at async createServer (file:///Users/potatopotaro/Documents/projects/<DIR_NAME>/node_modules/.pnpm/[email protected]_db9a126b6b31f1a7a79b257c7dace278/node_modules/solid-start/runtime/devServer.js:10:18)
To Reproduce
npm init solid@next
pnpm run dev
(occurs with the use of npm
and -- --open
arg as well)Expected behavior
The dev
script successfully/continuously runs until stopped by the developer.
Additional context
My gut says this is a problem on my end, as you would've likely caught the error already, otherwise. I'll update this issue with the solution if I find it.
example usage: src/entry-client.tsx
import { render } from "solid-js/web";
import { hashIntegration } from "solid-app-router";
import { StartClient } from "solid-start/entry-client";
render(() => <StartClient routerIntergration={hashIntegration} />, document.body);
example change: packages/start/entry-client/StartClient.tsx
import { MetaProvider } from "solid-meta";
import { Router } from "solid-app-router";
import { StartProvider } from "../entry-server/StartContext";
import Root from "~/root";
const rootData = Object.values(import.meta.globEager("/src/root.data.(js|ts)"))[0];
const dataFn = rootData ? rootData.default : undefined;
// typeof routerIntergration = RouterIntegration | undefined
// TODO: validate routerIntergration
export default ({ routerIntergration }) => {
return (
<StartProvider>
<MetaProvider>
<Router source={routerIntergration && routerIntergration()} data={dataFn}>
<Root />
</Router>
</MetaProvider>
</StartProvider>
);
};
I hardcoded hashIntegration
from the above solution, the outcome looks good to me
Could You Implement an Adapter for Fastly Compute@Edge?
They are Similar with Cloudflare Workers but they Compile your JS code to WASM to run it Faster at the Edge & Also they have Edge Dictionary which is Equivalent to Workers KV.
Obviously this package is a WIP, but as an eventual documentation (or maybe feature) request:
Having some guidance on how to load different code on the server vs on the client would be helpful. Vite has a generic mechanism for adding conditional SSR logic, but that method won't work for switching out static imports on the client vs the server (e.g. providing a client version of a service on the client and a server version of a service on the server). Angular CLI handles this by allowing the user to specify file replacements per build environment (e.g. dev
vs prod
vs test
).
Vite has instructions for creating a conditional config based on the build settings, unfortunately this doesn't appear to help (in development at least) because the config is only called once with the following environment object: { mode: 'development', command: 'serve' }
. As such, it doesn't appear possible to use this feature to provide a file replacement pattern just for the server build.
It seems possible that this is a feature request for the solid-start
plugin.
It would be nice to have a feature where only the xx.data.js + its page xx.jsx are loaded for requested page instead of having the whole js of the pages
in one file bundle.
Observation from: http://solidjs.github.io/solid-hackernews
Same for css
I am using Solid Start with the server function to fetch a data from a Swapi API & I see that the server function works in a dev mode, but after deploying the App to Cloudflare workers, it seems broken.
In the Fist Load of the App I didn't see any errors, but when routing to about page & routing back to home page, its fails returning ugly HTML. when I see it in network tab preview window, I see these thing. It's an issue in Cloudflare Workers or in Solid Start? Note, that it works when I remove the server function & Also I am getting these error after alpha 61.
https://swapi.zeamanuel.workers.dev/
https://github.com/ZeAmanuel28/Solid-Swapi
It should be:
export const StartContext = createContext<{
manifest?: Record<string, any>;
context?: Record<string, any>;
}>({});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.