Solvedpolymer Yarn Flat Mode Attribute in Package.json breaks projects

I fully understand the desire for flat dependencies and I think Polymer can be opinionated about requiring flat mode for apps. However, when a dependency has the flat: true in it's package.json, it forces any project which uses it into flat mode. This breaks all my existing projects.

 |- dep-1
 |- dep-2 // flat: true here forces the entire project into flat mode
 |- dep-3

This parameter is already ignored by npm so effectively what this parameter does is prevent developers from using yarn unless they use it exactly how the Polymer Project intends. And since flat mode and separate client/server dep folders is extremely non-standard, the end result is this may very well fracture the development space and be every bit as divisive as bower was.

With flat: true specified in Polymer core or in any other dependency, my choices are:

1 . Abandon yarn and go back to npm so that my projects can bypass the flat mode requirement.
2. Republish every dependency I use to an internal npm repository. This is a maintenance nightmare.

As I understand it the problems flat is attempting to solve are:

  • Attempting to register a custom-element which is always defined throws an exception. Define calls can be guarded by an if to work around this.
  • Being able to properly calculate paths to other components which nesting breaks. This is solved by the node module resolution algorithm but would require a build step.

I recommend documenting the flat mode requirement and having the Polymer provided build tooling check for it, but removing the flat: true property from any npm-published library intended to be used as a dependency.

17 Answers

✔️Accepted Answer


we've got a thread going over at package-community/discussions#2 about this issue.

For those who don't want to read through the Dostoyevsky book that thread's become, here's the tl;dr of what my team's planning on implementing:

  1. a new type of dependency, called an asset dependency, which will install into an assets/ directory, distinct from node_modules
  2. assets are guaranteed maximally flat, and existing separate means node tooling isn't broken by spurious forced flattening that it was never developed to support in the first place
  3. we're going to port Bundler's tree-flattening algorithm, which is pretty good at finding flat trees without requiring manual resolution. This is probably going to be much better than bower's algorithm (and, tbh, probably Yarn's) at finding flat trees without user involvement
  4. when all else fails, we're going to have a bower-style (but not bower-identical) resolutions definition in package.json so you can force a package into a version
  5. assets will be additionally written into package-lock.json, so you'll have reproducible builds
  6. all of this will be built in to npm itself, with the same stuff that's shipped out by default with node.js (once it lands)


$ npm i --save-asset @polymer/example
$ echo '<script type="module" src="/assets/@polymer/example/example.js"></script><example></example>' \
  > index.html
$ npx serve
...(open http://localhost:5000/index.html and play with <example>)

Note: I've popped into the polymer slack if anyone wants more back-and-forth questions, and we've also got conversations going on about this in the Discord for I probably won't say much more in this thread, specifically, but I figured this'd be useful. ❤️

Related Issues:

polymer Polymer Team - I'm really frustrated!
Hey @clintwood! I hear your frustration and appreciate your enthusiasm @tjsavage and the Polymer tea...
polymer Yarn Flat Mode Attribute in Package.json breaks projects
hi~ we've got a thread going over at package-community/discussions#2 about this issue ...
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
storybook babelHelpers is not defined using Rollup [Solved]
@alejandronanez you can remove external-helpers from your .babelrc file and enable it back only on y...
storybook Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin
I also get the same issue as @matamatanot (also with tailwind 2.0.2) I might have missed something f...
storybook Storybook build fails in Node 13 (cannot find module @babel/compat-data/corejs3-shipped-proposals)
Removing node_modules and yarn.lock and using node 13.13 has been helped for me. ...
storybook Storybook 5.0.0 emotion-themeing and React loader bug
Worked for us to add @storybook/theming as an explicit dependency Describe the bug When starting up ...
storybook [Angular] How to render a component that has <ng-content> in the template
That couldn't be the solution Why I should write the HTML manually again? It already in the componen...
storybook build-storybook doesn't respect tsconfig.json baseUrl config (Module not found: Error: Can't resolve 'components')
@jwm0 your solution worked for me Here's my main.js for reference: Bug or support request summary I'...
storybook TypeError: Cannot read property 'createSnapshot' of undefined
@shilman @jimmyandrade @ckwong90 For this issue in particular When I start storybook I got TypeError...
storybook Doc code preview "No display name"
What happens if you use {Story()} instead of <Story />? Describe the bug The Doc code preview does n...
storybook Feature: custom proxy settings
@ndelangen just when I saw your message I was able to find a solution to my problem using the awesom...
storybook TS1086: An accessor cannot be declared in an ambient context
Try skipLibCheck: true inside tsconfig.json eg Hope it will help you !! Describe the bug Upgraded to...
storybook Webpack Building Constantly
Having the same issue after upgrading to 6.2.1 Changing my main.js file to only load stories from th...
storybook Cant add aliases in storybook config
I think the problem may be trailing slashes Try using ~ and ../src/ exactly It seems to work for me ...
storybook TypeError: Cannot read property 'module' of undefined
Logging the three variables in the line (baseConfig env config) => { shows that the latter two are u...
storybook Error: Invariant failed: You should not use <Link> outside a <Router>
This is not an issue with storybook the error comes from react-router as is evidenced by the screens...
storybook Async/Await
I'm using a vanilla setup of StoryBook with no tweaks to babel ...
storybook Storysource is giving me linting errors
I ran into this same Import in body of module; reorder to top import/first error in SB 5.0.x ...
storybook Storybook is not able to resolve path with Next js absolute import
Its because thats not an absolute import from root your path is using an alias Describe the bug Stor...
storybook [webpack5] DefinePlugin cannot read property 'get' of undefined
If someone is still looking around for a solution Describe the bug I cannot build storybook using we...
storybook Uncaught Error: Target container is not a DOM element.
If there is someone who hasn't fix the problem jet check the order of your tag elements in html ...
storybook Story source code shows "MDXCreateElement" instead of actual source code
It seems to only occur when using an intermediate variable (including the template/bind pattern): ☝️...
storybook CSS modules
For webpack 2 I'm using this in .storybook/webpack.config.js and it's working fine: ...
storybook Error: exports is not defined
I'm getting this error without using TypeScript just vanilla JS I'm trying to use storybook for the ...
storybook [question] How to order top-level sections?
In the same boat as everyone else just sharing because it was such a headache. We've just upgraded t...
storybook Knobs not working with v5.2.0-beta.30
I am pretty sure it was caused by the wrong import: instead of Describe the bug When enabling the Kn...
storybook [Bug] "Invalid hook call" error after upgrading to Storybook 6
It's caused by multiple versions of React being loaded - @storybook/ui most likely contains its own ...
storybook Sorting stories
For reference here's the recommended setup for v5.2 onwards: This will sort your story kinds (files)...
storybook "Singleton client API not yet initialized"
The solution for vite builder — force dedupe (see
storybook Can't get props for addon-info when using decorator (higher order component) on my component
Here is a workaround I used in my project And now my story will look like Hello I wanted to use addo...
storybook Getting 404 Registry returned when trying to run `npm install`
Yea I was using sinopia Doing a npm set registry solved the problem. ...
storybook Decorator Children Displayed In Story Source
Place withInfo decorator before other decorator works for me. Describe the bug If a decorator itself...
storybook A working example with PostCSS for Storybook v5
Ok for those playing along at home this works perfectly. Is your feature request related to a proble...
storybook Cannot assign to read only property 'exports' of object '#<Object>'
For anyone stumbling across this I faced the same problem after importing a NPM package to a Vue com...
storybook babel-loader devDependency causes error in Create-React-App
Hello @ajrussellaudio thanks for your work Unfortunately Describe the bug Installing Storybook in a ...
storybook Add loader for .module.css to load CSS modules
I'm currently setting CSS Modules in a shared component library written in TypeScript (apps consumin...
storybook @storybook/angular: Expected 'styles' to be an array of strings
@literalpie Storybook hooks into the configuration of Angular in order to provide a zero-configurati...
storybook import for addons "Cannot find module"
Try putting this in your TS code: Issue details I want to use with addons but I can't im...
storybook Static file path returned instead of file content on require('./file.svg')
FYI just adding the following parts in .storybook/webpack.config.js did the trick: .. and: => I did ...
storybook storybook@6 throws a core-js error
just a reminder that now that you published 6.0 officially this is still a problem ...
storybook Can't import css
If I do this it works for style.css but not for external module So I have to include all the project...
storybook I can not import with absolute path in Storybook
Try adding something like this: Version @storybook/addon-actions: 3.4.8 @storybook/addon-links: 3.4....
storybook Static build (S)css issue
A good friend of mine (@leeran88) pointed me to an issue (#4918) that straight connected me to this ...
storybook Unable to embed mdx/md documents within mdx doc page stories
Hello there I was also stuck on this problem for a while until I found something that works for me: ...
storybook How can I change a property in a stateless component?
May be we need to have some kind of reactive variables where we can change values How about this: On...
storybook create-react-app babel-loader clash
This is a problem when installing babel-loader Original Post Hidden As It Relates to CRAv2 When inst...
storybook Dynamic Themes
Figured it out This definitely still feels like a hack though Unsure if this is a bug report or a fe...
storybook npx sb init does not work with NPM v7
react 17.0.1 npm 7.5.2 Finally npx --legacy-peer-deps sb init works for me. Describe the bug The ini...
storybook use storybook with vue and vue-i18n
If you use Vue CLI plugin for storybook you can modify the config/storybook/config.js as follows ...