svgr | Transform SVGs into React components | Animation library

You need to have viewBox to make the SVG scalable via classes.

From the devtools I saw the scale of your SVG as 124:24. So keep the same aspect ratio, I used, viewBox="0 0 124 24", where first two zeros specify x/y coord in SVG space.

• Runnable Demo: https://codesandbox.io/s/stackoverflow-answer-on-svg-scaling-with-tailwind-css-qwdhzl?file=/src/App.js:24-3260
• Tailwind Play: https://play.tailwindcss.com/QAe9s28wfr

The output filenames are configured in Rollup with build.rollupOptions:

1. Set output.assetFileNames to configure the asset filenames (for media files and stylesheets).

2. Set output.chunkFileNames to configure the vendor chunk filenames.

3. Set output.entryFileNames to configure the index.js filename.

I looked at the docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here. That's why you are getting the error.

So you simply need to provide the type of your props like so:

OK, I feel sort of dumb, but, on the other hand, this does not seem to be super well-documented.

It turns out, if your webpack and tsconfig are both set up to compile/build into the same directory, and your tsconfig is set to emit declarations, AND your webpack library is set to target the same entrypoint as the main entry in your package.json (e.g., index.js), it will work correctly.

So--

package.json:

craco's Github readme, states that it is supporting Create React App (CRA) 4.*. By this statement, I'm assuming CRA 5 is not officially supported by craco.

However, this repository utilizes both CRA 5 and craco (but I have not verified that it is working). Use this repository to compare your setup (after verifying that the linked repositry is working), and try different settings/configs to see if you get further.

It could be missing a config file for babel. Could you try to add babel config file and add this code inside it( Refer to babel config link https://babeljs.io/docs/en/config-files)

This is painfully embarassing but I figure I'll share this just so that anyone as oblivious as me can find this - the component file just didn't have a .js file extension, hence why webpack didnt know what to do with it.

Node is currently treating your .js file as CommonJS. You need to tell Node to treat it as an ES module.

Try adding "type": "module" in your package.json file.

You can place it anywhere at the top level. E.g.:

First make sure you've installed the correct bundle analyzer. Then edit your next.config.js and try to organise your code the recommended way: