Material UI example not working

Environment

1. react-static -V: 6.0.6
2. node -v: v11.1.0
3. npm -v: 6.4.1
4. Operating system: MacOS 10.11.6 (15G22010)
5. Browser and version (if relevant): Version 71.0.3578.98 (Official Build) (64-bit)

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

1. Freshly installed react-static material-ui template
2. Updated MUI packages to @material-ui … everywhere + all other packages
3. yarn start
4. Errors, tried to delete node_modules and yarn.lock and run yarn again
5. Same errors
6. Material-ui/colors is not an npm (in case you should suggest i didn’t install the right packages)

Expected Behavior

Reproducible Demo

Package.json

{ “name”: “react-static-example-material-ui”, “version”: “6.0.0-beta.28”, “main”: “index.js”, “license”: “MIT”, “scripts”: { “start”: “react-static start”, “build”: “react-static build”, “serve”: “serve dist -p 3000” }, “dependencies”: { “@material-ui/core”: “^3.7.0”, “@material-ui/icons”: “^3.0.1”, “axios”: “^0.18.0”, “react”: “^16.6.3”, “react-dom”: “^16.6.3”, “react-hot-loader”: “^4.6.2”, “react-jss”: “^8.6.1”, “react-static”: “^6.0.6” }, “devDependencies”: { “eslint-config-react-tools”: “1.x.x”, “serve”: “^10.1.1” }, “gitHead”: “350700130b7501622eac16aa139107c684b62b01” }

ERRORS:

yarn run v1.10.1 $ react-static start Error: Cannot find module ‘@material-ui/colors’

• loader.js:587 Function.Module._resolveFilename internal/modules/cjs/loader.js:587:15

• loader.js:513 Function.Module._load internal/modules/cjs/loader.js:513:25

• loader.js:643 Module.require internal/modules/cjs/loader.js:643:17

• helpers.js:22 require internal/modules/cjs/helpers.js:22:18

• theme.js:1 Object.<anonymous> /Users/christianbroberg/Apps/codebuild/my-static-site/src/theme.js:1:1

• loader.js:707 Module._compile internal/modules/cjs/loader.js:707:30

• index.js:83 Module._compile [my-static-site]/[pirates]/lib/index.js:83:24

• loader.js:718 Module._extensions…js internal/modules/cjs/loader.js:718:10

• index.js:88 Object.newLoader [as .js] [my-static-site]/[pirates]/lib/index.js:88:7

• loader.js:605 Module.load internal/modules/cjs/loader.js:605:32

• loader.js:544 tryModuleLoad internal/modules/cjs/loader.js:544:12

• loader.js:536 Function.Module._load internal/modules/cjs/loader.js:536:3

• loader.js:643 Module.require internal/modules/cjs/loader.js:643:17

• helpers.js:22 require internal/modules/cjs/helpers.js:22:18

• static.config.js:8 Object.<anonymous> /Users/christianbroberg/Apps/codebuild/my-static-site/static.config.js:8:1

• loader.js:707 Module._compile internal/modules/cjs/loader.js:707:30

• index.js:83 Module._compile [my-static-site]/[pirates]/lib/index.js:83:24

• loader.js:718 Module._extensions…js internal/modules/cjs/loader.js:718:10

• index.js:88 Object.newLoader [as .js] [my-static-site]/[pirates]/lib/index.js:88:7

• loader.js:605 Module.load internal/modules/cjs/loader.js:605:32

• loader.js:544 tryModuleLoad internal/modules/cjs/loader.js:544:12

• loader.js:536 Function.Module._load internal/modules/cjs/loader.js:536:3

• loader.js:643 Module.require internal/modules/cjs/loader.js:643:17

• helpers.js:22 require internal/modules/cjs/helpers.js:22:18

• getConfig.js:235 require [my-static-site]/[react-static]/src/static/getConfig.js:235:20

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• getConfig.js:46 asyncGeneratorStep [my-static-site]/[react-static]/lib/static/getConfig.js:46:103

• getConfig.js:48 _next [my-static-site]/[react-static]/lib/static/getConfig.js:48:194

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:364

• new Promise

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:97

• getConfig.js:231 buildConfigFromPath [my-static-site]/[react-static]/src/static/getConfig.js:231:26

• getConfig.js:248 buildConfigFromPath [my-static-site]/[react-static]/src/static/getConfig.js:248:24

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• getConfig.js:46 asyncGeneratorStep [my-static-site]/[react-static]/lib/static/getConfig.js:46:103

• getConfig.js:48 _next [my-static-site]/[react-static]/lib/static/getConfig.js:48:194

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:364

• new Promise

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:97

• getConfig.js:417 getConfig [my-static-site]/[react-static]/lib/static/getConfig.js:417:23

• start.js:28 Object._callee3$ [my-static-site]/[react-static]/src/commands/start.js:28:9

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• start.js:24 asyncGeneratorStep [my-static-site]/[react-static]/lib/commands/start.js:24:103

• start.js:26 _next [my-static-site]/[react-static]/lib/commands/start.js:26:194

• start.js:26 [my-static-site]/[react-static]/lib/commands/start.js:26:364

Error: Cannot find module ‘@material-ui/colors’

• loader.js:587 Function.Module._resolveFilename internal/modules/cjs/loader.js:587:15

• loader.js:513 Function.Module._load internal/modules/cjs/loader.js:513:25

• loader.js:643 Module.require internal/modules/cjs/loader.js:643:17

• helpers.js:22 require internal/modules/cjs/helpers.js:22:18

• theme.js:1 Object.<anonymous> /Users/christianbroberg/Apps/codebuild/my-static-site/src/theme.js:1:1

• loader.js:707 Module._compile internal/modules/cjs/loader.js:707:30

• index.js:83 Module._compile [my-static-site]/[pirates]/lib/index.js:83:24

• loader.js:718 Module._extensions…js internal/modules/cjs/loader.js:718:10

• index.js:88 Object.newLoader [as .js] [my-static-site]/[pirates]/lib/index.js:88:7

• loader.js:605 Module.load internal/modules/cjs/loader.js:605:32

• loader.js:544 tryModuleLoad internal/modules/cjs/loader.js:544:12

• loader.js:536 Function.Module._load internal/modules/cjs/loader.js:536:3

• loader.js:643 Module.require internal/modules/cjs/loader.js:643:17

• helpers.js:22 require internal/modules/cjs/helpers.js:22:18

• static.config.js:8 Object.<anonymous> /Users/christianbroberg/Apps/codebuild/my-static-site/static.config.js:8:1

• loader.js:707 Module._compile internal/modules/cjs/loader.js:707:30

• index.js:83 Module._compile [my-static-site]/[pirates]/lib/index.js:83:24

• loader.js:718 Module._extensions…js internal/modules/cjs/loader.js:718:10

• index.js:88 Object.newLoader [as .js] [my-static-site]/[pirates]/lib/index.js:88:7

• loader.js:605 Module.load internal/modules/cjs/loader.js:605:32

• loader.js:544 tryModuleLoad internal/modules/cjs/loader.js:544:12

• loader.js:536 Function.Module._load internal/modules/cjs/loader.js:536:3

• loader.js:643 Module.require internal/modules/cjs/loader.js:643:17

• helpers.js:22 require internal/modules/cjs/helpers.js:22:18

• getConfig.js:235 require [my-static-site]/[react-static]/src/static/getConfig.js:235:20

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• getConfig.js:46 asyncGeneratorStep [my-static-site]/[react-static]/lib/static/getConfig.js:46:103

• getConfig.js:48 _next [my-static-site]/[react-static]/lib/static/getConfig.js:48:194

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:364

• new Promise

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:97

• getConfig.js:231 buildConfigFromPath [my-static-site]/[react-static]/src/static/getConfig.js:231:26

• getConfig.js:254 FSWatcher.buildConfigFromPath [my-static-site]/[react-static]/src/static/getConfig.js:254:28

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• getConfig.js:46 asyncGeneratorStep [my-static-site]/[react-static]/lib/static/getConfig.js:46:103

• getConfig.js:48 _next [my-static-site]/[react-static]/lib/static/getConfig.js:48:194

• getConfig.js:48 [my-static-site]/[react-static]/lib/static/getConfig.js:48:364

• new Promise

• getConfig.js:48 FSWatcher.<anonymous> [my-static-site]/[react-static]/lib/static/getConfig.js:48:97

• events.js:182 FSWatcher.emit events.js:182:13

• index.js:200 FSWatcher.<anonymous> [my-static-site]/[chokidar]/index.js:200:38

• index.js:241 FSWatcher._emit [my-static-site]/[chokidar]/index.js:241:5

• fsevents-handler.js:329 FSWatcher.<anonymous> [my-static-site]/[chokidar]/lib/fsevents-handler.js:329:12

• fsevents-handler.js:378 FSWatcher.<anonymous> [my-static-site]/[chokidar]/lib/fsevents-handler.js:378:7

• fs.js:162 FSReqCallback.oncomplete fs.js:162:5

TypeError: Cannot read property ‘DIST’ of undefined

• start.js:37 DIST [my-static-site]/[react-static]/src/commands/start.js:37:36

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• start.js:24 asyncGeneratorStep [my-static-site]/[react-static]/lib/commands/start.js:24:103

• start.js:26 _next [my-static-site]/[react-static]/lib/commands/start.js:26:194

• start.js:26 [my-static-site]/[react-static]/lib/commands/start.js:26:364

• new Promise

• start.js:26 [my-static-site]/[react-static]/lib/commands/start.js:26:97

• start.js:28 [my-static-site]/[react-static]/src/commands/start.js:28:9

• getConfig.js:253 FSWatcher._callee4$ [my-static-site]/[react-static]/src/static/getConfig.js:253:44

• runtime.js:62 tryCatch [my-static-site]/[regenerator-runtime]/runtime.js:62:40

• runtime.js:288 Generator.invoke [as _invoke] [my-static-site]/[regenerator-runtime]/runtime.js:288:22

• runtime.js:114 Generator.prototype.(anonymous function) [as next] [my-static-site]/[regenerator-runtime]/runtime.js:114:21

• getConfig.js:46 asyncGeneratorStep [my-static-site]/[react-static]/lib/static/getConfig.js:46:103

• getConfig.js:48 _next [my-static-site]/[react-static]/lib/static/getConfig.js:48:194

• next_tick.js:77 process.internalTickCallback internal/process/next_tick.js:77:7

[tannerlinsley]

FYI, this guide is a work in progress, but should help a bit!

• Guides - Material UI

[tannerlinsley]

I just released a very major patch for some issues with routeInfo.json files and also the dev server. Both should be more consistent in behavior now and I hope will fix the problems you’re experiencing.

Can you upgrade and confirm?