I am using Storybook to document a design system using Material-UI (v4) components. When building my Storybook for production:
$ npm run build-storybook
$ npx http-server storybook-static -o
The code blocks display WithStyles instead of component names. For example, a code block that should appear as:
<Button
color="default"
onClick={() => {}}
size="medium"
variant="contained"
>
Hello World
</Button>
Instead appears as:
<WithStyles
color="default"
onClick={function noRefCheck(){}}
size="medium"
variant="contained"
>
Hello World
</WithStyles>
I inquired in the Storybook Discord and part of the answer I got was:
Storybook uses react-element-to-jsx-string to generate the source blocks, and that library relies on element's displayNames. It looks like you're using MUI, which does not assign displayName in production environments.
But the person helping me was unsure how to overcome this.
Is there a workaround to get Storybook to properly generate the code blocks when building Material-UI components in production?
I have a h1 tag and I'm trying to get the node using specific heading level but running to the error:
Found multiple elements with the role "heading"
According the documentation this query supposed to return only h1.
here is the example:
import React from "react";
import { render, screen } from "#testing-library/react";
it("Should found only header1", async () => {
render(
<div>
<h1>editable content</h1>
<p>and</p>
<h2>other header</h2>
</div>
);
screen.debug(screen.getByRole("heading", { level: 1 }));
});
and here is the error:
Found multiple elements with the role "heading"
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
<body>
<div>
<div>
<h1>
editable content
</h1>
<p>
and
</p>
<h2>
other header
</h2>
</div>
</div>
</body>
Solved.
The reason is the version of the library. By default create-react-app installing outdated version of #testing-library.
Run CLI command npm outdated and check the versions of dependencies:
Package Current Wanted Latest
#testing-library/jest-dom 4.2.4 4.2.4 5.11.4
#testing-library/react 9.5.0 9.5.0 11.0.2
#testing-library/user-event 7.2.1 7.2.1 12.1.4
To update dependencies open package.json and manually update them to the latest:
...
"dependencies": {
...
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.0.2",
"#testing-library/user-event": "^12.1.4"
...
},
...
Save changes and run CLI command: npm install
I am attempting to use the ion-bottom-drawer component in my app but i keep running into errors. The component does not seem to be recognized
Steps to reproduce :
create ionic4 project
npm i ion-bottom-drawer --save
npm i hammerjs#2.0.8 --save
npm i #types/hammerjs#2.0.36 --save
import IonBottomDrawerModule in app.module.ts
add component to homepage
<ion-bottom-drawer
[(state)]="drawerState"
[minimumHeight]="minimumHeight"
[dockedHeight]="dockedHeight"
[shouldBounce]="shouldBounce"
[distanceTop]="distanceTop"
>
<div class="drawer-content">
Bottom Drawer Content
</div>
</ion-bottom-drawer>
The component is not recognized despite following all steps in the documentation
You should use the appropriate values.
Please use as below.
<ion-bottom-drawer [minimumHeight]=50 [dockedHeight]=350
[shouldBounce]=true [distanceTop]=50>
<div class="drawer-content">
Bottom Drawer Content
</div>
</ion-bottom-drawer>
Here is an example
https://stackblitz.com/edit/ionic-bottom-drawer?file=pages%2Fhome%2Fhome.ts
Look in your homepage.module.ts and import it in there as well:
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
IonBottomDrawerModule
],
declarations: [HomePage]
})
export class HomePageModule {}
I'm still learning myself, but I think this is because of the lazy loading feature. Every page gets its own module.
I finally figured it out. I had to create a component module and import IonBottomDrawerModule there then include CUSTOM_ELEMENTS_SCHEMA as a schema in the module and just use the component the way the documentation states.
I am not able to install bootstrap 4(beta) to my MVC project. To be precise popper.js nuget dependency is failing to install. Please let me know any possible way to do it(bower install is still a way but I want to go with nuget)
Could not install package 'popper.js 1.11.0'. You are trying to
install this package into a project that targets
'.NETFramework,Version=v4.6.2', but the package does not contain any
assembly references or content files that are compatible with that
framework. For more information, contact the package author
I was finally able to get Bootstrap 4-Beta working by doing the following:
1.) Install the popper.js NuGet Package V1.12.3
2.) Install Bootstrap4-beta NuGet Package
3.) Update your BundleConfig.cs to include the following: Note the popper.js path
bundles.Add(new ScriptBundle("~/Scrpts/Bootstrap").Include(
/*** Make sure popper.js is pointing to umd ***/
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js",
));
bundles.Add(new StyleBundle("~/CSS/Bootstrap").Include(
"~/Content/bootstrap.css"));
For some reason if you try to use the popper.js in the root of the \Scripts folder you will receive the error:
SyntaxError: export declarations may only appear at top level of a module
but the version in the /Scripts/umd seems to work.
You can get around this by manually adding the popper.js package to your packages config.
<package id="popper.js" version="1.11.1" targetFramework="net462" />
Then you can go into the nuget package manager and install normally.
I managed to get around this problem by downloading the latest (1.12.3 at the time of writing) popper.js nuget package before updating to bootstrap 4.0.
Then in the bundles.config I added the popper js like this
bundles.Add(new ScriptBundle("~/bundles/popper").Include(
"~/Scripts/umd/popper.js"));
The umd version is the only one that worked for me the others gave an console error of
Unrecognised Token Export
Just make sure to include the popper js file before the bootstrap one.
#Scripts.Render("~/bundles/popper")
#Scripts.Render("~/bundles/bootstrap")
I also noticed that this then broke the majority of the auto produced template as it's based on previous versions of bootstrap. The navbar almost completely vanishes. I managed to fix mine by replacing it with the following, but this doesn't include any items in the mobile menu.
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">#Html.ActionLink("Home", "Index", "Home", new { #class = "nav-link" })</li>
<li class="nav-item">#Html.ActionLink("About", "About", "Home", new { #class = "nav-link" })</li>
<li class="nav-item">#Html.ActionLink("Contact", "Contact", "Home", new { #class = "nav-link" })</li>
</ul>
</div>
</div>
I know this question has a few good answers but this was the full solution that worked for me so I thought I'd share it in the hope that it spares someone a bit of time in the future.
Same problem here... I created an issue on GitHub for this: https://github.com/FezVrasta/popper.js/issues/387
The Popper.js NuGet package has been broken until version 1.12.2.
Bootstrap is still requiring the version 1.11.x, which is, unfortunately, broken.
You should wait for Bootstrap to close this issue:
https://github.com/twbs/bootstrap/issues/23622
meanwhile you can follow the suggestion of Rob Quincey.
Before installing the package using NuGet, expand "Options" and change the "Dependency Behavior" to "Highest". Now when you install the package the latest popper.js will get installed first allowing bootstrap to get installed as well.
This prevented me from having to install popper separately.
Again, not a fix, but similar to the fix by #Alex.
I resolved it by installing them separately using NuGet, so first installing popperjs (just search for popper in the NuGet package manager) then installing Bootstrap 4. It seems to only hit the above error when it needs to download it as a dependency rather than standalone. Very odd.
I was not happy with all the files and folders and typescript-related code and NuGet and debugger messages that came with Popper, so I am using CDNs, like so:
#Scripts.Render("~/bundles/jquery")
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
So far it's all worked fine.
For uses of ASP.NET Webforms:
I've created a new Project with preinstalled Packages (Bootstrap, Popper, jQuery), updated them to the newest version and did:
add to App_Start/BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/popper").Include(
"~/Scripts/umd/popper.js"));
Add to Header (Master Page)
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/popper") %>
<%: Scripts.Render("~/bundles/bootstrap")%>
</asp:PlaceHolder>
I recently upgraded Ionic from 1.1.0 to 1.3.1 and now my ion-refresher has stopped working. Nothing appears when I drag down on the page and the event does not fire.
In my development environment I have:
<ion-view view-title="Test">
<ion-content>
<ion-refresher pulling-text="Pull to refresh..."
on-refresh="vm.refresh()">
</ion-refresher>
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
</ion-list>
</ion-content>
</ion-view>
By changing the versions of Ionic, I discovered that the problem was introduced between 1.1.1 and 1.2.1
Then I compared the html being produced by each version and noticed that the earlier version included class="js-scrolling" on the refresher. I also examined the release notes for 1.2.1. And there I found another clue, buried in some comments on issue #4758:
"By default, Ionic 1.2 will use native scrolling on all platforms."
ion-refresher is based on jsScrolling. If you want ion-refresher you
should enable jsScrolling. You can do it by adding
$ionicConfigProvider.scrolling.jsScrolling(true); in your app config
So I added a script file to my index.html containing this code:
(function () {
"use strict";
angular
.module('app')
.config(ionicConfig);
ionicConfig.$inject = ['$ionicConfigProvider'];
function ionicConfig($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(true);
}
})();
And now my refresher is working again.
EDIT
At least it was working - in the Ripple emulator. But when I tried to run on a device (deploying from Visual Studio 2015) the app would not deploy or run until I removed that line. So now I have this code:
function ionicConfig($ionicConfigProvider) {
//detecting Ripple emulator
var emulating = window.parent && window.parent.ripple;
if (emulating) {
$ionicConfigProvider.scrolling.jsScrolling(true);
}
}