Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
npx create-razzle-app creates a broken app
See original GitHub issue🐛 Bug report
Current Behavior
Just running $ npx create-razzle-app react-mathemakid, then $ cd react-mathemakid then $ yarn start.
The installation is fine, but when running yarn start and loading the page in the browser it throws me this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
[0m [90m 24 |[39m [36mconst[39m context [33m=[39m {}[33m;[39m[0m
[0m [90m 25 |[39m [36mconst[39m markup [33m=[39m renderToString([0m
[0m[31m[1m>[22m[39m[90m 26 |[39m [33m<[39m[33mStaticRouter[39m context[33m=[39m{context} location[33m=[39m{req[33m.[39murl}[33m>[39m[0m
[0m [90m 27 |[39m [33m<[39m[33mApp[39m [33m/[39m[33m>[39m[0m
[0m [90m 28 |[39m [33m<[39m[33m/[39m[33mStaticRouter[39m[33m>[39m[0m
[0m [90m 29 |[39m )[33m;[39m[0m
at ReactDOMServerRenderer.render (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/react-dom/cjs/react-dom-server.node.development.js:4053:17)
at ReactDOMServerRenderer.read (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at renderToString (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
at renderApp (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/src/server.js:26:1)
at /run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/build/webpack:/src/server.js:53:1
at Layer.handle [as handle_request] (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/layer.js:95:5)
at next (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/layer.js:95:5)
at /run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/index.js:281:22
If I replace
import { StaticRouter } from 'react-router-dom';
with
import { StaticRouter } from 'react-router-dom/server';
it throws another error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
[0m [90m 23 |[39m [36mexport[39m [36mconst[39m renderApp [33m=[39m (req[33m,[39m res) [33m=>[39m {[0m
[0m [90m 24 |[39m [36mconst[39m context [33m=[39m {}[33m;[39m[0m
[0m[31m[1m>[22m[39m[90m 25 |[39m [36mconst[39m markup [33m=[39m renderToString([0m
[0m [90m 26 |[39m [33m<[39m[33mStaticRouter[39m context[33m=[39m{context} location[33m=[39m{req[33m.[39murl}[33m>[39m[0m
[0m [90m 27 |[39m [33m<[39m[33mApp[39m [33m/[39m[33m>[39m[0m
[0m [90m 28 |[39m [33m<[39m[33m/[39m[33mStaticRouter[39m[33m>[39m[0m
at ReactDOMServerRenderer.render (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/react-dom/cjs/react-dom-server.node.development.js:4053:17)
at ReactDOMServerRenderer.read (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at renderToString (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
at renderApp (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/src/server.js:25:1)
at /run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/build/webpack:/src/server.js:52:1
at Layer.handle [as handle_request] (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/layer.js:95:5)
at next (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/layer.js:95:5)
at /run/media/silviub/T7-Touch/Lucru/weekends/react-mathemakid/node_modules/express/lib/router/index.js:281:22
Expected behavior
The app should load well in the browser, and there shouldn’t be any error.
Reproducible example
https://github.com/silviubogan/razzle-test-06.11.2021
Suggested solution(s)
Additional context
Your environment
| Software | Version(s) |
|---|---|
| Razzle | 4.2.6 |
| Razzle Plugins | html-webpack-plugin: 4.5.2, mini-css-extract-plugin: 0.9.0 |
| Node | 12.22.5 |
| Browser | Chromium 94.0.4606.81 |
| npm/Yarn | npm: 6.14.14, yarn: 1.22.5 |
| Operating System | Manjaro Linux |
| TypeScript | N/A |
| React | 17.0.2 |
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Create-razzle-app fails to install dependencies #743 - GitHub
Running create-razzle-app demo gave the same error message. Installing npm modules: react react-dom react-router-dom razzle express > Error!
Read more >create-razzle-app - npm
CLI tool to bootstrap Razzle applications with no configuration. Latest version: 4.2.18, last published: 2 months ago.
Read more >Newest 'razzle' Questions - Stack Overflow
My Razzle Terser build is broken ''Unexpected token: punc (.)' I have a Razzle app and build is broken. It doesn't make sense...
Read more >NPX Create React APP Not Working - YouTube
To create a new React App, we use npx command with create -react- app and then project name. It should create a new...
Read more >Getting Started - Razzle
Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications.
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 figured it out. Most of the issues come from
react-router-dom. But the actual issues are the wrong implementation of this package within thecreate-razzle-apptemplate.server.js
import { StaticRouter } from 'react-router-dom/server'it should be this instead of ~import StaticRouter from 'react-router-dom'~App.js
import { Route, Routes } from 'react-router-dom'this instead of ~import { Route, Switch } from 'react-router-dom'~<Route exact path="/" element={<Home/>} />and this instead of ~<Route exact path="/" component={Home} />~razzle version: 4.2.6 react-router-dom version: 6.0.2
$ npx create-razzle-app react-mathemakid --example basicworks