Fix Error: connect ECONNREFUSED #44
Conversation
Applies breaking changes needed by parcel, such as moving runtime dependencies to dependencies from devDependencies. Other breaking changes were for packages which are now ES modules, issues importing d3, and issues when puppeteer encounters preflight requests. Closes #40
| @@ -17,7 +17,7 @@ module.exports = { | |||
| ecmaFeatures: { | |||
| jsx: true | |||
| }, | |||
| ecmaVersion: 2018, | |||
| ecmaVersion: 2020, | |||
There was a problem hiding this comment.
this was needed for dynamic imports to be used
| yarn-error.log | ||
| dist/originalFiles | ||
| dist/originalFileMapping.json | ||
| dist/screenshot.png | ||
| dist/treeData.json |
There was a problem hiding this comment.
seemed to not be needed and are created when an end-user uses the CLI
| "tracium": "^0.2.1", | ||
| "uuid": "^8.3.0", | ||
| "yargs": "^16.0.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "puppeteer": "15.0.0" | ||
| "puppeteer": "^20.5.0" | ||
| }, | ||
| "devDependencies": { |
There was a problem hiding this comment.
the new dependencies such as process were added when running yarn build with the latest parcel
| "request": "^2.88.2", | ||
| "sanitize.css": "11.0.1", |
There was a problem hiding this comment.
parcel would not build until all runtime deps were moved here.
| @@ -1,5 +1,5 @@ | |||
| import React from 'react' | |||
| import * as d3 from 'd3' | |||
| import * as d3 from 'd3/dist/d3' | |||
There was a problem hiding this comment.
parcel would not import this properly in its previous form, it would be undefined at runtime.
| @@ -26,7 +26,7 @@ | |||
| <body> | |||
| <div id="container"> | |||
| </div> | |||
| <script src="./index.js"></script> | |||
| <script src="./index.js" type="module"></script> | |||
There was a problem hiding this comment.
parcel would not build without this change.
| @@ -89,12 +89,12 @@ const downloadCoverage = async ({ | |||
| const page = (await browser.pages())[0] | |||
|
|
|||
| if (isMobile) { | |||
| await page.emulate(puppeteerCore.devices['iPhone X']) | |||
| await page.emulate(puppeteerCore.KnownDevices['iPhone X']) | |||
There was a problem hiding this comment.
deprecated in newer puppeteer
| @@ -107,6 +107,8 @@ const downloadCoverage = async ({ | |||
| const localFileName = `${downloadsDir}/${Math.random()}${splitString}${fileName}` | |||
| urlToFileDict[url.toString()] = localFileName | |||
| fs.writeFileSync(localFileName, body) | |||
| }).catch(() => { | |||
| // ignore: ProtocolError: Could not load body for this request. This might happen if the request is a preflight request. | |||
There was a problem hiding this comment.
this is scruffy but at least shows the intent so it can be improved on
| @@ -20,6 +18,10 @@ const visualizeBundles = async ({ | |||
| console.log(`\n🖼️ Generating visualization...\n`) | |||
|
|
|||
| try { | |||
| // require() of ES Module not supported. | |||
| const { default: open } = await import('open') | |||
| const { default: getPort } = await import('get-port') | |||
There was a problem hiding this comment.
newer versions of these packages are written in ES modules. I had updated npm packages in a previous version of this fix, then rolled them back to focus the PR. I've left these in though to make it easier when you do upgrade. They'll surely want to be imported in some better organised way but this got the fix delivered.
Description
Aims to fix #40, which occurs when
http://localhost:${chrome.port}/json/versionis requested, changing that URL tohttp://127.0.0.1:${chrome.port}/json/versionappears to have fixed it.The rest of the PR is around getting bundle-wizard to build and run on Node 18.
It's scruffy but it seems to work, feel free to make any changes or undo anything I've done here – and thanks for such a useful tool.
Demo
Steps to reproduce
git clone https://github.com/JamieMason/bundle-wizard.git cd bundle-wizard yarn install yarn build node src/index.js reddit.comEDIT: I missed off
yarn buildin the steps above