elastic/next-eui-starter

Start building Kibana protoypes quickly with the Next.js EUI Starter

next-eui-starter's Issues

Incompatible with Nextjs 5

Hi there,
Thanks for creating this starter repo! I've cloned it and updated next to
"next": "^11.0.1" in package.json to run Next.js 5 and Webpack 5

and am running into the following error:

➜  eui-starter git:(master) ✗ yarn run dev
yarn run v1.22.10
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Defining routes from exportPathMap
(node:33793) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(Use `node --trace-deprecation ...` to show where the warning was created)
/Users/.../dev/eui-starter/node_modules/next/dist/build/webpack-config.js:560
        const isLocal = request.startsWith('.') || // Always check for unix-style path, as webpack sometimes
                                ^

TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (/Users/.../dev/eui-starter/node_modules/next/dist/build/webpack-config.js:560:33)
    at webpackConfig.externals._webpack.isWebpack5.require.resolve.paths (/Users/.../dev/eui-starter/node_modules/next/dist/build/webpack-config.js:677:24)
    at /Users/.../dev/eui-starter/next.config.js:76:18
    at /Users/.../dev/eui-starter/node_modules/next/dist/compiled/webpack/bundle5.js:56152:21
    at deprecated (node:internal/util:89:15)
    at handleExternals (/Users/.../dev/eui-starter/node_modules/next/dist/compiled/webpack/bundle5.js:56300:8)
    at next (/Users/.../dev/eui-starter/node_modules/next/dist/compiled/webpack/bundle5.js:56278:9)
    at handleExternals (/Users/.../dev/eui-starter/node_modules/next/dist/compiled/webpack/bundle5.js:56283:7)
    at /Users/.../dev/eui-starter/node_modules/next/dist/compiled/webpack/bundle5.js:56380:5
    at Hook.eval [as callAsync] (eval at create (/Users/.../dev/eui-starter/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), <anonymous>:37:1)
error Command failed with exit code 1.

It seems that html-webpack-plugin is the dependency that's causing this problem

Anyone have ideas for how to get around this?

I've tried specifying a resolution in package.json but no change:

  "resolutions": {
    "html-webpack-plugin": "5.3.2"
  },

Mentioned this in their adoption thread: vercel/next.js#23498 (reply in thread)

Please update the starter template with eui 23.1.0

CodeBlock not render properly (Colors)!

codeBlock keyword element are getting separately to get styles from css,

Any Plans to Deprecate React Ace and Migrate to Next JS 11 ? (Webpack 5)

I am struggling here to make it work with the latest from Next js. I just don't get how i can migrate next.config.js to webpack 5. Nothing works. tried all the syntax and functions to exclude React Ace but it just doesn't works. Any help would be greatly appreciated.

regeneratorRuntime is not defined

It seems, that by adding EUI Components, other Objects are not defined.

E.g. if you add a <EuiDataGrid /> anywhere, you'll get:

error - node_modules/@elastic/eui/es/components/datagrid/utils/scrolling.js (74:0) @ eval
ReferenceError: regeneratorRuntime is not defined

I'm sure there any much more EUI Components which different missing Objects.
What's the workflow for dealing with this issue?

Bad-precaching-response with themes/min.css when trying to use EUI next.js Starter for PWA

I'm using EUI's Next.js starter and am trying to make this into a PWA -- here is the repo. I haven't done anything crazy different from the EUI starter. Upon running npm run build; npm run start I get
workbox-030153e1.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost:3000/public/themes/eui_theme_amsterdam_dark.e7b2d22ec11f782218ad.min.css","status":404}

Which I think results the PWA audit in Lighthouse to fail:

I've tried excluding the themes/ folder from the caching step but this hasn't worked.

Any ideas?

Thanks in advanced!

Error using EuiHeaderBreadcrumbs

Get error "ReferenceError: window is not defined"
Solved:

import dynamic from 'next/dynamic';

const EuiHeaderBreadcrumbs = dynamic(
() => import('@elastic/eui').then(mod => mod.EuiHeaderBreadcrumbs),
{
ssr: false,
}
);

Cross Ref: Error 'Document is not defined...'

elastic/eui#4807

Update to EUI version 31

It looks like this starter is not on the latest version of EUI. Would it be possible to update to version 31?

Add new help page - How we prototype at Elastic

Some colleagues have asked what the recommended way to create a prototype and deploy it to share. So I thought it would be great to add a new page providing some guidance:

• How to fork the prototype into a new private repo
• How to set up a vercel preview

Flash of unstyled content when loading from server

When the page is opened, the page layout is normal, why the page is re-rendered once again.

EUI v63.0.0 is normal, All new versions have this problem.

CodeSandbox template doesn't work

The CodeSandbox template doesn't work: https://codesandbox.io/s/github/elastic/next-eui-starter.

Warning: Did not expect server HTML to contain a <path> in <svg>.

"dependencies": {
  "@elastic/datemath": "^5.0.3",
  "@elastic/eui": "^30.5.1",
  "@next/bundle-analyzer": "^10.0.7",
  "glob": "^7.1.6",
  "moment": "^2.29.1",
  "next": "^10.0.7",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "sass": "^1.29.0",
  "typescript-plugin-css-modules": "^3.0.1"
},
"devDependencies": {
  "@types/node": "^14.14.10",
  "@typescript-eslint/eslint-plugin": "^4.9.0",
  "@typescript-eslint/parser": "^4.9.0",
  "copy-webpack-plugin": "^6.4.1",
  "eslint": "^7.14.0",
  "eslint-config-prettier": "^6.15.0",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-prefer-object-spread": "^1.2.1",
  "eslint-plugin-prettier": "^3.2.0",
  "eslint-plugin-react": "^7.21.5",
  "eslint-plugin-react-hooks": "^4.2.0",
  "iniparser": "^1.0.5",
  "null-loader": "^4.0.1",
  "prettier": "^2.2.1",
  "serve": "^11.3.2",
  "typescript": "^4.1.2",
  "webpack": "^4.45.0"
}

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:67 Warning: Did not expect server HTML to contain a <path> in <svg>.
    at svg
    at EuiIconEmpty (webpack-internal:///./node_modules/@elastic/eui/es/components/icon/assets/empty.js:14:20)
    at EuiIcon (webpack-internal:///./node_modules/@elastic/eui/es/components/icon/icon.js:559:5)
    at a
    at EuiHeaderLogo (webpack-internal:///./node_modules/@elastic/eui/es/components/header/header_logo.js:43:28)
    at div
    at EuiFlexItem (webpack-internal:///./node_modules/@elastic/eui/es/components/flex/flex_item.js:41:23)
    at div
    at EuiFlexGroup (webpack-internal:///./node_modules/@elastic/eui/es/components/flex/flex_group.js:81:23)
    at AppLogo (webpack-internal:///./src/components/chrome/index.tsx:43:22)
    at div
    at EuiPageSideBar (webpack-internal:///./node_modules/@elastic/eui/es/components/page/page_side_bar/page_side_bar.js:37:23)
    at main
    at EuiPageBody (webpack-internal:///./node_modules/@elastic/eui/es/components/page/page_body/page_body.js:40:23)
    at div
    at EuiPage (webpack-internal:///./node_modules/@elastic/eui/es/components/page/page.js:43:23)
    at Chrome (webpack-internal:///./src/components/chrome/index.tsx:120:24)
    at EuiApp (webpack-internal:///./src/pages/_app.tsx:38:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)

Flash of unstyled content

Flash of unstyled content in ubuntu. What is the fix?

EuiNavDrawer isLocked prop does not shift main content to the right

What

When you pass isLocked to the EuiNavDrawer, you expect the drawer to be stuck and expanded, as explained by this PR and on this forum post.

When expanded, the nav drawer should shift the main page content to the right, rather than having the nav drawer overlay the page content.

However, the content does not shift over. Instead, the nav drawer is fixed on top of the page.

Expected Behavior

It should look like this:

Actual Behavior

It actually looks this:

Reproducible Example

• Open this repository's example on Code Sandbox
• Open src/components/chrome/index.tsx and pass isLocked prop to the EuiNavDrawer

Thanks for the great work on this. Looking forward to hearing back from you!

Modules that import @elastic/eui are failing

We use bit.dev to manage common components. These common components have @elastic/eui as a dependency and are built and packaged by webpack. Example build module here:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TestComponent = void 0;
const react_1 = __importDefault(require("react"));
const eui_1 = require("@elastic/eui");
function TestComponent({ text }) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("p", null, "Test Component"),
        react_1.default.createElement(eui_1.EuiText, null, `EUI: ${text}`)));
}
exports.TestComponent = TestComponent;
//# sourceMappingURL=test-component.js.map

The package has worked great for us up until this point, but unfortunately the webpack config to provide stubs for react-ace doesn't work when the elastic dependency is requested in an imported module.

Any ideas how we can get this to work?

Overriding default themes

Apologies if this is a silly question, but how might one override a default theme?

Initial thoughts

In no particular order

• I like how you handled theme switching
• I'd prefer to see Chrome refactored into multiple function components
• The style prop passed to EuiHeaderSectionItem in Chrome should probably be moved to the scss file and referenced with a className, to match the existing pattern.
• The MyComponent link ("Go to page 2") throws a React warning as NextJsLink adds a ref to its children. Is there a way to programatically trigger navigations in Next similar to https://github.com/elastic/eui/blob/master/wiki/react-router.md#2-adapter-component ?

Unable to compile to serverless target

Hi,

When trying to compile to serverless I get the following errors:

(node:61067) UnhandledPromiseRejectionWarning: Error: TypeError: fn is not a function at /Users/Jack/Desktop/app/next.config.js:42:19 at handleExternals (/Users/Jack/Desktop/appnode_modules/webpack/lib/ExternalModuleFactoryPlugin.js:78:17) at next (/Users/Jack/Desktop/app/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:66:9) at handleExternals (/Users/Jack/Desktop/app/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:71:7) at /Users/Jack/Desktop/app/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:101:5 at /Users/Jack/Desktop/app/node_modules/webpack/lib/NormalModuleFactory.js:400:5 at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/Jack/Desktop/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1) at AsyncSeriesWaterfallHook.lazyCompileHook (/Users/Jack/Desktop/app/node_modules/tapable/lib/Hook.js:154:20) at NormalModuleFactory.create (/Users/Jack/Desktop/app/node_modules/webpack/lib/NormalModuleFactory.js:381:28) at /Users/Jack/Desktop/app/node_modules/webpack/lib/Compilation.js:1063:18 at Semaphore.acquire (/Users/Jack/Desktop/app/node_modules/webpack/lib/util/Semaphore.js:29:4) at Compilation._addModuleChain (/Users/Jack/Desktop/app/node_modules/webpack/lib/Compilation.js:1062:18) at Compilation.addEntry (/Users/Jack/Desktop/app/node_modules/webpack/lib/Compilation.js:1164:8) at /Users/Jack/Desktop/app/node_modules/webpack/lib/SingleEntryPlugin.js:46:17 at AsyncParallelHook.eval [as callAsync] (eval at create (/Users/Jack/Desktop/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1) at AsyncParallelHook.lazyCompileHook (/Users/Jack/Desktop/app/node_modules/tapable/lib/Hook.js:154:20) (node:61067) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:61067) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am unable to provide any more context, sorry!

Inconsistent link opening on the home page

There are four links on the homepage the first three open in a new tab/window but the 4th link opens in the same window. As these all go to a different site is the pattern to open all off-site links in a new window?

Could we be consistent with the 4th link to https://codesandbox.io/