-
Notifications
You must be signed in to change notification settings - Fork 26.7k
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
Runtime URL import fails for ES modules with .js file extension #36895
Comments
I'll check with the team, in the meantime, I think you might want to check out import dynamic from "next/dynamic"
const FramerComponent = dynamic(
() => import("https://framer.com/m/Tip-6qB7.js"),
{ loading: () => <></> }
)
export default function FramerElement() {
return <FramerComponent />
} |
In your example with In my case I am providing the URL as variable and I expect to be imported during runtime. |
So I had a deeper look at this and it doesn't seem to be a Next.js bug:
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
When I try to import a Framer component during runtime, I am getting this error:
TypeError: Failed to resolve module specifier "react/jsx-runtime". Relative references must start with either "/", "./", or "../".
I followed the guide from Framer Handshake and I can confirm that the Framer component is properly imported during build time.
I guess the problem is how the imported file is interpreted, in this case it's not interpreted as ES module.
According to handleExternals function in the "webpack.config.ts" it expects to have
.mjs
file extension:https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L978
Expected Behavior
I expect the imported module to be interpreted as ES module based on the
Content-Type
header if contains a JavaScript MIME type such astext/javascript
. Not based on the.mjs
file extension.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#aside_%E2%80%94_.mjs_versus_.js
To Reproduce
https://github.com/smitev/framer-handshake-runtime
The text was updated successfully, but these errors were encountered: