Support Yarn Berry

[yovanoc]

Hello, I don't know if its a bug report or feature request but I can't use next-offline with yarn berry.

The first next build gives me that:

So I've added webpack myself (yarn add -D webpack)

then here it is for the last build and I don't know what to do, thanks

[simofacc]

@yovanoc the error seems to be caused by the workbox-webpack-plugin GoogleChrome/workbox#2669 . So most probably just upgrading the package in this repository should do it. Otherwise you could try yourself by using resolutions in package.json but I haven't tested it out myself yet.

[bjorndown]

We are seeing this too. I am adding the error message as text here because right now it is not indexed by any search engines.

$ yarn next build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
(node:178853) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
(Use `node --trace-deprecation ...` to show where the warning was created)

> Build error occurred
Error: EROFS: read-only filesystem, open '/node_modules/next-offline/register-sw-compiled.js'
    at makeError (/home/bmo/work/repos/berry-workspace/.pnp.js:11729:24)
    at EROFS (/home/bmo/work/repos/berry-workspace/.pnp.js:11759:10)
    at ZipFS.prepareWriteFile (/home/bmo/work/repos/berry-workspace/.pnp.js:13898:30)
    at ZipFS.writeFilePromise (/home/bmo/work/repos/berry-workspace/.pnp.js:13869:14)
    at /home/bmo/work/repos/berry-workspace/.pnp.js:14756:26
    at /home/bmo/work/repos/berry-workspace/.pnp.js:15037:79
    at ZipOpenFS.getZipPromise (/home/bmo/work/repos/berry-workspace/.pnp.js:15153:22)
    at ZipOpenFS.makeCallPromise (/home/bmo/work/repos/berry-workspace/.pnp.js:15037:23)
    at ZipOpenFS.writeFilePromise (/home/bmo/work/repos/berry-workspace/.pnp.js:14751:23)
    at VirtualFS.writeFilePromise (/home/bmo/work/repos/berry-workspace/.pnp.js:12357:24)
    at PosixFS.writeFilePromise (/home/bmo/work/repos/berry-workspace/.pnp.js:12357:24)
    at /home/bmo/work/repos/berry-workspace/.pnp.js:15457:20
    at processTicksAndRejections (internal/process/task_queues.js:75:11) {
  code: 'EROFS'
}

[bjorndown]

I think the issue is caused by trying to write into __dirname at https://github.com/hanford/next-offline/blob/master/packages/next-offline/index.js#L88 which with yarn 2/pnp is a zip file and not a writeable location.

Edit: I tried a quick fix here https://github.com/bjorm/next-offline/commit/56524803893925df39c0c5f53f4a395046ec391f
So far the build completes successfully. I need to make sure that it actually works when deployed.

[bjorndown]

If other people want to try this fix, use the yarn patch protocol in your package.json:

"jest-junit": "^9.0.0",
"next-offline": "patch:next-offline@^5.0.2#./next-offline.patch",
"next-svgr": "^0.0.2",

where next-offline.patch contains

diff --git a/index.js b/index.js
index 7e6dfb7..5c2601e 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,9 @@
 const { GenerateSW, InjectManifest } = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { readFile, writeFile } = require('fs-extra');
+const { readFile, writeFile, mkdtempSync } = require('fs-extra');
 const { join } = require('path');
 const { cwd } = require('process');
+const os = require('os');
 
 const exportSw = require('./export');
 
@@ -85,7 +86,8 @@ module.exports = (nextConfig = {}) => ({
       const originalEntry = config.entry;
       config.entry = async () => {
         const entries = await originalEntry();
-        const swCompiledPath = join(__dirname, 'register-sw-compiled.js');
+        const tempFolder = mkdtempSync(join(os.tmpdir(), 'next-offline-'));
+        const swCompiledPath = join(tempFolder, 'register-sw-compiled.js');
         // See https://github.com/zeit/next.js/blob/canary/examples/with-polyfills/next.config.js for a reference on how to add new entrypoints
         if (
           entries['main.js'] &&

[meabed]

If other people want to try this fix, use the yarn patch protocol in your package.json:

"jest-junit": "^9.0.0",
"next-offline": "patch:next-offline@^5.0.2#./next-offline.patch",
"next-svgr": "^0.0.2",

where next-offline.patch contains

diff --git a/index.js b/index.js
index 7e6dfb7..5c2601e 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,9 @@
 const { GenerateSW, InjectManifest } = require('workbox-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { readFile, writeFile } = require('fs-extra');
+const { readFile, writeFile, mkdtempSync } = require('fs-extra');
 const { join } = require('path');
 const { cwd } = require('process');
+const os = require('os');
 
 const exportSw = require('./export');
 
@@ -85,7 +86,8 @@ module.exports = (nextConfig = {}) => ({
       const originalEntry = config.entry;
       config.entry = async () => {
         const entries = await originalEntry();
-        const swCompiledPath = join(__dirname, 'register-sw-compiled.js');
+        const tempFolder = mkdtempSync(join(os.tmpdir(), 'next-offline-'));
+        const swCompiledPath = join(tempFolder, 'register-sw-compiled.js');
         // See https://github.com/zeit/next.js/blob/canary/examples/with-polyfills/next.config.js for a reference on how to add new entrypoints
         if (
           entries['main.js'] &&

Would you try this fork https://github.com/meabed/next-offline-ts