We Keep Coding

React: Trying to import a javascript file from node_modules from a package I have installed but cannot be recognised

I am trying to import a file from react-validation but I am met with the following warning which isn't allowing the import:
Could not find a declaration file for module
'react-validation/build/form'
This file does exist in my node_modules folder since I installed the package via npm i react-validation and I clearly see the folder is there.
I tried import in different ways, for example: import Form from 'react-validation/build/form but still not working.

Npm link not linking because of vite

I'm trying to link two applications together. I have two projects. Both projects using Vue(2). One being the main project and the other a componet lib. I succesfully linked the two projects together with npm link. However my main project is giving an error.
ERROR Failed to resolve entry for package "#hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "#hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json.
My main application is using vite and the component application is using webpack.
in my main.js I'm importing it like any other lib
import thqComponentLibrary from "#hitfoyb/my-component-library/dist/MycomponentLibrary.umd";
import "#hitfoyb/my-component-library/dist/MycomponentLibrary.css";
Vue.use(MycomponentLibrary);
my main application vite.config.js
optimizeDeps: {
include: ['#hitfoyb/my-component-library']
},
Any help on why the application is giving the error and how do I resolve it?

How to configure webpack for path resolver to use dependency which is an internal dependency of another dependency?

I have a project (named xProject) setup as depicted in images below. As we can see a module named utils.js under commons/ is importing uuid module but it is not installed as a dependency in commons/pacakge.json. I have added commons as dependency in web/package.json: "commons": "file:../commons". When I import utils.js into a module MyModule.tsx under web/, it complains about following ERROR:
ERROR in ../commons/utils.js
Module not found: Error: Can't resolve 'uuid' in '/Users/xuser/myfolder/xproject/commons/'
I want webpack to use uuid from other dependencies whose internal dependency is 'uuid'. Is it possible? If yes, how? For example, node-sass is a package which has uuid as an internal dependency.
I did look for the solution whole last day but unfortunately I didn't get it working.
Thank you in advance for your help.

Applying loaders to files imported via resolve.modules in webpack

I have two javascript projects in separate directories within a parent directory and I want both of them to be able to import files from a common directory. The structure looks a bit like this:
- parentDir
- project1
- package.json
- webpack.config.js
- src
- index.js
- project2
- package.json
- webpack.config.js
- src
- index.js
- common
- components
- CommonComponent.vue
- application
- app.js
I'd like both project1's index.js and project2's index.js to be able to import CommonComponent.vue and app.js.
Currently this works if I do:
import CommonComponent from ../../common/components/CommonComponent.vue
However those import paths starts to get very messy and hard to maintain the deeper into each tree we go, with huge numbers of ../s, so I'm trying to find a way of making the imports neater and easier to manage and I came across resolve options in webpack. So I've tried adding this to my webpack.config.js:
resolve: {
modules: [
path.resolve("../common/"),
path.resolve("./node_modules")
]
},
so then the import would look like:
import CommonComponent from "components/CommonComponent.vue"
import app from "application/app"
Importing the plain js file works, but when trying to import the .vue file, webpack throws an error:
ERROR in C:/parentDir/common/components/CommonComponent.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'
So how can I apply webpack loaders to files imported via resolve.modules?
Note: importing .vue files from within a single project works fine, so my module.rules config is correct.

It turns out the common package needed its own node_modules. That doesn't seem to be the case when importing a file from there directly via its path, but it is when using either resolve.modules or resolve.alias in webpack.
So the answer was to npm init in common and then to npm install all the dependencies and devDependencies needed there. e.g (of course these will depend on the project):
npm install --save vue
npm install --save-dev babel-core babel-loader css-loader less-loader vue-loader vue-template-compiler webpack
Once that's done, both of these webpack configs seem to have the same result as far as I can tell:
resolve: {
modules: [
path.resolve("../../common"),
path.resolve("./node_modules")
]
},
and
resolve: {
alias: {
components: path.resolve("../../common/components")
}
}
Both allow a file in project1 or project2 to do an import like:
import CommonComponent from "components/CommonComponent.vue"

Ember-cli how to add FileSaverjs and Blobjs

I looked at this and that link. I bower installed file-saver and Blob. I am having a similar problem with both components so I will just talk about one.
When I do import FileSaver from 'file-saver';
I get the following error.
Error while processing route: some.route Could not find module `file-saver` imported from `client/pods/some/folder/controller` Error: Could not find module `file-saver` imported from `client/pods/some/folder/controller`
I know the I have file-save because it is in my bower_components folder.
And right about the line that is giving me trouble is the following line.
import Ember from 'ember';
that package is about the file-saver package in my bower_components folder. And the app seems to find that package.

Bower assets have to be imported in Brocfile.js, see http://www.ember-cli.com/#managing-dependencies
In my project, filesaver is located at bower_components/FileSaver.js/FileSaver.js, so I have the following line in my Brocfile.js:
app.import('bower_components/FileSaver.js/FileSaver.js');
This makes it available as a global on window.saveAs, no need to use an import statement in the file you use it in.