What should be the appropriate loader to use when using paste?

[jquinterog]

Hi team!

I'm trying migrate a project to paste, but at the moment of adding a paste component, the project starts failing to compile with the following error

ERROR in ./node_modules/@twilio-paste/icons/esm/helpers/IconWrapper.js
Module parse failed: /Users/user/workspace/project/node_modules/@twilio-paste/icons/esm/helpers/IconWrapper.js Unexpected token (1:125)
You may need an appropriate loader to handle this file type.
| import*as s from"react";import{Box as i,safelySpreadBoxProps as a}from"@twilio-paste/box";const o=({display:e,color:r,size:p,...t})=>s.createElement(i,{...a(t),lineHeight:"lineHeight0",display:e,color:r,size:p});o.defaultProps={as:"span",display:"block",color:"currentColor",size:"sizeIcon30"},o.displayName="IconWrapper";export{o as IconWrapper};
| 
 @ ./node_modules/@twilio-paste/icons/esm/CloseIcon.js 1:75-127
 @ ./node_modules/@twilio-paste/alert/dist/index.es.js
 @ ./node_modules/@twilio-paste/core/dist/index.js
 @ ./src/ts/components/pages/MailersPage.tsx
 @ ./src/ts/containers/pages/MailersPageContainer.tsx
 @ ./src/ts/routes.ts
 @ ./src/ts/root.tsx
 @ ./src/ts/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3020 webpack/hot/dev-server webpack-dev-server/client?http://localhost:3020 webpack/hot/only-dev-server ./src/ts/index.tsx

I'm currently using ts-loader

config.module.loaders.push({
	test: /\.tsx?$/,
	loader: 'ts-loader',
	exclude: ['node_modules']
});

In case it helps, it happens when I add a component, not in any previous step (adding paste, importing it)
Do you know what loader should I use? or what else could it be?

[TheSisb]

Hi @jquinterog,

So the error is coming from ERROR in ./node_modules/@twilio-paste/icons/esm/helpers/IconWrapper.js. Two important points here:

1. This is a path inside node_modules
2. This is an esm (es module) import of our icons. We also have a cjs import for icons. More on that in a bit.

Your loader config for ts-loader ignores the node_modules path:

exclude: ['node_modules']

This is fine, because we aren't importing a Typescript file here. But this is an import of an ES Module, and that usually needs transpilation.

You can fix this in two ways:

1. Change your icon imports paths from @twilio-paste/icons/esm/... to @twilio-paste/icons/cjs/...
2. Or, you can add a babel-loader to transpile files from within the @twilio-paste/icons/esm directory.

Let us know what ends up working for you!

[jquinterog]

Thanks for the answer @TheSisb

For the first one, I never specified the import path of icons, as far as I can see it's already set in some files such as node_modules/@twilio-paste/toast/dist/index.es.js

For the second one, I tried adding the loader just for that directory but the issue persists.

config.module.loaders.push({
	test: /\.js?$/,
	loader: 'babel-loader',
	include: ['node_modules/@twilio-paste/icons/esm']
});

[TheSisb]

Shucks, I was hoping that would work :P. I haven't used Webpack in a little while so I'm stumped as to what it could be. Any chance you can zip+upload a minimal repro so that I can take a look?

[loreina]

Closing this discussion due to inactivity. If you'd like to re-open it, feel free to reply here.

[trung-nguyen-phx]

Hi @loreina , I'm facing the same issue.
Here is the error

Here is my babel config:

Could you please advise how I could resolve it?