Electron-Builder does not copy node_modules into my application - npm

I have an electron app with the following structure
- dist
| - index.html
| - node_modules
| - nm (is an exact copy of node_modules)
- package.json
| ...
if I refer to the node modules in my index.html as node_modules/module the app won't find the module if built with the build command from electron-builder. But if I change that line in my index.html to nm/module it is perfectly willing to load it.
It seems to me that electron-builder isn't copying node_modules into the application, but I can't see why it would do that. Is it excluding all folders named node_modules and how can I fix this?

Related

Deploying Nuxt Universal project - is the whole .nuxt folder necessary?

I have run the npm run build and it has created the dist folder in the .nuxt directory. Do I need just the dist folder in production, or should I include the whole .nuxt directory?
Yes, I think you need the whole .nuxt folder. Your web root should look something like this:
.nuxt
static
nuxt.config.js
package.json
server.js
Just checked on my server. This might be true only for Amazon Beanstalk...
After running npm run build on my development computer, I needed the following on the server:
.nuxt/dist/
static/
server/ or server.js - depends on setup
package.json
package-lock.json
nuxt.config.conf

Exporting Sass in NPM module

I am trying to build an NPM module that will allow an SCSS file to be exported and used across a number of applications.
The SCSS file imports another SCSS in another seperate node module.
My package structure is:
package-name
|--src
| |- overwrite.scss
|
|--package.json
|
|--webpack.config.js
|
|--node_modules
The issue I am facing is that currently I have the paths hardcoded for the import value. For example
$background-color: red;
#import '../node_module/fake_name/dist/core.scss'
I have a dependency in package.json file to ensure that fake_name module will always be in the node_modules folder of any project that will use my npm package.
What I am trying to achieve is set it that the path of #import will always look in the node_modules folder in the root of whatever project it is installed in. I have tired using ~ but I keep getting 'Error: File to import not found or unreadable'
Any help is appreciated.

How to prevent inheriting packages from parent node_modules

First I will give some context to the problem.
I am developing an npm library. Inside the project folder, I have another folder called "example", for testing the library. The structure looks like below.
|- node_modules/
|- src/
|- example/
| |- node_modules/
| |- src/
| |- package.json
|- package.json
The root package.json has the dependency babel-jest. The example/package.json has the dependency react-scripts. When running react-scripts start inside example directory, it gives the following error,
As far as I can understand, this is because, the package.json inside the example/ directory inherits (not sure if this is the right term) the dependencies of the root package.json.
That is, I can use a dependency installed in the root package.json, inside the src/ of the example/
This is convenient in some cases. But this is a blocker for my use case.
How can I prevent this behaviour? (without changing the directory structure)
Thank you.
From what I understand, Dan Abramov suggests to use SKIP_PREFLIGHT_CHECK=true to work around this problem as there is no real fix.

webpack a module that contains node_modules

Question
I want to make changes to an open source JavaScript library. Using webpack and npm and keeping everything local, what options do I have to make changes to a local module and import it into project in place of an public npm module downloaded from the registry? The local module and consuming app will also be source controlled under two separate git repositories.
Problem
I am testing this within an Aurelia app, but I think it is a webpack and npm problem. I have an app called my-app which has a dependency on aurelia-binding. I wish to make local changes to aurelia-binding and push them to a fork in GitHub. My project structure looks like this:
└───my-app
├───.git
├───dist
├───node_modules
│ └───aurelia-binding
| ├───.git
│ ├───dist
│ └───src
└───src
When built and run, everything works as expected. To make a change to aurelia-binding and test them in my-app, I need to install its dependencies and build it. This results in a structure like this:
└───my-app
├───dist
├───node_modules
│ └───aurelia-binding
| ├───.git
│ ├───dist
| ├───node_modules
| | └───dependencies...
│ └───src
└───src
When the node_modules are installed on the dependency, webpack throws an error at runtime. The error may look like an issue with the aurlia module, but I do not believe this is the case.
Unhandled rejection Error: Error invoking SVGAnalyzer. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: __WEBPACK_IMPORTED_MODULE_1_aurelia_pal__.a.createElement is not a function
I have also tried this using npm link with the library cloned next to my-app instead of within in but got the same result.
I used the following addition to the webpack.config.js to be able to use npm/yarn linked packages. It forces webpack to resolve the modules only using the main node_modules and not the "nearest" ones.
resolve: {
extensions: [".ts", ".js"],
symlinks: false,
modules: ["ClientApp", path.resolve('node_modules')],
}
Where "ClientApp" is the folder where my aurelia app is located. The symlinks parameter is used to prevent webpack from resolving the symlinked path to an absolute path.
A word of warning, with this setup you circumvent version checking by npm so you are responsible for linking a compatible version.

Yarn removes folder within installed dependency

I am using Yarn v0.19.1 to install some dependencies. I deleted my node_modules folder completely and did a fresh yarn install.
I am trying to install the dependency leaflet using yarn add leaflet. The module installs successfully, except during the Cleaning Modules... phase, Yarn removes the images folder which would typically live within leaflet/dist/images. When I do a npm install leaflet this folder does not get removed.
During a yarn install, the images folder is present until the Cleaning modules phase happens.
Who/what is doing this? Is this something yarn does? Or is this something specified within the leaflet library? How could I resolve this?
I checked the package.json in the leaflet library and nothing seemed out of the ordinary there. It runs a jake file, but even within that file nothing is being deleted related to images.
Here is what the folder looks like, within my node_modules folder, for both package manager installs:
yarn
npm
There was a .yarnclean file in my project. This added some files/folders to ignore when installing dependencies. Running yarn clean added this file and I wasn't aware until I saw this issue. Viewing the docs also gave the same info.
I resolved this by removing images from the set of ignored directories.
Here is my .yarnclean file for an example:
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
assets
# examples
example
examples
# code coverage directories
coverage
.nyc_output
# build scripts
Makefile
Gulpfile.js
Gruntfile.js
# configs
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
# misc
*.gz
*.md