error: You may need an additional loader to handle the result of these loaders in webpack

[pincman]

build by docusaurus and react

webpack config

 plugins: [
                        new ArcoWebpackPlugin(),
                        require('unplugin-icons/webpack')({
                            prefix: 'Icons',
                            compiler: 'jsx',
                            jsx: 'react',
                        }),
                    ],

error

Module parse failed: Unexpected token (3:34)
File was processed with these loaders:
 * ./node_modules/.pnpm/unplugin@0.3.3/node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
| import * as React from "react";
| 
> const simpleIconsGitea = props => <svg width="1.2em" height="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" {...props}><path fill="currentColor" d="M4.209 4.603c-.247 0-.525.02-.84.088c-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768c1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367c2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068c0 0 2.107-4.471 2.107-8.823c-.042-1.318-.367-1.55-.443-1.627c-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17c-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422l-.529 1.075a.686.686 0 0 0-.614.359a.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527a.687.687 0 0 0 .347.763a.686.686 0 0 0 .867-.206a.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02a.657.657 0 0 0 .271-.137a8.826 8.826 0 0 1 1.016.512a.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569c-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477a.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431c.19-.397.515-1.16.515-1.16c.035-.066.218-.394.103-.814c-.095-.435-.48-.638-.48-.638c-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062l2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657c-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08l-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z" /></svg>;
| 
| export default simpleIconsGitea;

[woqly]

Faced the same issue. I followed this one. Turned out you need to add a .jsx extension in each import statements.
#103 (comment)

and this one fixed the typescript issue with importing them.

// tsconfig.json
  "compilerOptions": {
    "types": ["unplugin-icons/types/react"]
  },

[Gerry Surya]

Faced the same issue. I followed this one. Turned out you need to add a .jsx extension in each import statements. #103 (comment)

and this one fixed the typescript issue with importing them.

// tsconfig.json
  "compilerOptions": {
    "types": ["unplugin-icons/types/react"]
  },

Doesn't work for me :(
I've tried import with or without .jsx

---

CRA React 17 + Webpack 5.75.0

Compiled with problems:

ERROR in ./_virtual_~icons%2Fmdi%2Ffence.jsx 4:26

Module parse failed: Unexpected token (4:26)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/unplugin/dist/webpack/loaders/load.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
| import * as React from "react";
> const mdiFence = props => <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" {...props}><path fill="currentColor" d="M9 9v2H7V9H5v2H3V9H1v12h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2V9h-2v2h-2V9h-2v2h-2V9h-2v2h-2V9H9m-6 4h2v4H3v-4m4 0h2v4H7v-4m4 0h2v4h-2v-4m4 0h2v4h-2v-4m4 0h2v4h-2v-4Z" /></svg>;
| export default mdiFence;
| 

[5o50]

Same issue here

importing with .jsx syntax does not solve the issue

NextJS 13 with webpack 5

any fix ?

../../_virtual_~icons%2Fgg%2Fprofile.jsx
Module parse failed: Unexpected token (2:27)
File was processed with these loaders:
 * ../../node_modules/unplugin-icons/node_modules/unplugin/dist/webpack/loaders/load.js
You may need an additional loader to handle the result of these loaders.
| import * as React from "react";
> const ggProfile = props => <svg className="icon" viewBox="0 0 24 24" width="1em" height="1em" {...props}><g fill="currentColor" fillRule="evenodd" clipRule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0Zm-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0Z" /><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1ZM3 12c0 2.09.713 4.014 1.908 5.542A8.986 8.986 0 0 1 12.065 14a8.984 8.984 0 0 1 7.092 3.458A9 9 0 1 0 3 12Zm9 9a8.963 8.963 0 0 1-5.672-2.012A6.992 6.992 0 0 1 12.065 16a6.991 6.991 0 0 1 5.689 2.92A8.964 8.964 0 0 1 12 21Z" /></g></svg>;
| export default ggProfile;

[Anthony Fu]

We temporarily close this due to the lack of enough information.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required

[Vitali Bakhur]

A lot of information in this issue about this problem here #94 and here unjs/unplugin#32