Failing to import named exports server side
See original GitHub issue🐛 Bug Report
When importing a named export from another file, I receive the following error
{
"status": "error",
"message": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.",
"stack": [
"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.",
"at invariant (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:58:15)",
"at ReactDOMServerRenderer.render (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:3395:7)",
"at ReactDOMServerRenderer.read (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:3131:29)",
"at renderToString (webpack:///../node_modules/react-dom/cjs/react-dom-server.node.development.js?:3598:27)",
"at eval (webpack:///./src/server/render.jsx?:40:90)","at Layer.handle [as handle_request] (webpack:///../node_modules/express/lib/router/layer.js?:95:5)",
"at trim_prefix (webpack:///../node_modules/express/lib/router/index.js?:317:13)","at eval (webpack:///../node_modules/express/lib/router/index.js?:284:7)",
"at Function.process_params (webpack:///../node_modules/express/lib/router/index.js?:335:12)","at next (webpack:///../node_modules/express/lib/router/index.js?:275:10)"
]
}
To Reproduce
Express SSR setup
App.js
import React from 'react'
import loadable from '@loadable/component'
import './main.css'
const A = loadable(async () => {
const { A: AComponent } = await import('./letters/A')
return () => <AComponent />
})
const App = () => (
<div>
<A />
</div>
)
export default App
./letters/A.js
export const A = () => 'A'
Expected behavior
Named export should resolve server side and render correctly
Link to repl or repo (highly encouraged)
Issue Analytics
- State:
- Created 5 years ago
- Comments:25 (6 by maintainers)
Top Results From Across the Web
Failing to import named exports server side #245 - GitHub
Bug Report When importing a named export from another file, I receive the following error { "status": "error", "message": "Element type is ...
Read more >does not contain a default export even after being correctly ...
The problem is that you are trying to import a default module (which was exported using export default ), but you didn't export...
Read more >How to write CommonJS exports that can be name-imported ...
This blog post explores how to write CommonJS modules so that their exports can be name-imported from ESM modules on Node.js.
Read more >Modules • JavaScript for impatient programmers (ES2022 ...
Namespace imports are an alternative to named imports. If we namespace-import a module, it becomes an object whose properties are the named exports....
Read more >Understanding Modules and Import and Export Statements in ...
A default export will not be imported with curly brackets, but will be directly imported into a named identifier. Now the default value...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I would love to see this feature implemented! I want to group several components from one entry point without creating a massive amount of extra chunks.
For example, a profile page which is only loaded after login and that ‘chunk’ contains the profile subpages. The way it’s setup now I get multiple chunks for each subroute under the profile namespace.
And still in high demand.