Seeing this warning

[ycaoT]

Not sure if anyone has asked the same question, when running local server, sees the following:

warn - ./node_modules/@twilio-paste/style-props/dist/index.es.js
Should not import the named export 'props' (imported as 'pe') from default-exporting module (only default export is available soon)

[TheSisb]

Hi @ycaoT,

Sounds like the warning is complaining about named exports (import {Theme} from '@twilio-paste/core/theme';) rather than default exports (import Theme from '@twilio-paste/core/theme';). All Paste packages are exported as named exports, so please make sure you have the { } around the imported values.
Looks like this is a warning coming from your environment so we are unable to provide much guidance. Warnings typically don't halt the build so it may be fine too, maybe?

Please do report back if you discover anything.

[ycaoT]

@TheSisb This is the line where giving the warning, not from my codes.

import{props as pe}from"@twilio-paste/design-tokens/dist/tokens.raw.json"

[SiTaggart]

@ycaoT we're really interested to hear what you're using design tokens directly for, would you might sharing your use case with us please?

As for the import, as it's JSON you'll likely need to import it as

import * as pe from "@twilio-paste/design-tokens/dist/tokens.raw.json"

[ycaoT]

@SiTaggart, that is not from my codes. I am wondering somewhere from Paste is doing that, however I don't have the source code of Paste in my local.

[SiTaggart]

I see now. Can you give more details?

Is it a typescript warning? A eslint warning? A browser console warning? Whats the setup?

[amPerl]

Not sure of OP's context, but I am seeing this in the browser in dev mode (haven't checked prod builds) on the paste next.js (typescript) template. I'm also seeing SSR-hydrate id mismatches on anchors' external link icons.

[ycaoT]

I am using the same: the paste next.js (typescript) template. The warning comes from my terminal running the local dev server.

[SiTaggart]

Perfect context, we'll investigate and get back to you.

Clarifying question, is this blocking work or just a warning?

[ycaoT]

@SiTaggart it's not blocking anything, but just annoying. Seeing this in both browser console and server log.

[zahnster]

@ycaoT we're still investigating a course of action, but I did want to provide you with some updates:

• We discovered that this issue is linked with Webpack v5, which is what the most recent Next.js version uses by default.
• We are working on an update to our code so this warning does not display.

We are hoping to have a resolution on this sooner than later. Apologies for the Terminal noise, and thanks for bringing this to our attention!

[loreina]

Marking this as answered due to inactivity.