buggy npm run prod with Amplify Datastore #934
-
|
I am faced today with a worrysome bug. Our application has been under development for about 4 months , and for those 4 months, I have been developing it in my localhost, using I am now at the point where I need to create a test enviornment, which requires HTTPS for the Amplify 3rd party auth Return URL. For HTTPS, cannot serve my application on port 3000, so that leads me to where I am now, running That gives me this error:
I am not too sure how to move forward with this one. This is my /**
* @file Server-side rendering of the page
*/
import ReactDOMServer, { renderToString } from "react-dom/server";
import React from "react";
import { PageShell } from "./PageShell";
import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr/server";
import icon from "../assets/agroview.ico";
import type { PageContextServer } from "./types";
import { Provider } from "react-redux";
import { store } from "../src/store/store";
// See https://vite-plugin-ssr.com/data-fetching
const passToClient = ["pageProps", "PRELOADED_STATE", "documentProps"];
async function render(pageContext: PageContextServer) {
const { Page, pageProps } = pageContext;
let pageHtml;
// See https://vite-plugin-ssr.com/head
const { documentProps } = pageContext.exports;
const title = (documentProps && documentProps.title) || "Agroview";
const desc =
(documentProps && documentProps.description) ||
"The go-to analysis solution for perrenial crop stakeholders";
if (pageContext.Page) {
// For SSR pages
pageHtml = ReactDOMServer.renderToString(
<PageShell pageContext={pageContext}>
<Page {...pageProps} />
</PageShell>
);
} else {
// For SPA pages
pageHtml = "";
}
const documentHtml = escapeInject`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="${desc}" />
<link rel="icon" type="image/x-icon" href="${icon}" />
<link href="../renderer/output.css" rel="stylesheet">
<link href="../renderer/styles.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<script src="https://kit.fontawesome.com/fabd0bd68b.js" crossorigin="anonymous"></script>
<title>${title}</title>
</head>
<body>
<div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
</body>
<script>
<!-- Required for aws sdk -->
if (global === undefined) {
var global = window;
}
</script>
</html>`;
return {
documentHtml,
pageContext: {
// We can add some `pageContext` here, which is useful if we want to do page redirection https://vite-plugin-ssr.com/page-redirection
},
};
}
async function onBeforeRender(pageContext: PageContextServer) {
const { Page } = pageContext;
const pageHtml = renderToString(
<Provider store={store}>
<Page />
</Provider>
);
// Grab the initial state from our Redux store
const PRELOADED_STATE = store.getState();
return {
pageContext: {
PRELOADED_STATE,
pageHtml,
},
};
}
export { render };
export { passToClient };
export { onBeforeRender };and this is the main page of the app, I want it to load exclusively in the client... /**
* @file Main page of Agroview
*/
import React from "react";
import ClientOnly from "../components/core/ClientOnly";
import Loading from "../components/core/Loading";
function Page() {
return (
<div className="h-screen w-screen z-1 absolute">
<ClientOnly
load={() => import("../components/map/MapExplorer")}
fallback={Loading}
/>
</div>
);
}
export { Page };I am mostly confused since the main page shouldnt be loading on the server anyways. I would like to continue using this plugin for maximum flexibility (as promoted), but I am aware that Amplify is yet to integrate with this from a SSR point of view. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 24 replies
-
Have you tried the solution described at https://vite-plugin-ssr.com/common-issues#npm-packages-containing-invalid-code? |
Beta Was this translation helpful? Give feedback.
-
|
Here is my import react from "@vitejs/plugin-react";
import ssr from "vite-plugin-ssr/plugin";
/** @type {import('vite').UserConfig} */
export default {
plugins: [react(), ssr()],
//https://github.com/aws-amplify/amplify-js/issues/9639
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser", //fix production build
},
},
ssr: {
// Add npm packages containing invalid code here
noExternal: ["@aws-amplify"],
},
};I tried |
Beta Was this translation helpful? Give feedback.
-
|
The Once that's fixed, do you get another error? |
Beta Was this translation helpful? Give feedback.
-
|
Looks like I mixed up the lib name, Upon rerunning, I get this error: import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
^^^^^^^^^^^^^^^^
SyntaxError: Named export 'createAsyncThunk' not found. The requested module '@reduxjs/toolkit' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@reduxjs/toolkit';
const { createSlice, createAsyncThunk } = pkg;Would adding '@reduxjs/toolkit' to ssr.noExternal fix this? Or should I take the recommendation in the error message and modify all of my files? A big priority of our application is scalability. |
Beta Was this translation helpful? Give feedback.
-
|
https://vite-plugin-ssr.com/broken-npm-package#named-export-not-found |
Beta Was this translation helpful? Give feedback.
-
|
Ill have to keep messing around with it, I am getting this error when I try to separate the import statement from the library. Most likely because its not a default import? |
Beta Was this translation helpful? Give feedback.
-
👍 Let me know how that goes. |
Beta Was this translation helpful? Give feedback.
-
|
If SSR is the issue, I am debating if our application requires SSR since we also currently have a designated marketing site. Is it possible to temporarily disable SSR on the main pages without disintegrating with this package until we have the manpower to create designated SSR pages? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, see https://vite-plugin-ssr.com/render-modes. But keep in mind that removing SSR will make the app's perceived first load noticeably slower. This is usually ok for non-marketing pages but your mileage may vary. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, this is a non-marketing site. There is already an initial page load for the Leaflet map we are using, so hopefully it doesnt add too much more to that. Is there a standard way of creating a server side loading page and passing the SPA page upon load? I figured thats what the ClientOnly component could help with. |
Beta Was this translation helpful? Give feedback.
-
|
Yes you should be able to do that. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for all the help. I ended up migrating the project to pure Vite build tooling and the errors went away. This is certainly unfortunate news to you, as I recognize you work very hard on this, but VPS is simply not the right tool for our job. I want to express my deep appreciation for your extremely rapid feedback. I have never met someone so available on Github, and that definitely sets you apart from other Open Source developers. I will continue to give what I can as a sponsor as an extended thank you for your support, and will try to use this tool for future projects where SSR is more of a priority. Thank you, Charles |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the update! |
Beta Was this translation helpful? Give feedback.
-
|
As for moving to vanilla Vite: it makes sense if you don't need any of VPS's feature. FYI, with the upcoming built-in React integration (called The issues you reported in this disucssion are problems with the npm ecosystem (and to some degree Vite). There is, unfortunately, not much vite-plugin-ssr can do about it (I'd definitely fix it otherwise). Although I've an idea to somewhat alleviate the situation (in case you're curious: #621 (comment)). Thanks for sponsoring btw., I appreciate the gesture. (But feel free to cancel, especially now that you don't use VPS anymore.) |
Beta Was this translation helpful? Give feedback.
The
ERR_UNSUPPORTED_DIR_IMPORTerror should be gone if you add AWS amplify tossr.noExternal(I believe'@aws-amplify/datastore'is the one you need to add). Can you confirm?Once that's fixed, do you get another error?