Question
I am following the "Build an App with App Toolbox" tutorial. I had an issue with step 3 "add some elements" where the view would not display once I try to add the paper-checkbox element.
After some trial and error, I discovered that there is an extra node_modules folder within the paper-checkbox folder. This caused the view to break and therefore not display (more on this below). Why does this happen and how can this be fixed?
Tutorial Link
https://www.polymer-project.org/3.0/start/toolbox/add-elements
Full Problem Details
I started the project using the command line interface, ran polymer init and chose polymer-3-starter-kit per the tutorial instructions. I ran the following command to install paper-checkbox:
npm install #polymer/paper-checkbox
Note that I get the following warning after I install the element:
npm WARN #babel/plugin-transform-classes#7.0.0-beta.35 requires a peer of #babel/core#7.0.0-beta.35 but none is installed. You must install peer dependencies yourself.
+ #polymer/paper-checkbox#3.0.0-pre.20
added 12 packages from 1 contributor and audited 13720 packages in 27.422s
found 46 vulnerabilities (25 low, 14 moderate, 5 high, 2 critical)
run npm audit fix to fix them, or npm audit for details
I checked my node_modules folder and I can see that paper-checkbox was installed.
So far when I load my-new-view it displays correctly, like this:
However, when I add the import statement inside my-new-view.js for the paper-checkbox element,
import '#polymer/paper-checkbox/paper-checkbox.js'; the view fails to display:
After some code comparison with another project, I see that the paper-checkbox folder does not match up (see screenshot below). It contains a duplicate node_modules folder, which contains a duplicate #polymer folder. This polymer folder contains font-robota and other modules that are already contained in the top polymer directory; even more duplicated content.
Furthermore, on inspecting the webpage, the console (on chrome) gives the following error:
Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Polymer (http://127.0.0.1:8081/node_modules/#polymer/polymer/lib/legacy/polymer-fn.js:43:18)
at http://127.0.0.1:8081/node_modules/#polymer/paper-checkbox/node_modules/#polymer/iron-meta/iron-meta.js:141:1
This error occurs due to the fact that there is duplicate content. To solve this, I simply deleted the node_modules folder within the checkbox element.
I also tried installing paper-input as well. paper-input requires iron-input. After running npm install #polymer/paper-input the same node_modules folder is installed within both the iron and paper input elements. I deleted these two folders and then the element finally works.
Why does npm do this? And how can I fix it?
Github Project Repo
https://github.com/starkindustries/my-first-polymer-app
Version Info
Git Version 2.17.1 (Apple Git-112)
NPM version 6.4.1
Node version v10.10.0
Polymer CLI version 1.8.0
Chrome Version 69.0.3497.100 (Official Build) (64-bit)
Did you run npm install #polymer/paper-checkbox from the project root? If you run npm install command from the root of papaer-checkbox folder, it would read it's dependency folder from it's package.json file and install them.
Related
In my app.json folder, I have everything bundled nicely, but I have one undefined package at the bottom of the install list:
"undefined": "react-navigation/bottom-tabs"
I tried running an "npm install react-navigation/bottom-tabs" but it threw this error:
warn Package undefined has been ignored because it contains invalid configuration. Reason: Cannot find module 'undefined/package.json'
Has anyone encountered an issue like this before? I am running React-Native Version 5 on top of Expo.
EDIT: It turns out that it was supposed to be #react-navigation/bottom-tabs, so I installed that and made an adjustment; but now I am still stuck with the original undefined package in my app.json folder, and cannot get rid of it.
So, I forgot this post existed and I actually figured this out months ago. When you're dealing with:
A bad bundle,
the wrong version,
or there's just something wrong with your 'package.json' file, (the file that contains the list of your packages)
These steps should fix it:
Perform "npm uninstall 'package-name' " or "yarn remove 'package-name'"
Note: You do this instead of 'expo-uninstall' because 'expo-uninstall' does not exist. We use 'expo-install' instead of 'npm' or 'yarn' install to make sure you download the proper npm or yarn version associated with your version of expo.
Open the package.json file and see if the bad package you uninstalled is still present.
If the bad package is still there, select and delete it from the file, then save.
Run an "expo" "npm" or "yarn" install on the correct package name
This should fix it. This is best fixed when step 4 is executed with an 'expo install' as you likely have an incompatible version of the package, so this will prevent that from happening again.
In my case, I couldn't figure out why my terminal was telling me a specific package didn't exist, so I did a "sud" command to force download the package. This package didn't exist, because I had actually spelled it wrong.
try deleting your node modules and install them again and make sure your metro is closed
clear cache and you are good to go by the way it worked for me
npm install or yarn add
npm start --reset-cache
When I use polymer init to create a polymer 2 element, I see that an /app directory is created. Is this expected? I'm being told by my team members that there should be no /app directory installed when creating a polymer 2 element.
I used npm install -g polymer-cli#next for the install. Also tried uninstalling and reinstalling again.
Any ideas are appreciated.
According to the docs this is not an expected behaviour.
This is not also a behaviour of the old version of the polymer-cli.
Can you please show your prompt result after running the command?
I found out that the issue was related to having a .bowerrc file in a parent directory. In there, the 'app' directory was specified. I simply had to remove the 'app' reference and when I ran bower install again bower_components were installed without the app directory.
Since upgrading to RC5, when debugging in Chrome dev tools, breakpoints are hit, but the debugger identifies the line as several to many lines later (in this case 15 lines!). In the screenshot the "current" line is actually the line where debugger; is present. This is making debugging very difficult. This is in combination with webpack. It works, but you have to interpret things manually rather than seeing exactly which line is executing. It appears to only do this on my ts files, not on the angular code if I debug into it.
I'd love ideas on the source of this problem and how to fix it.
Chrome 52
webpack 1.13.1 with config.devtool = "source-map"
If you set config.devtool to eval all is correct. But any other value seems to have the offset issue.
Angular 2 RC5
I was facing the same problem. The solution that was given to me was to uninstall the npm version of the angular-cli and reinstall the Github one by running the following:
npm uninstall --save-dev angular-cli
and then
npm i --save-dev github:angular/angular-cli#a8d7c0a9a0c1657db2a673c42bfbaa51fde2a466
Editor's note: The question's original title was "Use npm install to install node modules stored on a local directory", which made the desire to transparently redefine the installation source less obvious. Therefore, some existing answers suggest solutions based on modifying the installation process.
I know this is a simple thing, but I'm quite new to anything in this area so after searching around and constantly finding answers that weren't really what I want I figured I'd just ask directly.
I currently have a process that is run in directory FOO that calls npm install. Directory FOO contains a package.json and a npm-shrinkwrap.json file to specify the modules (bluebird, extend, and mysql in this case but it doesn't really matter) and versions. This all works perfectly fine.
But now instead of reaching out to the internet to get the modules I want to have them stored in local directory BAR and have the process in foo use npm to install them from there. I can not store them permanently in FOO but I can in BAR for reasons outside my control. I know this is relatively simple but I can't seem to get the right set of commands down. Thanks for the help.
Note: This answer originally suggested only redefining the cache location. While that works in principle, npm still tries to contact the network for each package, causing excessive delays.
I assume your intent is to transparently change the installation source: in other words: you don't want to change your package, you simply want to call npm install as before, but have the packages be installed from your custom filesystem location, offline (without the need for an Internet connection).
There are two pieces to the puzzle:
Redefine npm's cache filesystem location (where previously downloaded packages are cached) to point to your custom location:
Note that cached packages are stored in a specific way: the package.json file is stored in subfolder package, and the zipped package as a whole as package.tgz. It's easiest to copy packages from your existing cache to your custom location, or to simply install additionally needed ones while you have an Internet connection, which caches them automatically.
For transparent use (npm install can be called as usual):
By setting the configuration item globally:
npm config set cache '/path/to/BAR'
Note that this will take effect for all npm operations, persistently.
Via an environment variable (which can be scoped to a script or even a single command):
export npm_config_cache='/path/to/BAR'
npm_config_cache='path/to/BAR' npm install
Ad-hoc use, via a command-line option:
npm install --cache /path/to/BAR
Force npm to use cached packages:
Currently, that requires a workaround via the cache-min configuration item.
A more direct feature, such as via an --offline switch has been a feature request for years - see https://github.com/npm/npm/issues/2568
The trick is to set cache-min to a very high value, so that all packages in the cache are considered fresh and served from there:
For transparent use (npm install can be called as usual):
By setting the configuration item globally:
npm config set cache-min 9999999999
Note that this will take effect for all npm operations, persistently.
Via an environment variable (which can be scoped to a script or even a single command):
export npm_config_cache_min=9999999999
npm_config_cache_min=9999999999 npm install
Ad-hoc use, via a command-line option:
npm install --cache-min 9999999999
Assuming you've set cache-min globally or through an environment variable,
running npm install should now serve the packages straight from your custom cache location.
Caveats:
This assumes that all packages your npm install needs are available in your custom location; trying to install a package that isn't in the cache will obviously fail without an Internet connection.
Conversely, if you do have Internet access but want to prevent npm from using it to fetch packages - which it still will attempt if a package is not found in the cache - you must change the registry configuration item to something invalid so as to force the online installation attempt to fail; e.g.:
export npm_config_registry=http://example.org
Note that the URL must exist to avoid delays while npm tries to connect to it; while you could set the value to something syntactically invalid (e.g., none), npm will then issue a warning on every use.
Sample bash script:
#!/usr/bin/env bash
# Set environment variables that set npm configuration items to:
# - redefine the location of the cache folder
# - make npm look in the cache only (assuming the packages are there)
# Note that by doing this inside a script the changes will only take effect
# in the script and NOT persist.
export npm_config_cache='/path/to/BAR' npm_config_cache_min=9999999999
# Now cd to your package and invoke `npm install` as usual.
cd '/path/to/project'
npm install
You might want to try npm link. You could:
download the dependency
run npm link from the dependency's directory
run npm link mycrazydependency from you project
Detail here: https://docs.npmjs.com/cli/link
If a shrink wrap file is present then package.json is ignored. What you need to do is change the URL they are being retrieved from using a find and replace operation like sed .... However I'm not sure changing the URL to a file:/// syntax is valid but give it a go.
I have a Gulpfile.js in Visual Studio 2015 RC with a single default task. For some reason it is not showing up in the Task Runner Explorer.
I had added gulp to the devDependencies in my package.json file and saved it.
I was also facing the same issue. Just restarted Visual Studio after adding the tasks to gulpfile.js and my problem was solved. All tasks were listed.
In the release candidate, editing the devDependencies in package.json and then saving does not result in the packages being automatically restored/added to the project as I had expected. After saving package.json the packages were listed under NPM in the Dependencies node in Solution explorer, but with a caption "not installed" next to the package names. Manually invoking Restore Packages, as shown in the screenshot, causes Visual Studio to install the pacakges.
After the node modules had been installed the gulp tasks were detected by the Task Runner Explorer.
I hope this helps someone else.
For me, Visual Studio crashed while installing the npm modules and it caused corruption in the npm cache.
I had to clean the cache, delete node_modules, and install again.
Close Visual Studio
Open node command prompt
cd [PROJECT_DIR]
npm cache clean
rimraf node_modules
This will delete the node_modules folder when windows fails because of deep nested paths
To install rimraf:
npm install rimraf -g
npm install
Now, open Visual Studio and it should work.
Answer taken from another question about gulp, but this worked for me
I had the same problem migrating from VS2013 recently. As Josh noted in his comment here Visual Studio 2015 ships with an older version of node. In case you don't want to get stuck with whatever version of node is built into Visual Studio, you can tell it to use the version you have already installed. Go to Tools > Options > Projects and Solutions > External Web Tools and reorder locations so that $(PATH) is above $(DevEnvDir)\Extensions\Microsoft\Web Tools\External. This also applies to other tools like Grunt, Bower and Gulp.
This is old question but same issue could be faced by VS 2017 users.
I was facing same issue in VS 2017 and mistakenly, I had added gulpfile.js in the sub folder.
Make sure gulpfile.js is in the root folder.
gulpfile should be in root folder
I had the same problem and no-one of suggested method works for me.
After re-installing NPM Task Runner the problem gone away.
You can download latest NPM Task Runner from marketplace in following link.
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner