NodeJs in importing files in Create React App - node.js

I know that NodeJS is important when using npm to download modules but does react depends from it? For example i have a react app created from create-react-app and i have this part:
import ReactDOM from 'react-dom';
import './index.css';
Is nodeJs used to configure the paths in the files or is it just the babel compiler that does that?
If yes, is babel configured to look in the node_modules files like NodeJs does?

Babel is unaware of modules. It is the responsibility of a bundler (Webpack in create-react-app) to handle module imports.
Webpack resolver works similarly to Node resolver regarding node_modules, this can be configured.

Related

Custom NPM package - Exposing Internal Interfaces to custom npm package

I have some npm packages that are used internally in company projects, and I would like to expose some of the interfaces used by dependencies from this component.
So if I have a project for a npm package (called company-utils) that has a dependency with axios, and I want to expose a method that creates an instance for axios, how can I export it so other projects that installs this company-utils can see the axios interfaces/methods/etc ?
It seems to me that you are using this company-utils as a wrapper for axios? If you want to export something you can put an index.js at the root of the package and export it there. Then it will be exposed to anyone who installs the package.
so the structure will be:
package
src/
index.js
package.json
Then inside index.js
import method from 'src/<path to method file>'
export method
If you install the package into another project that method will be exposed
import method from 'package'

Webpack can not resolve baseUrl in node modules package

So I have a node package I am developing with typescript and react where I set the baseUrl in tsconfig.json to the src folder so I can use absolute paths like src/module. The application using this node package (also react) uses webpack and also has its own tsconfig so when I import this module and run rpm run webpack, I get this error
Module not found: Error: Can't resolve src/module in /node_modules/path_to_module
I have tried to use path aliases and combine with tsconfig-paths-webpack-plugin but this packages seems to only work if the path configuration (tsconfig) and webpack config is within the project.
I understand the issue here is since the tsconfig in the node package is not same as tsconfig webpack would use when running, it won't point to the baseUrl in the package
So, is it possible for me to set baseUrl in tsconfig of a node package and run rpm run webpack in another project using the node package that webpack knows to use the baseUrl in packages in node_modules

React-Redux is saved at C:\Users\\AppData\Local\Microsoft\TypeScript

I downloaded the redux library by running npm install redux on my project folder. The strange thing is that redux was saved in C:\Users\AppData\Local\Microsoft\TypeScript which is a different directory than my project's.
Why is this happening and how does webpack knows this location when i import redux it in my app?
Thank you

how do I access my module in express?

I install bootstrap with
npm install bootstrap --save
in my express project, then bootstrap is installed in node_modules, but how can I access the js and css in my jade file?
Node_modules is meant to use for server modules. NPM is server package management system.
You should use client package management system like bower for your client side modules i.e. Bootstrap.
Once you set up bower, you'll be able to reference bower_components in your html files.
It depends on how you configure your static server, e.g.:
app.use(express.static('public'));
So if node_modules is placed into public folder, your jade file will be:
script(src='/node_modules/bootstrap/js/file.js')
But better approach is use bower_component instead of node_modules on the client-side

emberjs, node and dependencies

I declare dependencies in my app.js (ember) file, such as:
var _ = require('underscore');
Since my app.js file will be sent to the client and need to execute in a browser, how would this code be made available to the client?
Currently I'm using lineman to concatenate and uglify all my js files, and inside my vendors folder I did include underscore.min.js (all of this get bundled up into app.js) - yet my app isn't working.
Could someone kindly explain the process of adding npm packages to an ember app and the resulting requirements on the client side?
You can use Ember Browserify to use node packages in your ember app.
See this answer for specific usage.
To install Ember Browserify:
npm install --save-dev ember-browserify
and utilize something from a package isntalled through NPM:
import Xyz from 'npm:xyzPackage';

Resources