Skip to content

[spike] Fix ./server and ./api imports in two tutorial lessons - #1672

Closed
brenelz wants to merge 21 commits into
v2-rebuildfrom
spike/tutorial-js-imports
Closed

[spike] Fix ./server and ./api imports in two tutorial lessons#1672
brenelz wants to merge 21 commits into
v2-rebuildfrom
spike/tutorial-js-imports

Conversation

@brenelz

@brenelz brenelz commented Oct 28, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

The "Wait for the echo" and "Optimistic stores" lessons on #1670 render nothing. The output pane throws Failed to resolve module specifier "./server" (and "./api" for the second lesson).

The solid-repl compiler (still in 1.0.1) keys each file as ./<name> after removing only a .tsx or .jsx extension. Both lessons mark their helper file "type": "js", so it is keyed ./server.js or ./api.js. The extensionless import in main then misses the map, and the browser tries to load it as a relative URL from the srcdoc iframe.

This removes the type field from those helper files in both the starter and solved code. They now get the loader's default .jsx extension, like every other lesson file. They contain plain JavaScript, so nothing else changes. Changing solid-repl to also remove .js and .ts would fix this for future lessons too.

An earlier commit here also fixed a duplicate solid-js in the REPL import map. #1670 has since fixed that by moving to solid-repl 1.0.1, so the merge takes that branch's repl.tsx and the diff is only the two lesson files.

Verified on the merged branch with vite dev and Playwright:

  • The starter and ?solved code of all 35 lessons (70 pages) render their output with no page errors.
  • The only warnings are the two that lessons ask for: STRICT_READ_UNTRACKED in props and ASYNC_OUTSIDE_LOADING_BOUNDARY in loading.
  • In the until starter code, a sent message is faded for about 0.2 s, gone for about 1 s, then comes back confirmed.
  • In ?solved, the message stays faded until the feed confirms it, with no gap.

🤖 Generated with Claude Code

claude and others added 17 commits October 27, 2026 15:48
@claude
spike: move the docs site to Solid 2 (SolidBase #174, vite-plugin sta…
aa1ca78 
…rt mode)

Replace SolidStart + Nitro with @solidjs/vite-plugin start mode and
SolidBase's own prerender; port the osmium theme to Solid 2 APIs
(Errored, Loading, onSettled, omit/merge, class arrays, For keyed={false},
clientOnly from @solidjs/web), swap solid-heroicons and solid-list for
~icons/heroicons and a local list helper.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: clean up Solid 2 dev warnings, vendor spike tarballs
cd0b668 
- Track route changes in the sidebar tab with a derived signal (drops useBeforeLeave).
- Stop destructuring useLocale() (its getters are memos).
- untrack initial/fixed reads in TabGroup and search rows; untrack preload in the effect.
- Vendor the SolidBase #174 and filesystem-routing #36 builds under spike/.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: prettier
b7812ae
@autofix-ci
ci: apply automated fixes
e93231d
@claude
spike: interactive tutorial at /tutorial
e1b38d4 
Dev's 42-lesson Solid 2 curriculum (devagrawal09/solid-site codex/solid-v2)
rendered with the playground's solid-repl (solid-playground#201, vendored
build under spike/).

- Lesson text loads as lazy() components and the files as plain data, so
  the prerendered page hydrates without refetching.
- solidjs.com lesson ids redirect through a generated _redirects file.
- The REPL workers skip re-minification: minifying the prebuilt TypeScript
  worker again breaks its initialization order.
- Header gets a Tutorial link; the layout goes full-bleed under /tutorial.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@autofix-ci
ci: apply automated fixes
0600dcf
@claude
spike: hover preload, and keep Tailwind above the REPL's CSS reset
d40cadb 
- Router 2 preloads links only when asked; restore SolidStart's hover/focus
  preload with intentPreload(). Page chunks match the Solid 1 build.
- The REPL's Panda layers were declared after Tailwind's, so its reset beat
  Tailwind utilities (the Solve button and docs pages lost their padding
  once the tutorial loaded). Declare the layer order up front.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: use published @kobalte/solidbase 2.0.0
7ce8a52 
SolidBase 2.0.0 (kobaltedev/solidbase#174) replaces the vendored build. It
pins @solidjs/router 2.0.0-next.37, so an override keeps the site on one
router copy (next.42).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: prettier the lockfile
30e0101 
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: use published filesystem-routing 0.4.2
98115f8 
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: narrower lesson pane, stack the editor over the preview
dc79d82 
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
spike: restore the lesson pane width now the editor stacks
4c8814f 
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
tutorial: rewrite the course as 34 lessons in docs order
159bf24 
Introduction (JSX and components before signals), Components, Stores,
Async, Mutations, then Effects and the DOM. Each starter shows a visible
problem the lesson's API fixes. New lessons: projections, streams,
optimistic stores, until. Former lesson ids alias to their new lesson.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
tutorial: open every lesson file as a tab, log counts the playground …
0739219 
…console shows

The REPL only opens the entry file, so lesson files like card.jsx stayed
hidden, also after Solve. Remount the REPL per lesson and on Solve/Reset
with a layout that opens all files.

The playground console (chobitsu) does not forward console.count, so the
memos and projections lessons log with console.log instead; projections
now reports how many rows re-checked per click.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
tutorial: add a dependent data lesson (cascading selects)
33e1320 
States load, cities load for the selected state, and the selected city
derives from the city list. Shows async writable derived state, a held
update that never tears the selection line, and isPending on the
dependent control. Course is now 35 lessons.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
tutorial: load Solid's dev builds in the playground
d20dc49 
esm.sh serves production builds unless a URL asks for dev, so lessons
that point at a dev warning (props, loading, optimistic stores) showed
nothing. The REPL wrapper now seeds a pinned import map with the dev
builds of solid-js, solid-js/internal and @solidjs/web.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@brenelz
tutorial: drop js type so lesson helper imports resolve
ab8b7f2
@bolt-new-by-stackblitz

bolt-new-by-stackblitz Bot commented Oct 28, 2026

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@brenelz
brenelz marked this pull request as ready for review October 28, 2026 01:35
@brenelz brenelz changed the title [spike] Fix ./server and ./api imports in two tutorial lessons [spike] Fix tutorial helper imports and duplicate Solid in the REPL Oct 28, 2026
claude and others added 3 commits October 28, 2026 04:29
@claude
tutorial: keep solid-js external in the solid-js/internal import
12455e7 
solid-js/internal imports "solid-js" itself. Without marking it external,
esm.sh bundled its own copy, so the page ran two Solid runtimes and the
dev build warned about multiple instances. The playground's default
import map has the same gap.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@claude
tutorial: use solid-repl 1.0.1 from npm on Solid rc.19
db4467b 
Drops the vendored solid-repl tarball and the import-map workaround now that
the playground externalizes solid-js and serves dev builds itself. Pins one
Solid runtime for the site and its Solid 2 libraries.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
@brenelz
Merge branch 'claude/project-thread-fpqdr5' into spike/tutorial-js-im…
d6e9433 
…ports

# Conflicts:
#	src/tutorials/repl.tsx
@brenelz brenelz changed the title [spike] Fix tutorial helper imports and duplicate Solid in the REPL [spike] Fix ./server and ./api imports in two tutorial lessons Oct 28, 2026
ryansolid pushed a commit that referenced this pull request Oct 29, 2026
@claude @brenelz
tutorial: load ./api and ./server as jsx tabs
b464a90 
solid-repl resolves extensionless imports to jsx tabs only, so the .js
helper files in two lessons failed to import. From #1672.

Co-authored-by: Brenley Dueck <[email protected]>
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0117BoWPLXmEUSKddsQSHkzN
ryansolid added a commit that referenced this pull request Oct 29, 2026
@ryansolid @brenelz @claude
Run the 2.0 docs site on Solid 2 and add interactive tutorials (#1670)
e7f3d56 
Ports v2-rebuild to Solid 2 rc.20, router next.42, Kobalte alpha.4 and SolidBase 2, and adds a /tutorial route with 35 interactive lessons running on solid-repl 1.0.1.

Includes #1671 (REPL dark theme) and #1672 (lesson helper imports).

Co-authored-by: Brenley Dueck <[email protected]>
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Base automatically changed from claude/project-thread-fpqdr5 to v2-rebuild October 29, 2026 20:11
@ryansolid Claude

ryansolid commented Oct 29, 2026

Copy link
Copy Markdown
Member

Thanks! This is in v2-rebuild now: b464a90 (with you as co-author), shipped in the #1670 squash merge, e7f3d56. The lesson generator was fixed too, so .js helper files no longer get a type and this won't come back. Closing since the change is included.

Generated by Claude Code

@ryansolid ryansolid closed this Oct 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brenelz @ryansolid @claude