Question regarding NPM, ReactJS, and installed packages both globally, and locally

Question

Question regarding NPM, ReactJS, and installed packages both globally, and locally. I have done quite of bit of searching and found no real resolution. Here's my main App component:

import React, { Component } from 'react'
// import ReactLogger from 'react-terminal-logger/console-logger'
import 'whatwg-fetch'
import Intro from '../Intro/Intro'
import './app.css'

// ReactLogger.config({
//     visible: ['log', 'error', 'info', 'warn', 'logr'],
//     save_logs: false,
//     only_msg: true,
//     port: 1234,
//     stacktrace_hide: true,
// })

// ReactLogger.start()

class App extends Component {
    state = {
        series: [],
        logs: [],
    }

    componentDidMount() {
        // Hook(window.console, (log) => {
        //     this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
        // })

        fetch('http://api.tvmaze.com/search/shows?q=Vikings').then((response) => {
            console.log(response)
            // logr(response)
        })
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">TV Series List</h1>
                </header>
                <Intro message="Here you can find all you most loved series!" />
                The length of the series array is - {this.state.series.length}{' '}
            </div>
        )
    }
}

export default App

Any time I install a package globally, so I can reuse it in other projects I end up with an error when I try to start the server. Such as the logging package (above) react-terminal-logger. I used the following steps:

1. npm install -g react-terminal-logger
2. added import and initialized components as per instructions
3. tried to use component (eg. logr(response))

I end up with the same error at compile time no matter what I installed globally and add to my project.

C:\Users\DawsonSchaffer\Documents\ProjectsDirectory\Projects\reactjsx-tutorial-old\node_modules\react-scripts\scripts\start.js:19
  throw err;

[Error: ENOENT: no such file or directory, stat 'C:\Users\DawsonSchaffer\Application Data'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'stat',
  path: 'C:\\Users\\DawsonSchaffer\\Application Data'
}

My global package prefix points to "C:\Users\DawsonSchaffer\AppData\Roaming\npm" which is the default. If I simply remove the components use by it commenting out everything works.

How do I resolve this? What is the proper way to install a new global package and add it to an existing project? What am I missing? Any help would be greatly appreciated.

One other note, if I install the component locally in my project it works fine. Overall point though is too not have to install it in every project.

Thanks Dawson

Answer 1

The first thing to understand here is that the global install option of common JS package managers is not intended to facilitate shared project dependencies. To clarify, from NPM itself:

Installing a package globally allows you to use the code in the package as a set of tools on your local computer.

With that out of the way, the optimization you're looking for is a real one, but for different reasons than you may think. When thinking about dependency management, you're really thinking about a small subset of pros and cons related to deciding whether you want use a mono-repo, multi-repo (microservices) or some hybrid.

If you're dealing with entirely different projects that are using the same dependency, then ignore the previous paragraph as they should definitely each manage their own dependencies independently.

Answer 2

Maybe this answer could help you: How do I install a module globally using npm?

Usually, global installation are meant to be for CLI tools or executable tools.

Answer 3

So I finally got it all straightened out. I uninstalled react, react-dom, and react-scripts from global; leaving me with only create-react-app. I created an empty project called react-boilerplate, and installed react, react-dom, react-scripts, and react-router-dom in the new project. I then uploaded to my GitHub account so I have a common starting point for new projects. Should have thought about this before but it took me a while to wrap my head around everything. Now I can update my boilerplate as needed, and use it to clone as a starting point for new projects. Yeah!

Thanks to everyone especially Dennis G for all his help!!

Dawson