Loading Blueprint 5 in nextjs/typescript

[switz]

Environment

• Package version(s): next (as of may 13th)
• Browser and OS versions: next

Question

When I try to load blueprint 5 into my app, I get the following errors:

- wait compiling /(bare)/bare-streaming/page (client and server)...
- error ../../node_modules/@blueprintjs/icons/lib/cjs/generated/components/add-clip.d.ts
Module parse failed: Unexpected token (2:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import * as React from "react";
> import type { SVGIconProps } from "../../svgIconProps";
| export declare const AddClip: React.FC<SVGIconProps>;
| export default AddClip;

Import trace for requested module:
../../node_modules/@blueprintjs/icons/lib/cjs/generated/components/add-clip.d.ts
../../node_modules/@blueprintjs/icons/lib/cjs/generated/components/ sync ^\.\/.*$
../../node_modules/@blueprintjs/icons/lib/cjs/iconLoader.js
../../node_modules/@blueprintjs/icons/lib/cjs/index.js
../../node_modules/@blueprintjs/icons/lib/cjs/generated/index.js
../../node_modules/@blueprintjs/core/lib/cjs/components/button/buttons.js
../../node_modules/@blueprintjs/core/lib/cjs/components/index.js
../../node_modules/@blueprintjs/core/lib/cjs/index.js
./src/app/providers.tsx
- wait compiling /_error (client and server)...
- error ../../node_modules/@blueprintjs/icons/lib/cjs/generated/components/add-clip.d.ts
Module parse failed: Unexpected token (2:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import * as React from "react";
> import type { SVGIconProps } from "../../svgIconProps";
| export declare const AddClip: React.FC<SVGIconProps>;
| export default AddClip;

Import trace for requested module:
../../node_modules/@blueprintjs/icons/lib/cjs/generated/components/add-clip.d.ts
../../node_modules/@blueprintjs/icons/lib/cjs/generated/components/ sync ^\.\/.*$
../../node_modules/@blueprintjs/icons/lib/cjs/iconLoader.js
../../node_modules/@blueprintjs/icons/lib/cjs/index.js
../../node_modules/@blueprintjs/icons/lib/cjs/generated/index.js
../../node_modules/@blueprintjs/core/lib/cjs/components/button/buttons.js
../../node_modules/@blueprintjs/core/lib/cjs/components/index.js
../../node_modules/@blueprintjs/core/lib/cjs/index.js
./src/app/providers.tsx

It seems like it's trying to load the cjs files even though my app is type: "module" (ESM modules), and on top of that it's loading the .d.ts files via webpack - that seems wrong.

I'm running nextjs and calling my icons dynamically (<Icon name="download" />). I read through all the new docs. Any direction here?

[switz]

I got it running by ignoring those files:

      config.module.rules.push(
        {
          test: /(\.d\.ts|\.map)$/,
          loader: 'ignore-loader'
        }
      );

But, my icons are showing up upside down:

[adidahiya]

@switz thanks for giving v5 a try. I have noticed some issues loading v5 icons with some build systems, for example with Vite: #6151

I will try to repro your webpack nextjs issue ASAP using a fork of the code sandbox linked in that PR. But if you have a chance to create a bug repro with webpack nextjs + code sandbox before I am able to, please link it here.

[adidahiya]

@switz how are you rendering those icons which turn out upside-down?

I did notice this upside-down display issue with icons rendered from static markup which was compatible with Blueprint v4.x. But it doesn't happen if the icon SVG paths were loaded using the new IconLoader. See #6159

[switz]

Here's a reproduction: https://codesandbox.io/p/sandbox/condescending-cherry-zd9t8l?file=%2Fapp%2Fpage.tsx%3A9%2C1

- wait compiling...
- error ./node_modules/@blueprintjs/icons/lib/cjs/generated/components/add-clip.d.ts
Module parse failed: Unexpected token (2:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import * as React from "react";
> import type { SVGIconProps } from "../../svgIconProps";
| export declare const AddClip: React.FC<SVGIconProps>;
| export default AddClip;

Here's a reproduction of it "working" with nextjs: https://codesandbox.io/p/sandbox/objective-paper-qb8y0h?file=%2Fapp%2Fpage.tsx%3A1%2C1

You can see caret-down is upside down. It's just a normal render as <Icon icon="caret-down" />. I included the nextjs config to ignore types/.map – but clearly those shouldn't be imported in the cjs/npm output.

Let me know if I can provide more.

[adidahiya]

@switz is this still a problem with the latest v5.0.0-beta releases?

[adidahiya]

I was able to get Blueprint v5 icons working with Next.js 13 and React 18, you can see a demo Stackblitz here: https://stackblitz.com/edit/blueprint-v5-react-18-nextjs

Going to close this out as fixed, but let me know if you continue to experience issues.