-
-
Notifications
You must be signed in to change notification settings - Fork 8.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Problems with pnpm and the way loaders are resolved #5087
Comments
Maybe I can just use If my lib is installed with pnpm the path matches Feel free to close this issue, if this is the intended way. |
cc @yegor-sytnyk, @max-devjs Ref pnpm/pnpm#801 We have issues in lots of applications because webpack can't resolve packages in the node_modules created by pnpm. I think it is because webpack doesn't resolve dependencies the way Node does. Node resolves requires from the real path of a module. That is why the symlink approach pnpm uses works with all Node apps. However, it seems to confuse webpack and some other tools like browserify and eslint. |
Also, I believe @andreypopp has looked into these issues in scope of CRA pnpm/pnpm#581 And @vjpr has investigated it a bit |
This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days. |
bump |
Problem still exists? Can you create minimum reproducible test repo? |
I think I'm hitting this issue or something similar in this React project: https://github.com/dirtprotocol/dirt/tree/master/sampleprojects/sample-web-react If I install with
|
i also get a similar issue with pnpm this webpack.config.js works when i have no node_modules and run const HtmlWebPackPlugin = require("html-webpack-plugin")
const path = require("path")
const htmlWebpackPlugin = new HtmlWebPackPlugin(
{
template: "./public/index.html",
filename: "index.html",
})
module.exports =
{
entry: ["./src/index.js"],
devServer: {
historyApiFallback: true,
overlay: true,
},
resolve: {
modules: [
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, "src")
],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
options:
{
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
},
},
],
},
],
},
plugins: [htmlWebpackPlugin],
} also my package.json {
"name": "mydashboard",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack-dev-server --mode development --hot --port 3000",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
} |
@sokra any ideas? This issue is still prevalent and old. pnpm is very promising and this is blocker. |
webpack should have a peeDependency to Line 1 in 81cf088
|
failed in pnpm 3.8, too |
/cc @sokra i think we need add to |
@NikitaIT what is problem? |
|
@NikitaIT i think problem in vue-cli, webpack doesn't provide ts-loader out of box |
@evilebottnawi i know, but i followed pnpm/pnpm#1678 and this problem mark as related. |
It's a shame this hasn't been resolved yet. I love using pnpm because it treats dependencies in a sane way and it's fast. I also like the simplicity of vue-cli and the power of webpack. Could we attempt to fix this somehow? I don't even know who should change. This caught my eye in pnpm/pnpm#1678
Any help is appreciated here @evilebottnawi . |
Have you tried to put a file
|
@fengerzh in my case I'm using rush, which will break if I try to do that I think. So all the shameful options are not an option for me. In my monorepo I would prefer not to break the boundaries between the packages anyway. |
@wbern What is problem? webpack should works (some plugins/loaders/tools can don't work), what is error or example of error? |
@fengerzh ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '…\Mozilla\kuma' Regardless of |
Should be yes, feel free to test it and report if you have problems |
With strict package managers such as pnpm or Yarn PnP, transitive dependencies are *not* hoisted to the root node_modules folder. This means that a webpack config defined within a package like '@nrwl/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own package.json. This is a problem because the workspace might define a different version of 'ts-loader', incompatible with the version declared by '@nrwl/cypress/package.json'. The workspace should not need to declare a dependency on 'ts-loader' anyway. See also: * pnpm/pnpm#801 * webpack/webpack#5087
* fix(core): resolve webpack loaders with `require.resolve()` With strict package managers such as pnpm or Yarn PnP, transitive dependencies are *not* hoisted to the root node_modules folder. This means that a webpack config defined within a package like '@nrwl/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own package.json. This is a problem because the workspace might define a different version of 'ts-loader', incompatible with the version declared by '@nrwl/cypress/package.json'. The workspace should not need to declare a dependency on 'ts-loader' anyway. See also: * pnpm/pnpm#801 * webpack/webpack#5087 * fix(core): resolve absolute 'raw-loader' path When replacing the 'raw-loader' rule in the `getStylesPartial` function, check for the absolute path of 'raw-loader' rather than just the name.
beep |
it there a workaround in webpack@1? |
If it's unclear from the above concersation, the resolution problems with webpack loaders were fixed when I upgraded to webpack@5 (while using node@ˆ14 and pnpm@5.18) . I'm not familiar enough with webpack 5 to know why this is the case, but I was able to repro the issue by reverting the change and then reconfirmed the fix by applying the change again. |
same problem |
I think the way to solve this, if you intend to use a config package that provides a webpack config for you, is to use require.resolve for all of your loader references, like for example I don't have these issues anymore, as long as I use the above. If you don't have control over the package you get the configuration from, you should probably open an issue with them, because require.resolve makes more sense to do from their side rather than webpack's side. Webpack only reads loaders from working directory, changing that would be quite a breaking change, I believe. |
has workspace demo or use with lerna demo |
With strict package managers such as pnpm or Yarn PnP, transitive dependencies are *not* hoisted to the root node_modules folder. This means that a webpack config defined within a package like '@nrwl/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own package.json. This is a problem because the workspace might define a different version of 'ts-loader', incompatible with the version declared by '@nrwl/cypress/package.json'. The workspace should not need to declare a dependency on 'ts-loader' anyway. See also: * pnpm/pnpm#801 * webpack/webpack#5087
* fix(core): resolve webpack loaders with `require.resolve()` With strict package managers such as pnpm or Yarn PnP, transitive dependencies are *not* hoisted to the root node_modules folder. This means that a webpack config defined within a package like '@nrwl/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own package.json. This is a problem because the workspace might define a different version of 'ts-loader', incompatible with the version declared by '@nrwl/cypress/package.json'. The workspace should not need to declare a dependency on 'ts-loader' anyway. See also: * pnpm/pnpm#801 * webpack/webpack#5087 * fix(core): resolve absolute 'raw-loader' path When replacing the 'raw-loader' rule in the `getStylesPartial` function, check for the absolute path of 'raw-loader' rather than just the name.
Should work with |
https://github.com/icecream17/solver/runs/3694840400 |
Repro that's easy to do yourself (but not necessarily minimal):
Terminal outputWindows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
Try the new cross-platform PowerShell https://aka.ms/pscore6
PS C:\Users\Steven\Documents\code\js\test> npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
Need to install the following packages:
create-react-app@next
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in C:\Users\Steven\Documents\code\js\test\my-ts-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
added 1675 packages in 5m
163 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 45 packages, and changed 1 package in 12s
164 packages are looking for funding
run `npm fund` for details
We detected TypeScript in your project (src\App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
Removing template package using npm...
removed 1 package, and audited 1720 packages in 4s
164 packages are looking for funding
run `npm fund` for details
3 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created my-ts-app at C:\Users\Steven\Documents\code\js\test\my-ts-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-ts-app
npm start
Happy hacking!
PS C:\Users\Steven\Documents\code\js\test> cd my-ts-app
PS C:\Users\Steven\Documents\code\js\test\my-ts-app> rm -F node_modules
Remove-Item : Parameter cannot be processed because the parameter name 'F' is ambiguous. Possible matches include: -Filter -Force.
At line:1 char:4
+ ~~
+ CategoryInfo : InvalidArgument: (:) [Remove-Item], ParameterBindingException
+ FullyQualifiedErrorId : AmbiguousParameter,Microsoft.PowerShell.Commands.RemoveItemCommand
PS C:\Users\Steven\Documents\code\js\test\my-ts-app> rm -Force node_modules
Confirm
The item at C:\Users\Steven\Documents\code\js\test\my-ts-app\node_modules has children and the Recurse parameter was not specified. If you continue, all children will be removed with the item. Are you sure you want to
continue?
[Y] Yes [A] Yes to All [N] No [L] No to All [S] Suspend [?] Help (default is "Y"):
PS C:\Users\Steven\Documents\code\js\test\my-ts-app> pnpm install
WARN @testing-library/user-event@12.8.3 requires a peer of @testing-library/dom@>=7.21.4 but none was installed.
Packages: +1340
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: C:\Users\Steven\.pnpm-store\v3
Virtual store is at: node_modules/.pnpm
node_modules/.pnpm/core-js-pure@3.18.0/node_modules/core-js-pure: Running postinstall script, done in 199ms
node_modules/.pnpm/core-js@3.18.0/node_modules/core-js: Running postinstall script, done in 198ms
node_modules/.pnpm/ejs@2.7.4/node_modules/ejs: Running postinstall script, done in 241ms
Cannot link binary 'jest' of 'jest-cli' to 'C:\Users\Steven\Documents\code\js\test\my-ts-app\node_modules\.pnpm\jest@26.6.0\node_modules\jest\node_modules\.bin': binary of 'jest' is already linked
dependencies:
+ @testing-library/jest-dom 5.14.1
+ @testing-library/react 11.2.7 (12.1.0 is available)
+ @testing-library/user-event 12.8.3 (13.2.1 is available)
+ @types/jest 26.0.24 (27.0.2 is available)
+ @types/node 12.20.26 (16.9.6 is available)
+ @types/react 17.0.24
+ @types/react-dom 17.0.9
+ react 17.0.2
+ react-dom 17.0.2
+ react-scripts 5.0.0-next.37
+ typescript 4.4.3
+ web-vitals 1.1.2 (2.1.0 is available)
PS C:\Users\Steven\Documents\code\js\test\my-ts-app> pnpm run build
> my-ts-app@0.1.0 build C:\Users\Steven\Documents\code\js\test\my-ts-app
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'source-map-loader' in 'C:\Users\Steven\Documents\code\js\test\my-ts-app'
ELIFECYCLE Command failed with exit code 1.
PS C:\Users\Steven\Documents\code\js\test\my-ts-app> Repo: https://github.com/icecream17/my-ts-app Technically, icecream17/solver@a09eefb is also a repo showing this. |
Easy fix is to install |
I kinda fixed it in package.json, but now react-scripts gets an error. I will try your idea {
"pnpm": {
"overrides": {
"webpack": "^5.51.0"
}
}
} EDIT: Weirdly this package.json solution doesn't work, there's still the source-map-loader problem |
something wrong with |
make sure you have resolve.symlinks set to true |
Wow, you saved my day... Was very frustrated by that issue but require.resolve made the thing for me In my scenario I have a monorepo with separate packages for babel-preset and frontend so I was able to easily wrap all babel-loaders with require.resolve |
Fixed with this in .npmrc in current version of webpack (+ svelte and typescript):
|
Do you want to request a feature or report a bug?
bug?
What is the current behavior?
I can't create libs which use webpack and loaders, install these libs with pnpm and try to use them, because the modules can't be found.
It looks like pnpm installs my lib here:
/Users/foo/test/ws-pnpm-test/node_modules/.registry.npmjs.org/@mercateo/ws/1.0.2/node_modules/@mercateo/ws
.The loader is here
/Users/foo/test/ws-pnpm-test/node_modules/.registry.npmjs.org/string-replace-loader
and here/Users/foo/test/ws-pnpm-test/node_modules/.registry.npmjs.org/@mercateo/ws/1.0.2/node_modules/string-replace-loader
.I think webpack only looks here for loaders:
/Users/foo/test/ws-pnpm-test/node_modules/string-replace-loader
, but this does not exist.I think webpack resolves loaders in node_modules relative to
process.cwd()
, but not relative to my lib.I can't just rewrite my config to something like this:
What is the most robust way to solve this?
Can I specify something like that?
resolveLoaders.basedir: __dirname
, so all loaders can be resolved relative to my lib?// cc @zkochan
If the current behavior is a bug, please provide the steps to reproduce.
package.json
:tsconfig.json
:src/index.ts
:What is the expected behavior?
Build without error.
If this is a feature request, what is motivation or use case for changing the behavior?
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Node LTS, Webpack 2.6, pnpm 0.71, Mac OS X.
The text was updated successfully, but these errors were encountered: