Skip to content

react

Nice at a first glance. You can edit the files while the server constantly updates your changes in the web-browser. Sadly that's firefox but read below how to change that.

troubleshooting

npm start opens firefox

And of course i want chrome, after some searching i ended up in this file :

opBrowser
1
./node_modules/react-dev-utils/opBrowser.js

containing this function :

opBrowser
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
function getBrowserEnv() {
    // Attempt to honor this environment variable.
    // It is specific to the operating system.
    // See https://github.com/sindresorhus/opn#app for documentation.
    const value = process.env.BROWSER;
    let action;
    if (!value) {
        // Default.
        action = Actions.BROWSER;
    } else if (value.toLowerCase().endsWith('.js')) {
        action = Actions.SCRIPT;
    } else if (value.toLowerCase() === 'none') {
        action = Actions.NONE;
    } else {
        action = Actions.BROWSER;
    }
    return { action, value };
}

Seems setting the environment variable BROWSER would work, and it does :

environment var
1
2
export BROWSER="google-chrome"
npm start

msw4 error

After compiling something like this pops up :

msw4
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
Compiling...
/data/projects/tasks/todo/node_modules/react-scripts/scripts/start.js:19
throw err;
^

[Error: ENOENT: no such file or directory, stat '/ms4w'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/ms4w'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todo@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the todo@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kees/.npm/_logs/2021-09-19T09_50_57_625Z-debug.log
✘-1 /data/projects/tasks/todo [master|●4✚ 9…9]

A horrible error, since it says NOTHING! However the last time i had this i followed these steps :

fresh start
1
2
3
4
npm cache clean --force
rm -rf node_modules
# some say also rm package-lock.json (i didn't)
npm install

Now it still gives the same error but now with this much clearer error added :

more information
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
Failed to compile.

./src/SideBar.jsx
Module not found: Can't resolve '@mui/lab' in '/data/projects/tasks/todo/src'
/data/projects/tasks/todo/node_modules/react-scripts/scripts/start.js:19
throw err;
^

[Error: ENOENT: no such file or directory, stat '/ms4w'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/ms4w'
}

So even if you do not get this extra error, note that the mayor problem is a missing dependency. The problem here turned out that the main page of mui says :

mui
1
2
3
4
5
// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

While the page for TreeView says : https://mui.com/api/tree-view/

tree view
1
2
3
import TreeView from '@mui/lab/TreeView';
// or
import { TreeView } from '@mui/lab';

So just install lab as well :

lab
1
npm install @mui/material @emotion/react @emotion/styled @mui/lab