Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solid: Unable to build app using generated library #1163

Open
ricrac-hac opened this issue Dec 16, 2024 · 1 comment
Open

Solid: Unable to build app using generated library #1163

ricrac-hac opened this issue Dec 16, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@ricrac-hac
Copy link

ricrac-hac commented Dec 16, 2024

Describe the bug
Unable to build an application using a using a generated solid library, as the vite.config.ts and project.json are written as an application config; not a library.

To Reproduce

npx create-nx-workspace --preset=apps solid-test
cd solid-test
npm i @nxext/solid
nx g @nxext/solid:application apps/app-web
nx g @nxext/solid:lib libs/lib-app-web
nx g @nxext/solid:component hello --project lib-app-web

import { Hello } from "@solid-test/lib-app-web"; in apps/app-web/src/App.tsx and place it in the app layout.

Manually resolve #1061 #1161 and #1162

nx serve app-web
See the app runs,

nx build app-web

see the build fail


> nx run lib-app-web:build:production

vite v5.4.11 building for production...
✓ 0 modules transformed.
x Build failed in 8ms

 NX   Could not resolve entry module "libs/lib-app-web/index.html".

Pass --verbose to see the stacktrace.

Expected behavior
Build should work.

Additional context
Looking at what happens with the @nx/react generators for libraries, I believe there are a few things needing tweaking but most important of them is that the vite.config.ts and project.json should probably not have the build targets in it.

$ git diff
diff --git a/libs/lib-app-web/project.json b/libs/lib-app-web/project.json
index ed3173b..510b303 100644
--- a/libs/lib-app-web/project.json
+++ b/libs/lib-app-web/project.json
@@ -17,22 +17,6 @@
       "options": {
         "jestConfig": "libs/lib-app-web/jest.config.ts"
       }
-    },
-    "build": {
-      "executor": "@nx/vite:build",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
-      "options": {
-        "outputPath": "dist/libs/lib-app-web"
-      },
-      "configurations": {
-        "development": {
-          "mode": "development"
-        },
-        "production": {
-          "mode": "production"
-        }
-      }
     }
   }
 }
diff --git a/libs/lib-app-web/vite.config.ts b/libs/lib-app-web/vite.config.ts
index bae39ff..5aed6e6 100644
--- a/libs/lib-app-web/vite.config.ts
+++ b/libs/lib-app-web/vite.config.ts
@@ -7,25 +7,9 @@ import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 export default defineConfig({
   root: __dirname,
   cacheDir: '../../node_modules/.vite/libs/lib-app-web',
-  server: {
-    port: 4200,
-    host: 'localhost',
-  },
-  preview: {
-    port: 4300,
-    host: 'localhost',
-  },
   plugins: [solidPlugin(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
   // },
-  build: {
-    outDir: '../../dist/libs/lib-app-web',
-    emptyOutDir: true,
-    reportCompressedSize: true,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
-  },
 });

This is a bit closer to the generated vite.config for the react project; and this builds successfully. and nx run app-web:preview runs successfully

$ nx build app-web

> nx run app-web:build:production

vite v5.4.11 building for production...
✓ 11 modules transformed.
../../dist/apps/app-web/index.html                 0.60 kB │ gzip: 0.36 kB
../../dist/apps/app-web/assets/index-kNDHXHrP.css  0.71 kB │ gzip: 0.47 kB
../../dist/apps/app-web/assets/index-k5vfhgCj.js   9.53 kB │ gzip: 3.85 kB
✓ built in 274ms

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Successfully ran target build for project app-web (1s)

I suspect there may be other issues with the lint and test setup as well but I haven't looked much into those yet.

I'm concerned I'm now pushing into spam territory with the recent number of bugs on a similar set of entry points into the project so I will avoid opening any more issues related to "solid project generation". I'm wondering if #1061 #1161 #1162 and this one should be addressed in one PR since they're kind of all contributing blocks to the process of new project setup and build?

@ricrac-hac ricrac-hac added the bug Something isn't working label Dec 16, 2024
@ricrac-hac
Copy link
Author

I did experiment with making vite library build as per https://vite.dev/guide/build.html#library-mode and while this does technically make the error go away; it now generates index.html and css/js files in the dist folder that aren't actually usable by anything.

I suspect this is why the react library doesn't configure it this way.

I do wonder how this will work with lazy imports and code splitting though. https://docs.solidjs.com/reference/component-apis/lazy I am not sure if this is something that the app vite will manage or if the library itself needs to be configured in some way to enable it. I'll play with it later and update here if I see any success.


Also I'm happy to look at making PRs for some of these issues I've raised, but I'm new to nx plugin dev so it might take some time for me to find the right templates and config functions to update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant