We have problem to run snowpack with our package structure.
Our structure:
adapters
app
core
presentation
Each package contains typescript and all are used in the app package.
"dependencies": {
"#project/adapters": "file:../../adapters",
"#project/core": "file:../../core",
"#project/presentation": "file:../../presentation",
}
I get the error Dependency Install Error: Package "#project/adapters/src/repositories/GradeFeedRepositoryImpl" not found. Have you installed it?
How do I need to configure snowpack, web pack, babel, ... to run this?
I have had success with packing modules (using: npm pack /path/to/module from the root of the module's folder) and adding the tarball to my package.json from a folder within the repo. e.g.,
"dependencies": {
...
"adapters": "file:packs/adapters-1.0.0.tgz"
...
}
Another option, see if making this edit to your snowpack.config.js file helps:
packageOptions: {
external: [
"#projects/adapters"
]
}
Related
In a project which I work with there is private project library which is available for me directly - https://gitlab.some-project/some-utils
In package.json it is requested like
"dependencies": {
"#some-project/some-utils": "0.1.42",
...
}
This project wasn't uploaded to npm. I created .npmrc file and put there:
#8some-project:registry=https://gitlab.some-project.com/some-utils
But when I try to "run yarn #some-project/some-utils" I get:
error Received malformed response from registry for "#some-project/some-utils". The registry may be down.
What I am doing wrongly? How to install this library to another project?
I just raised npm version and it works now
I have a npm package which reference an other local package. It has a structure like so.
deploy
typescriptapp.tgz
references
mydependency
package.json
app.js
app.css
typescriptapp
package.json
webapp
My typescriptapp package.json has the following dependencies
"dependencies": {
"mydependency": "file:../references/mydependency"
},
My webapp package.json has the following dependencies
"dependencies": {
"typescriptapp": "file:../deploy/typescriptapp-1.0.0.tgz"
},
When I use npm pack it work fine, but it is not included in the tarball. I also move the tarball to a deploy folder
When I try npm install, it doesn't work because the reference folder does not exist in the deploy folder.
I also tried to change the dependencies for bundledDependencies
"bundledDependencies": [
"file:../references/mydependency"
]
But it does not seem to work either.
How do I pack my typescript app to be able to install it in my webapp with a single file?
I have a lerna repo for a project under development. It has several packages that depend on each other. To make development easier, none of the packages are published and they depend on the latest version of each other.
Directory tree
foo/
packages/
core/
package.json
errors/
package.json
foo/packages/core/package.json
{
...
dependencies: {
"#foo/errors": "*"
}
}
I have another project, bar, that I'm using to test the lerna project. Currently I'm linking to its dependencies using a local file: dependency:
bar/package.json
{
...
dependencies: {
"#foo/core": "../foo/packages/core"
}
}
This approach has given me a world of trouble.
Using npm, I'm constantly hit with ENOENT .DELETE errors. Removing my package-lock.json and reinstalling has taken years off my life.
Using yarn, I've been unable to yarn install in bar. Yarn follows the file: dependency to #foo/core, sees that it depends on #foo/errors and doesn't know about lerna's symlink. This causes it to fail, telling me it can't find #foo/errors.
This has made writing actual code for this project secondary to this mess of dependency management.
How can I make this (I feel fairly simple?) project structure work? Open to lerna/yarn/npm/pnpm/shell scripts/MS DOS at this point.
You should be able to accomplish this with npm link. Although I have not tried this using a local dependency that is not published on npm.
Directory tree
foo/
packages/
core/
package.json
errors/
package.json
bar/
package.json
foo/packages/core/package.json
{
...
dependencies: {
"#foo/errors": "*"
}
}
bar/package.json
{
...
dependencies: {
"#foo/core": "../foo/packages/core"
}
}
Run the following commands
cd foo
npx lerna clean
npx lerna bootstrap --hoist
npm run build # command to build your projects
cd packages/core
npm link
cd ../../../bar
npm i
npm link #foo/core
Removing package-lock.json files usually does more harm then good! And about not being able to find #foo/errors, if you ran npm bootstrap, #foo/core should be symlinked to #foo/errors. One possibility could be that your lerna scripts are using npm while you where running install/link with yarn.
Can you move your lerna up to a directory which hold both 'foo' and 'bar'?
Is that possible?
root/
foo/
packages/
core/
package.json
errors/
package.json
bar/
package.json
lerna.json
And in your lerna file, you can add your repos to packages
{
"lerna": "2.9.0",
"packages": [
"foo/packages/*",
"bar/",
],
}
Under slightly different conditions where one of the npm modules you are working is not part of your lerna repo, you can use lerna to exec the npm link command.
npx lerna exec -- npm link <npm_package_name>
This will npm link the external package in all of your lerna modules.
This should not be confused with lerna link which will do something similar for all submodules in your your lerna repo and is the current solution to the question.
Use can try like that:
foo/packages/core/package.json
{
...
dependencies: {
"#foo/errors": "file:../errors"
}
}
bar/package.json
{
...
dependencies: {
"#foo/core": "file:../foo/packages/core"
}
}
I have a main package.json for my project. I also have a component within my project which I'm publishing to NPM, so that requires its own package.json.
package.json
index.html
-folder
--component-folder
---package.json
Both package.json files define dependancies. At the moment I have to run npm install from both my project root and from component-folder. Is there a way of making it install dependancies for both when its only run from the project root?
Try using subpackage:
{
"name": "my-awesome-project",
"version": "2.5.1",
"subPackages": [
"packages/sub-package-1",
"packages/sub-package-2"
]
}
https://www.npmjs.com/package/subpackage
Given the following directory structure:
my-project
|
|-- node_modules
|
|-- react
|-- module-x
|
|--node_modules
|
|--react
You can see both my-project and module-x require React. I have the same problem as described on this question, but the suggestion is to remove react from the package.json dependencies. I do that and it works fine, as long as no node_modules are installed in module-x, because Webpack will use React from my-project. But if I'm in the process of developing module-x and the node_modules are installed, Webpack uses React from both my-project and module-x.
Is there a way I could have Webpack make sure only one instance of React is used, even though it's required on two separate levels?
I know I could keep module-x in a separate directory when developing, but it seems like I'd have to publish it and then install it in my-project to test it, and that's not very efficient. I thought about npm link, but had no luck with it since it still has node_modules installed in module-x.
This here sounds a lot like the same challenge I'm having, but it doesn't seem like npm dedupe or Webpack's dedupe option would work. I'm probably not understanding some important detail.
This issue usually arises when using npm link. A linked module will resolve its dependencies in its own module tree, which is different from the one of the module that required it. As such, the npm link command installs peerDependencies as well as dependencies.
You can use resolve.alias to force require('react') to resolve to your local version of React.
resolve: {
alias: {
react: path.resolve('./node_modules/react'),
},
},
If you don’t want to (or can’t) modify the project configuration, there is a more straightforward solution: just npm link React itself back to your project:
# link the component
cd my-app
npm link ../my-react-component
# link its copy of React back to the app's React
cd ../my-react-component
npm link ../my-app/node_modules/react
Just in case it's useful for others, the solutions suggested above didn't work for me, I had to perform the following steps to solve it:
In the library:
Setup the libraries that are generating issues as peerDependencies in the package.json instead of dependencies or devDependencies, e.g. in my case react:
"peerDependencies": {
"react": "^16.8.6",
...
}
run npm install
build the library (in my case, with a rollup -c npm script
In my main app:
change the version of my library to point to my local project with a relative path in package.json, e.g.
"dependencies": {
"my-library": "file:../../libraries/my-library",
...
}
Add resolve.symlinks = false to my main app's webpack configuration
Add --preserve-symlinks-main and --preserve-symlinks to my package.json start script, e.g:
"scripts": {
"build": "set WEBPACK_CONFIG_FILE=all&& webpack",
"start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}
run npm install
run npm run start
In the same vein as the accepted answer here's how you can achieve the desired outcome with Craco:
const path = require('path')
module.exports = {
webpack: {
configure: config => {
config = {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'react': path.resolve('./node_modules/react'),
},
},
}
// console.log(config)
return config
},
},
}
It's important to note you can't just pass resolve as a key, you have to do your own deep merge using the configure callback.