react-static: 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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 20 (10 by maintainers)

Most upvoted comments

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

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?

You’re right. We’re still working out some kinks around all of the integrations and v6. If you have a link to your repo we could take a look at and try to reproduce these issues, it will help us fix the issues much faster. Thanks for your support!