我在将 cypress-dark(主题)插件添加到 Yarn 2 工作区的“测试”包的上下文中遇到了这个问题,但我认为这个问题很普遍。为了更好地说明原始问题,我想我需要知道的是:如何获得 Webpack 的 resolve.fallback 选项来使用 PnPWebpackPlugin?
为了将 Webpack 5 与 Cypress 一起使用,我一直在使用 cypress-webpack-preprocessor-v5。在 support/index.ts 中导入 cypress-dark 后,运行规范会在浏览器中产生以下错误:
Error: Webpack CompLooked for and couldn't find the file at the following paths:resolve 'path' in '/home/john/Projects/current/djinndex-remastered/.yarn/cache/postcss-npm-7.0.16-2507f8c3e2-b867411523.zip/node_modules/postcss/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
因此,我补充说
resolveLoader: {
plugins: [PnpWebpackPlugin.moduleLoader(module)],
},
到我的 plugins/index.ts 如下:
/**
* @type {Cypress.PluginConfig}
*/
//@ts-ignore
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
const options = {
webpackOptions: {
...require('../../../client/webpack/webpack.cypress.js'),
resolve: {
plugins: [PnpWebpackPlugin],
extensions: ['.ts', '.js'],
fallback: { path: require.resolve('path-browserify') },
},
resolveLoader: {
plugins: [PnpWebpackPlugin.moduleLoader(module)],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
use: [
{
loader: 'ts-loader',
},
],
},
],
},
},
watchOptions: {},
};
on('file:preprocessor', webpackPreprocessor(options));
};
然后运行规范会产生以下错误:
cypress_runner.js:199777 AssertionError: Timed out retrying: `cy.readFile("dark.css")` failed because the file does not exist at the following path:
`/home/[.../<workspace>/]packages/test/dark.css`
Because this error occurred during a `before all` hook we are skipping all of the remaining tests.
at Context.eval (http://localhost:3000/__cypress/tests?p=cypress/support/index.ts:3280:8)
Webpack 应该在来自 /.yarn/cache/cypress-dark-npm-1.7.14-295ea64c64-9b608eccac.zip 的 Yarn 2 虚拟包中寻找 dark.css,而不是在“test”包的根目录中(我正在运行赛普拉斯的工作区)。所以看起来像
{resolve: fallback: { path: require.resolve('path-browserify')}
在 webpackOptions 中回退到不了解 PnPWebpackPlugin 的解决方案。这就是我卡住的地方。任何指导将不胜感激:)