BUG: Circular dependency fix broke starting up with some packages
Author: canderisCreated Aug 25, 2021Updated Dec 19, 2022
Quick 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/[email protected]/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/[email protected]/lodash/set.js'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: 'dir/node_modules/.cache/snowpack/build/[email protected]/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
Source: FredKSchott/snowpack