Comments (4)
I didn't look closely at SolidStart yet, but I'd probably put it into its own plugin rather than add it to the Solid one.
from nx-extensions.
I had a SolidStart-based app before introducing nx.
I setup an project-based nx monorepo, generated few things I need.
Then, copied in the SolidStart based app into the nx/solid generated folder.
Notably, SolidStart has a root.tsx, whereas the nx/solid generated app had a traditional index.html
. One is a pure CSR, reminiscent of CRA, and has a plain index.html file. The other is a full-stack solution (SolidStart) which has ssr/islands capability.
Anyway, I tried my best to merge the two.
At first I got this error when running the SolidStart-based app inside nx:
mf-core
is what I have named my SolidStart app in this monorepo, as it will be the core of a micro-frontend
npx nx run mf-core:serve --configuration=development
> nx run mf-core:serve:development
✘ [ERROR] Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]
node_modules/vite/node_modules/esbuild/lib/main.js:1373:27:
1373 │ let result = await callback({
╵ ^
at file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66127:43
at requestCallbacks.on-resolve (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1373:28)
at handleRequest (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:729:19)
at handleIncomingPacket (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:755:7)
at Socket.readFromStdout (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
at Socket.emit (node:events:514:28)
at addChunk (node:internal/streams/readable:343:12)
at readableAddChunk (node:internal/streams/readable:316:9)
at Readable.push (node:internal/streams/readable:253:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
This error came from the "onResolve" callback registered here:
node_modules/vite/node_modules/esbuild/lib/main.js:1292:20:
1292 │ let promise = setup({
╵ ^
at setup (file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66104:27)
at handlePlugins (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1292:21)
at buildOrContextImpl (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:978:5)
at Object.buildOrContext (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:786:5)
at /Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:2176:15
at new Promise (<anonymous>)
at Object.build (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:2175:25)
at build (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:2024:51)
at bundleConfigFile (file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66055:26)
The plugin "externalize-deps" was triggered by this import
packages/mf-core/vite.config.ts:3:24:
3 │ import solidPlugin from 'solid-start/vite';
╵ ~~~~~~~~~~~~~~~~~~
failed to load config from /Users/my/co/project/packages/mf-core/vite.config.ts
Error: Build failed with 1 error:
node_modules/vite/node_modules/esbuild/lib/main.js:1373:27: ERROR: [plugin: externalize-deps] Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
at failureErrorWithLog (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1649:15)
at /Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1058:25
at runOnEndCallbacks (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1484:45)
at buildResponseToResult (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1056:7)
at /Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1085:16
at responseCallbacks.<computed> (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:703:9)
at handleIncomingPacket (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:762:9)
at Socket.readFromStdout (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
at Socket.emit (node:events:514:28)
at addChunk (node:internal/streams/readable:343:12) {
errors: [
{
detail: Error: Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
at file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66127:43
at requestCallbacks.on-resolve (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1373:28)
at handleRequest (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:729:19)
at handleIncomingPacket (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:755:7)
at Socket.readFromStdout (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
at Socket.emit (node:events:514:28)
at addChunk (node:internal/streams/readable:343:12)
at readableAddChunk (node:internal/streams/readable:316:9)
at Readable.push (node:internal/streams/readable:253:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23),
id: '',
location: [Object],
notes: [Array],
pluginName: 'externalize-deps',
text: 'Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.'
}
],
warnings: []
}
That was easy to fix, in my packages/mf-core/package.json
I add "type": "module",
.
Presto, that is fixed! The dev server runs:
npx nx run mf-core:serve --configuration=development
> nx run mf-core:serve:development
➜ Local: http://localhost:2226/
➜ Inspect: http://localhost:2226/__inspect/
➜ Page Routes:
┌─ http://localhost:2226/*404
├─ http://localhost:2226/add
├─ http://localhost:2226/
└─ http://localhost:2226/manage
➜ API Routes:
None! 👻
Now I go to load the app - nothing renders.
First a contextual baseline:
Before nx setup:
index.html:
<!DOCTYPE html>
<html>
<body>
<script type="module" src="/@vite/client"></script>
<script type="module" async src="/@fs//Users/my/co/project/ui/src/entry-client.tsx"></script>
</body>
</html>
First two requests were subsequently:
http://localhost:2226/@vite/client
http://localhost:2226/@fs//Users/drhode23/optum/bank_account_connector/ui/src/entry-client.tsx
entry-client.tsx
returns:
import {createComponent as _$createComponent} from "/node_modules/.vite/deps/solid-js_web.js?v=72c1939c";
import {mount, StartClient} from "/node_modules/solid-start/entry-client/index.tsx?v=1140f2d2";
mount(()=>_$createComponent(StartClient, {}), document);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJtb3VudCIsIlN0YXJ0Q2xpZW50IiwiXyRjcmVhdGVDb21wb25lbnQiLCJkb2N1bWVudCJdLCJzb3VyY2VzIjpbImVudHJ5LWNsaWVudC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbW91bnQsIFN0YXJ0Q2xpZW50IH0gZnJvbSAnc29saWQtc3RhcnQvZW50cnktY2xpZW50JztcblxubW91bnQoKCkgPT4gPFN0YXJ0Q2xpZW50IC8+LCBkb2N1bWVudCk7XG4iXSwibWFwcGluZ3MiOiI7QUFBQSxTQUFTQSxLQUFLLEVBQUVDLFdBQVcsUUFBUSwwQkFBMEI7QUFFN0RELEtBQUssQ0FBQyxNQUFBRSxpQkFBQSxDQUFPRCxXQUFXLEtBQUcsRUFBRUUsUUFBUSxDQUFDIn0=
After Nx, Problem: nothing renders:
browser console logs
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
client.ts:18 [vite] connecting...
client.ts:150 [vite] connected.
index.html:
<!DOCTYPE html>
<html>
<body>
<script type="module" src="/@vite/client"></script>
<script type="module" async src="/@fs/packages/mf-core/src/entry-client.tsx"></script>
</body>
</html>
Request to entry-client.tsx
returns html (fails). Full url is: http://localhost:2226/@fs/packages/mf-core/src/entry-client.tsx
It returns this html, which is actually the same as the html served from root /
, but with some minor whitespace changes:
<!DOCTYPE html><html ><body ><script type="module" src="/@vite/client"></script><script type="module" async src="/@fs/packages/mf-core/src/entry-client.tsx"></script></body></html>
Ok... so, what happens if I directly request the original entry-client.tsx
url under nx?
It returns the source code directly, without any transpiling:
import { mount, StartClient } from 'solid-start/entry-client';
mount(() => <StartClient />, document);
So there are multiple issues.
I think I'll need to consider:
- "forking" the
@nxext/solid
plugin - Dropping SolidStart in favor of plain Solid (also removes need to deploy a node server)
- Middle road: just hack it together?
- Use npm workspaces?
- Run SolidStart separately, via a shell script (!!)
from nx-extensions.
tried moving solid-start deps into my mf-core/package.json, that didn't fix the problem by itself.
But I now have these scripts in my root package.json:
"serve": "run-p -lnc serve:*",
"serve:mf-core": "npm run --prefix packages/mf-core dev",
"serve:nextjs-demo": "nx run nextjs-demo:serve --configuration=development",
Someone that knows nx shall come and save me/this code one day...
i.e. I'm running SolidStart by just directly running the commands solid-start
itself generates for you (i.e. solid-start dev
). Probably a key issue is the the serve
nx task/thingy isn't using this solid-start dev
command under the hood.
from nx-extensions.
Conclusion:
I think the underlying plugin needs to at least invoke solid-start dev
instead of vite dev
(or solid-start build
instead of vite build
, etc).
I ended up just running SolidStart via separate command npm command, albeit inside my packages/
directory. I will probably have to learn some nitty-gritty Nx stuff to get everything playing nicely, but for now, it works for my POC.
from nx-extensions.
Related Issues (20)
- Svelte: NX throws error when using the tsConfiguration flag with storybook
- Svelte: storybook generator fail if NOT using eslintrc JSON file HOT 1
- Ionic React: dependenies error with nx v17.0.3
- Sveltekit: Directory option doesn't work
- Stencil : npm install error - No matching version found for @storybook/manager-webpack5
- Stencil: conflicting peer dependencies on `npm i @nxext/stencil` HOT 2
- Stencil - adding Angular outputtarget throws Cannot read properties of undefined (reading 'kind') HOT 3
- Sveltekit: New app errors HOT 6
- Angular: Failed to fetch dynamically imported module .angular/cache/17.0.8/vite/deps/ion-app_8.entry.js?import HOT 7
- Solid: nx integrated monorepo vite config
- Stencil: Creating a buildable library throws an exception HOT 7
- Stencil: Adding output target type Angular leads to an exception HOT 2
- React: Capacitor live reload not working
- Stencil: missing support for Nx latest version (v18) HOT 1
- Sveltekit: Upgrade default versions and allow user overrides via CLI options
- Stencil: Always get 'Cannot find tsconfig.base.json'
- Sveltekit: NX console plugin inside vscode breaks after making an app
- Stencil: `Cannot read properties of undefined (reading 'validateConfig')` HOT 2
- Stencil: `Cannot convert undefined or null to object`
- Stencil: add support for Nx 19 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nx-extensions.