Julien-Hery commented 2 years ago

🐞 Pattern bug report

Where did you experience this bug ?

[ ] On sketch file
[ ] On Documentation
[x] On source code

Is this a regression?

I don't know

Description

React icons can't be imported in standard React application created with create-react-app

🔬 Steps to reproduce the issue

Create react app with create-react-app : npx create-react-app cra-mozaic --template typescript
Add mozaic icons : npm install @mozaic-ds/icons
Import any mozaic icon in a component and use it : import {FullScreen48} from '@mozaic-ds/icons/react'
See error

🔥 Exception or Error

ERROR in ./node_modules/@mozaic-ds/icons/react/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: [...]/node_modules/@mozaic-ds/icons/react/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:3):

   7 |
   8 | export const FullScreen16 = ({ fill, size = '1rem', ...rest }) => (
>  9 |   <svg
     |   ^
  10 |     aria-hidden="true"
  11 |     width={size}
  12 |     height={size}

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
    at instantiate ([...]/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor ([...]/node_modules/@babel/parser/lib/index.js:366:12)
    at Parser.raise ([...]/node_modules/@babel/parser/lib/index.js:3453:19)
    at Parser.expectOnePlugin ([...]/node_modules/@babel/parser/lib/index.js:3510:18)
    at Parser.parseExprAtom ([...]/node_modules/@babel/parser/lib/index.js:13215:18)
    at Parser.parseExprSubscripts ([...]/node_modules/@babel/parser/lib/index.js:12785:23)
    at Parser.parseUpdate ([...]/node_modules/@babel/parser/lib/index.js:12764:21)
    at Parser.parseMaybeUnary ([...]/node_modules/@babel/parser/lib/index.js:12734:23)
    at Parser.parseMaybeUnaryOrPrivate ([...]/node_modules/@babel/parser/lib/index.js:12525:61)
    at Parser.parseExprOps ([...]/node_modules/@babel/parser/lib/index.js:12532:23)

🌍 Your Environment

Styleguide Version:

1.40.0

Anything else relevant? React projects should be able to import icons without any specific Babel plugin enabling "experimental" syntax

Julien-Hery commented 2 years ago

Looking at @babel/preset-react docs, the Babel Node API can be used to transform the actual code into a usable one with something like :

require("@babel/core").transformSync("<code>", {
  presets: ["@babel/preset-react"],
})

I tried using it and it works, I can import icons generated by babel. I'll make a PR

tiloyi commented 2 years ago

Fixed by https://github.com/adeo/mozaic-design-system/pull/1185

adeo / mozaic-design-system

[icons] : React icons are not usable by basic create-react-app project #1184