While testing material-ui v1.0.0-beta, I encountered with the following error when building using webpack 3.8.0. I came across with few other questions like this, too, but am hoping if someone could confirm this is a legitimate issue and is still seen by people? I even added "react-transition-group": "^2.2.1" to package.json and so far no luck. Thanks in advance for your help.
ERROR in ../node_modules/material-ui-next/ButtonBase/Ripple.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in './node_modules/material-ui-next/ButtonBase'
I have "react-router": "^3.2.0", in my package.json in case this may help folks understand what might be the root cause.
[UPDATE] While investigating, I removed node_modules and issued npm cache clean as well as ensure the global cache is cleared by issuing npm ls -gp --depth=0 | awk -F/ '/node_modules/ && !/\/npm$/ {print $NF}' | xargs npm -g rm. This didn't fix the issue.
Follow the steps explained in this ticket for solution: material-ui-next/9356
Summary of Solution
The issue relates to how webpack searches for dependencies at build time and establishes the dependency graph of all peer dependencies for each and every module. When digging further, I noted that material-ui#0.19.4 has react-transition-group#1.2.1 as its peer dependency while material-ui-next#1.0.0 beta has react-transition-group#2.2.1 as its peer dependency. Furthermore, I suspect because I have both material-ui releases on my project, when importing a component from material-ui-next, the expected path for react-transition-group#2.2.1 from material-ui-next's perspective is project/node_modules but apparently due to having two versions of material-ui, the later installs react-transition-group#2.2.1 under material-ui-next.
In webpack path configurations, add the following:
module.exports = {
app: path.resolve(CURRENT_WORKING_DIR, "app"),
assets: path.resolve(CURRENT_WORKING_DIR, "public", "assets"),
compiled: path.resolve(CURRENT_WORKING_DIR, "compiled"),
public: "/assets/",
modules: path.resolve(CURRENT_WORKING_DIR, "node_modules"),
extraModules: path.resolve(CURRENT_WORKING_DIR,
"node_modules/material-ui-next/node_modules"),
};
And finally add the extra path to webpack's resolve attribute:
module.exports = {
modules: [PATHS.app, PATHS.modules, PATHS.extraModules],
extensions: [".js", ".jsx", ".css"],
};
to fix above issue:
please install react-transition-group
npm i react-transition-group#next --save
Related
Current Behavior
I am building my angular project on circleci and it just keeps failing with the following message:
An unhandled exception occurred: Cannot find module
'#babel/compat-data/corejs3-shipped-proposals'
Require stack:
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/plugins.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/src/utils/process-bundle.js
/home/circleci/eleven-app/frontend/node_modules/jest-worker/build/workers/processChild.js
I am using
{
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"core-js": "3.2.1",
"tslib": "^1.11.1",
"#babel/compat-data": "~7.8.0",
"#babel/runtime-corejs3": "^7.9.2",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.5.3",
}
resolutions: {
"#babel/preset-env": "^7.8.7"
}
here is npx nls why #babel/preset-env output:
eleven-app-frontend > #angular-devkit/build-angular > #babel/preset-env#7.8.7
eleven-app-frontend > #nrwl/angular > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
eleven-app-frontend > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
Thank you for reading.
Had the same issue today, so I'm assuming there's something weird with the latest version.
My package.json had the following:
"#babel/compat-data": "~7.9.0"
I removed the ~ to force 7.9.0 instead of allowing newer ones and it did the trick for me.
There's probably a newer version that works but since you opened an issue for them (https://github.com/babel/babel/issues/11427) I'll just wait for more details.
I've the same issue when using TravisCI & Vue with Jest and Babel. My test suit has been failing. Adding "#babel/compat-data": "7.9.0" to devDependencies in my package.json file solved my problems.
These 3 options we came up with so far:
Adapt dependency of babel/preset-env to v7.9.0: "#babel/preset-env": "=7.9.0"
In case you use a NodeJS Docker Image, fix the version to something below 13.13, i.e.: node:13.12.0-alpine
Adding or upgrading "#babel/compat-data": "7.9.0" to devDependencies
The solutions are temporarily and should be removed as soon as there is an actual fix of the node images or the babel/preset-env library.
Linked Github issues:
babel - https://github.com/babel/babel/issues/11427
nodejs - https://github.com/nodejs/node/issues/32852#issuecomment-613652057
I had the same issue today in Github Actions build for a Vue FE project. It builds fine locally. I'm going to try the solution above and I'll report back...
Update: After looking through the package-lock file, my solution was to explicitly add "#babel/compat-data" to the prod dependencies. Previously it was only a dependency for some dev dependencies. So my package.json now looks like:
"dependencies": {
"#babel/compat-data": "^7.8.6",
...
Same issue.
Solved it by following above advices + removing node_modules (see this github thread):
Added explicitly #babel/compat-data": "7.9.0" to devDependencies
Upgraded node (13.3 to 14.0 in my case)
Had to remove my node_modules folder and re run yarn (or npm)
If you're using yarn, try to remove the yarn.lock file in your project. And then reinstall by run yarn install; you'll get a new yarn.lock file, which is fine.
It worked for me in my Next.js project.
I have published a package to the GitHub npm registry. I can see the package when I login onto GitHub, as per the screenshots below.
ScreenShot 1
ScreenShot 2
Locally, a different package has the former as a dependency. Therefore I have on my package.json:
"dependencies": {
"<#scope>/<package_name>": "1.2.0",
...
I also have, in-line with the documentation, a .npmrc file at the same directory as the package.json with the authToken. This authToken has all the permissions necessary (delete:packages, read:packages, repo, write:packages)
//npm.pkg.github.com/:_authToken=<my_auth_token>
registry=https://npm.pkg.github.com/OWNER
Lastly, I have on package.json the following two entries. Although I believe these are necessary to publish packages to the github registry, no to install them which is the current problem.
"publishConfig": {
"registry": "https://npm.pkg.github.com/"
},
"repository": {
"type": "git",
"url": "https://github.com/<OWNER>/<REPO>.git"
}
So, the error that I am having when I try to install the package is:
npm ERR! code E404
npm ERR! 404 Not Found: <#scope>/<package_name>#1.2.0
When I tried to understand what was going on with some helpful logs:
With npm install #<scope>/<package_name>#1.2.0 --loglevels verbose, I see:
....
npm http fetch GET 200 https://npm.pkg.github.com/OWNER/#<scope>%2f<package_name>
npm http fetch GET 404 https://npm.pkg.github.com/download/#<scope>/<package_name>/1.2.0/98e69e2adddec5c715a32c94352efac83ce586e4e6f3d06fef1fc1f82d238r34
...
The first http request is a success, which seems to indicate things are correctly wired up and authenticated. However, I have no idea why I am getting a 404 afterwards. The package is clearly there as we see on the image above.
Does anyone had a similar problem ?
Well, my own .npmrc (in my home directory) is configured as this:
//registry.npmjs.org/:_authToken=<token>
//npm.pkg.github.com/:_authToken=<token>
#myorg1:registry=https://npm.pkg.github.com
#myorg2:registry=https://registry.npmjs.org
I've not added my org in the github registry URL as you did, and specified the registry to use for each scope.
I just ran into the same issue. Removing package-lock.json fixed it for me. I suspect the problem was that I previously installed the offending package from a tarball and that the old installation information was somehow cached inside the package-lock.json
I had misread the checkboxes in my PAT. Make sure you've enabled read:packages.
My successful .npmrc file looks like this:
//npm.pkg.github.com/:_authToken=TOKEN_GOES_HERE
I signed up for the Github private npm registry beta and followed their instruction: https://github.com/features/package-registry
Works great with npm but I'd prefer using yarn. And while npm has no issues finding the registered package, yarn can't find it at all.
yarn add #omniphx/adminite-adminite-ui-components outputs:
yarn add v1.19.0
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍 Resolving packages...
error Couldn't find package "#omniphx/adminite-ui-components" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
After reading up on private repos with yarn, I thought the trick was due to yarn having a slightly different rc format. Unfortunately, that didn't work either and yarn is still unable to find the private registry.
.npmrc
registry=https://registry.npmjs.org
#omniphx:registry=https://npm.pkg.github.com/omniphx
.yarnrc
registry "https://registry.npmjs.org"
"#omniphx:registry" "https://npm.pkg.github.com/omniphx"
Also confirmed that my github token is set too with yarn config list:
yarn config v1.19.0
info yarn config
{
'version-tag-prefix': 'v',
'version-git-tag': true,
'version-commit-hooks': true,
'version-git-sign': false,
'version-git-message': 'v%s',
'init-version': '1.0.0',
'init-license': 'MIT',
'save-prefix': '^',
'bin-links': true,
'ignore-scripts': false,
'ignore-optional': false,
registry: 'https://registry.npmjs.org',
'strict-ssl': true,
'user-agent': 'yarn/1.19.0 npm/? node/v12.11.1 darwin x64',
email: 'mattjmitchener#gmail.com',
lastUpdateCheck: 1570679687836,
username: 'omniphx',
'#omniphx:registry': 'https://npm.pkg.github.com/omniphx'
}
info npm config
{
'//npm.pkg.github.com/:_authToken': 'fake12345',
registry: 'https://registry.npmjs.org',
'#omniphx:registry': 'https://npm.pkg.github.com/omniphx',
python: '/usr/bin/python'
}
Any idea?
Resolved
Changed "#myorg:registry" "https://npm.pkg.github.com/myorg"
To "#myorg:registry" "https://npm.pkg.github.com"
I've just run into a similar situation. It seemed that yarn was only looking in the main Yarn package registry for my organization's private package. I had copied the examples from GitHub's Packages documentation for constructing your .npmrc file directly to the .yarnrc file in the project that will be consuming the app, not knowing that the formats were different (I've never had to deal with .yarnrc files before).
However, after updating the .yarnrc file with the correct format that you've mentioned above (which I also found in googling around), yarn successfully found the private package and installed it correctly.
As a heads up, my yarn version: 1.17.3
Steps I Took
Start new terminal session
cd to the project
nvm use (if you have a specific node version to use)
Add the correctly-formatted .yarnrc file to the project. See below for what it looks like.
Manually add the package and version range to the package.json for my private package
Run npm login --registry=https://npm.pkg.github.com --scope=#MyOrg
See the note below on scope / org gotcha's
Run yarn
That worked for me.
.yarnrc
"#myorg:registry" "https://npm.pkg.github.com"
Note: See below for a note on the org / scope name gotcha's
Other Notes
I know that it appears that you don't have any issues with this, given your GH username / scope above, but for anyone else that comes here, the documentation on GH is a little sparse with regards to mapping your username / org name to a scope in the package name. Just remember these little gotcha's here:
The name of your package must always be scoped to your org (or username)
E.g., name: #johndturn/my-package
If your organization has capital letters in it, like MyOrg, just replace them in the name of the package in your package.json and your .yarnrc with lowercase
E.g., name: #myorg/my-package
Note: When authenticating with npm login, I still have kept the uppercase letters in the --scope= argument.
The name of your package doesn't have to be the same name of the repo.
E.g., for a repo called MyOrg/random-prefix.js-lib, you can have name: #myorg/js-lib in your package.json file for the project itself. Then, installing it in other projects will look something like #myorg/js-lib: 1.0.0.
The problem I had is slightly different.
After tried what John suggested I still can't add private registry packages with yarn (but perfectly fine with npm)
Then I realise two things:
For GitHub packages, npm is fine with either
registry=https://npm.pkg.github.com/my-org
or
#my-org:registry=https://npm.pkg.github.com
but yarn only allow the latter syntax.
Docs from Github website only show the first syntax which could cause problems for yarn users.
Another thing is that if you npm login to the private registry but use a .yarnrc file in your project, yarn can't really mix your npm credentials with it. Although it seems behave differently on different environment.
But it would seems to be a best practice to stick with either yarn login + .yarnrc, or npm login + .npmrc (you can still use yarn to manage your packages in both cases)
In Yarn v2+ the setup has changed quite a bit. ".yarnrc" is ignored and only ".yarnrc.yml" is used.
To setup a private registry with a scope and token from env, add something along these lines to the ".yarnrc.yml" file (fontawesome example):
npmScopes:
fortawesome:
npmRegistryServer: "https://npm.fontawesome.com"
npmAuthToken: ${FONTAWESOME_TOKEN}
Documentation: https://yarnpkg.com/configuration/yarnrc#npmScopes
I'm not an expert with npm/yarn so I might be misunderstanding what is happening here, but I don't think package proxying from the npm registry works with yarn yet. Could that be related? When package proxying was released for npm I remember reading comments on Twitter from people that tried it with yarn and it didn't work.
Found the Twitter thread here:
https://twitter.com/github/status/1171832034580451328
It doesn't work with Yarn. As soon as I change the registry url -> Couldn't find package.
I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.
I installed blueimp-file-upload and jquery.ui.widget from NPM
npm install --save blueimp-file-upload
npm install --save jquery.ui.widget
and I require blueimp-file-upload in my entry file
require('blueimp-file-upload')
but when I run webpack, I get thie error:
ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
# ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19
If you're working with images:
Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:
Install missing dependencies:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
Configure Webpack:
config.resolve = {
extensions: ['', '.js'],
alias: {
'load-image': 'blueimp-load-image/js/load-image.js',
'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
};
Include scripts in your app:
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";
Disable both AMD and CommonJS and use the Browser Global jQuery.
/* The jQuery UI widget factory, can be omitted if jQuery UI is already included */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
/* The Iframe Transport is required for browsers without support for XHR file uploads */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
/* The basic File Upload plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
/* The File Upload processing plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
/* The File Upload validation plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
/* The File Upload Angular JS module */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-angular.js');
This is the configuration I'm using to integrate webpack, blueimp-fileupload with angular. Alternatively you can configure in your webpack.config.js as a regex to avoid repeating loaders.
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
I had almost identical problem, except that Error announced not 'jquery.ui.widget' but 'jquery/ui/widget'.
For me #Gowrav answer was wrong way.
After days of straying I've solved it in the simple way. Just did:
npm install jquery-ui
The fact is that jquery.fileupload.js searching for its vendor:
But in context where jquery.fileupload.js is trying to import dependency, of course, it can't be found (resolved). So I add it to project instead.
P.S. It's just my opinion about how does all work. But this way has helped me.
jquery.fileupload.js checks for AMD require first which results in this error. You can teach webpack not to use AMD style for this file. (Make sure to npm install imports-loader for this method to work.):
require('imports?define=>false!blueimp-file-upload')
It should correctly register the module as CommonJS and will require the jquery.ui.widget from the right location.
Read more here: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles
You can add an alias to jquery.ui.widget's main file - it unfortunately doesn't specify one in its package.json, so webpack can't find it otherwise.
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
first install two plugins
npm i blueimp-file-upload --save
npm i jquery-ui --save
then require in web pack
require('blueimp-file-upload/js/jquery.fileupload')
actually you can solve this by changing your webpack config, just add the path to resolve (for example I am using bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
In webpack 3.x, the syntax will look like this:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}
I'm creating a Symfony2 bundle hosted on GitHub. I suppose that everything is configured well! However, when I try to install it something goes wrong.
Here follows a summary of the key info.
First, in my Symfony2 app I update the composer.json as follows:
"require": {
...,
"bundle-name": "dev-master"
},
When I try to install the bundle through the command php composer.phar update, I get the following error:
Loading composer repositories with package information
Installing dependencies
Your requirements could not be resolved to an installable set of packages.
Problem 1
- The requested package bundle-name could
not be found in any version, there may be a typo in the package name.
Potential causes:
- A typo in the package name
- The package is not available in a stable-enough version according
to your minimum-stability setting
see <https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion>
for more details.
Any idea?
You have to add repository for "bundle-name".
I couldn't find it on packagist, so register it first.