π BUG: Circular dependency fix broke starting up with some packages
See original GitHub issueQuick checklist
- I am using the latest version of Snowpack and all plugins.
What package manager are you using?
npm
What operating system are you using?
macOS
Describe the bug
The PR https://github.com/snowpackjs/snowpack/pull/3562 seems to have caused some issues with both the package Nivo it was trying to fix, as well as others.
A lot of errors similar to this pop up:
[14:28:42] [snowpack] Error: ENOENT: no such file or directory, open 'dir/node_modules/.cache/snowpack/build/lodash@4.17.21/lodash/get.js'
[14:28:42] [snowpack] [500] /_snowpack/pkg/lodash.get.v4.17.21.js
[14:28:42] [snowpack] [Error: ENOENT: no such file or directory, open 'dir/node_modules/.cache/snowpack/build/lodash@4.17.21/lodash/set.js'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: 'dir/node_modules/.cache/snowpack/build/lodash@4.17.21/lodash/set.js'
}
As well as a lot of these:
[14:27:29] [snowpack] lodash/isDate: Unscannable package import found.
Snowpack scans source files for package imports at startup, and on every change.
But, sometimes an import gets added during the build process, invisible to our file scanner.
We'll prepare this package for you now, but should add "lodash/isDate" to "knownEntrypoints"
in your config file so that this gets prepared with the rest of your imports during startup.
though I only included lodash in this list, the same sort of errors come up from other packages.
I believe it has something to do with having two packages that require two different versions of another package but Iβm not entirely sure.
Steps to reproduce
- npx create-snowpack-app my-app --template @snowpack/app-template-react-typescript
- npm i @nivo/core @nivo/bar
- Replace App.tsx with
import { ResponsiveBar } from '@nivo/bar';
import React from 'react';
import './App.css';
const data = [
{
country: 'AD',
'hot dog': 3,
'hot dogColor': 'hsl(183, 70%, 50%)',
burger: 42,
burgerColor: 'hsl(253, 70%, 50%)',
sandwich: 167,
sandwichColor: 'hsl(154, 70%, 50%)',
kebab: 169,
kebabColor: 'hsl(166, 70%, 50%)',
fries: 65,
friesColor: 'hsl(288, 70%, 50%)',
donut: 120,
donutColor: 'hsl(83, 70%, 50%)',
},
{
country: 'AE',
'hot dog': 168,
'hot dogColor': 'hsl(20, 70%, 50%)',
burger: 119,
burgerColor: 'hsl(69, 70%, 50%)',
sandwich: 113,
sandwichColor: 'hsl(350, 70%, 50%)',
kebab: 127,
kebabColor: 'hsl(207, 70%, 50%)',
fries: 7,
friesColor: 'hsl(196, 70%, 50%)',
donut: 107,
donutColor: 'hsl(267, 70%, 50%)',
},
{
country: 'AF',
'hot dog': 179,
'hot dogColor': 'hsl(98, 70%, 50%)',
burger: 110,
burgerColor: 'hsl(229, 70%, 50%)',
sandwich: 144,
sandwichColor: 'hsl(355, 70%, 50%)',
kebab: 46,
kebabColor: 'hsl(75, 70%, 50%)',
fries: 105,
friesColor: 'hsl(34, 70%, 50%)',
donut: 25,
donutColor: 'hsl(86, 70%, 50%)',
},
{
country: 'AG',
'hot dog': 169,
'hot dogColor': 'hsl(253, 70%, 50%)',
burger: 61,
burgerColor: 'hsl(241, 70%, 50%)',
sandwich: 83,
sandwichColor: 'hsl(241, 70%, 50%)',
kebab: 168,
kebabColor: 'hsl(104, 70%, 50%)',
fries: 77,
friesColor: 'hsl(328, 70%, 50%)',
donut: 97,
donutColor: 'hsl(76, 70%, 50%)',
},
{
country: 'AI',
'hot dog': 10,
'hot dogColor': 'hsl(15, 70%, 50%)',
burger: 144,
burgerColor: 'hsl(100, 70%, 50%)',
sandwich: 34,
sandwichColor: 'hsl(238, 70%, 50%)',
kebab: 26,
kebabColor: 'hsl(327, 70%, 50%)',
fries: 44,
friesColor: 'hsl(107, 70%, 50%)',
donut: 40,
donutColor: 'hsl(218, 70%, 50%)',
},
{
country: 'AL',
'hot dog': 60,
'hot dogColor': 'hsl(52, 70%, 50%)',
burger: 189,
burgerColor: 'hsl(151, 70%, 50%)',
sandwich: 130,
sandwichColor: 'hsl(246, 70%, 50%)',
kebab: 171,
kebabColor: 'hsl(11, 70%, 50%)',
fries: 1,
friesColor: 'hsl(160, 70%, 50%)',
donut: 190,
donutColor: 'hsl(35, 70%, 50%)',
},
{
country: 'AM',
'hot dog': 125,
'hot dogColor': 'hsl(80, 70%, 50%)',
burger: 105,
burgerColor: 'hsl(57, 70%, 50%)',
sandwich: 10,
sandwichColor: 'hsl(63, 70%, 50%)',
kebab: 13,
kebabColor: 'hsl(135, 70%, 50%)',
fries: 62,
friesColor: 'hsl(157, 70%, 50%)',
donut: 38,
donutColor: 'hsl(36, 70%, 50%)',
},
];
interface AppProps {}
function App({}: AppProps) {
return (
<div className="App">
<ResponsiveBar
data={data}
keys={['hot dog', 'burger', 'sandwich', 'kebab', 'fries', 'donut']}
indexBy="country"
margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
padding={0.3}
valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }}
colors={{ scheme: 'nivo' }}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true,
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10,
},
]}
fill={[
{
match: {
id: 'fries',
},
id: 'dots',
},
{
match: {
id: 'sandwich',
},
id: 'lines',
},
]}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'country',
legendPosition: 'middle',
legendOffset: 32,
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'food',
legendPosition: 'middle',
legendOffset: -40,
}}
labelSkipWidth={12}
labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
legends={[
{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 120,
translateY: 0,
itemsSpacing: 2,
itemWidth: 100,
itemHeight: 20,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 20,
effects: [
{
on: 'hover',
style: {
itemOpacity: 1,
},
},
],
},
]}
/>
</div>
);
}
export default App;
- npm run start
Link to minimal reproducible example (optional)
No response
Issue Analytics
- State:
- Created 2 years ago
- Reactions:6
- Comments:16
Top Results From Across the Web
BUG: Circular dependency fix broke starting up with ... - GitHub
I am using the latest version of Snowpack and all plugins. What package manager are you using? npm. What operating system are you...
Read more >How to fix nasty circular dependency issues once and for all in ...
First, this is ugly and doesn't scale. In a large code base, this will result in moving imports randomly around until stuff just...
Read more >`apt --fix-broken` is broken (`uim` has circular dependencies)
Try 'apt --fix-broken install' with no packages (or specify a solution). The $ sudo apt autoremove command gives a similar error and alsoΒ ......
Read more >How to Eliminate Circular Dependencies from Your JavaScript ...
While circular dependencies may not directly result in bugs, they will almost always have unintended consequences. There are node packages ...
Read more >Circular Dependencies in Spring - Baeldung
A quick writeup on dealing with circular dependencies in Spring: how they occur and several ways to work around them.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Can confirm this is still happening on 3.8.8
500
err/_snowpack/pkg/...
500
err/_snowpack/pkg/...
/_snowpack/pkg/
dirskypack
versionIt seems to break in the first
rc
for3.8.7
which was accidentally namedsnowpack-3.8.6-rc.0
and then republished assnowpack-3.8.7-rc.0
, and subsequently published as3.8.7
without any changes sincesnowpack-3.8.6-rc.0
. This was a fix by @drwpow for a circular dependency loop issue but seems to have broken some other stuff.I did a quick scan on the changes between 3.8.6 and 3.8.7. I have a hunch that the issue is caused by something in snowpack/src/sources/local.ts, probably something with the memoization stuff.
There are also some changes in the
init
command, but this is just apackage.json
exists check.Can anyone confirm that
3.8.6
works for them?