<p dir="auto">Module parse failed: Unexpected character '@' (2:0)<br>
You may need an appropriate loader to handle this file type.<br>
| /* roboto-100normal - latin <em>/<br>
| <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/font-face/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/font-face">@font-face</a> {<br>
|   font-family: 'Roboto';<br>
|   font-style: normal;<br>
@ ./pages/index.tsx 3:0-25<br>
@ multi ./pages/index.tsx<br>
at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/next/dist/server/build/index.js:162:31<br>
at runWithDependencies (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:154:4)<br>
at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:1126:9<br>
at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:473:16<br>
at iteratorCallback (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:1050:13)<br>
at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:958:16<br>
at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:1123:13<br>
at runCompilers (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:96:47)<br>
at fn (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:101:6)<br>
at compiler.run (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:150:5)<br>
at emitRecords.err (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:265:13)<br>
at Compiler.emitRecords (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:371:38)<br>
at emitAssets.err (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:258:10)<br>
at applyPluginsAsyncSeries1.err (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:364:12)<br>
at next (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/tapable/lib/Tapable.js:218:11)<br>
at Compiler.compiler.plugin (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)<br>
errors:<br>
[ '(client) ./node_modules/typeface-roboto/index.css\nModule parse failed: Unexpected character '@' (2:0)\nYou may need an appropriate loader to handle this file type.\n| /</em> roboto-100normal - latin <em>/\n| <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/font-face/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/font-face">@font-face</a> {\n|   font-family: 'Roboto';\n|   font-style: normal;\n @ ./pages/index.tsx 3:0-25\n @ multi ./pages/index.tsx',<br>
'(server) ./node_modules/typeface-roboto/index.css\nModule parse failed: Unexpected character '@' (2:0)\nYou may need an appropriate loader to handle this file type.\n| /</em> roboto-100normal - latin */\n| <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/font-face/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/font-face">@font-face</a> {\n|   font-family: 'Roboto';\n|   font-style: normal;\n @ ./pages/index.tsx 3:0-25\n @ multi ./pages/index.tsx' ],<br>
warnings: [] }</p>
<h1 dir="auto">i am facing issue in importing the typeface-roboto font Types in the next.js file.<br>
Error: Module parse failed: Unexpected character '@' (2:0)<br>
You may need an appropriate loader to handle this file type.<br>
| /* roboto-100normal - latin */<br>
| <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/font-face/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/font-face">@font-face</a> {<br>
|   font-family: 'Roboto';<br>
|   font-style: normal;<br>
at Object. (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:6649:7)<br>
at <strong>webpack_require</strong> (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:23:31)<br>
at Object. (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:6552:23)<br>
at <strong>webpack_require</strong> (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:23:31)<br>
at Object.module.exports.Object.defineProperty.value (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:161:18)<br>
at <strong>webpack_require</strong> (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:23:31)<br>
at /home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:70:18<br>
at Object. (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:73:10)<br>
at Module._compile (internal/modules/cjs/loader.js:654:30)<br>
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)</h1>
<p dir="auto">This is my next.config.js</p>
<p dir="auto">module.exports = {<br>
webpack: (config, options) =&gt; {<br>
config.module.rules.push({ test: /.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });<br>
config.module.rules.push({<br>
test: /.+(ts|tsx)$/,<br>
use: [<br>
//	defaultLoaders.babel,<br>
{ loader: 'ts-loader', options: { transpileOnly: true } }<br>
],<br>
exclude: /node_modules/,<br>
}, );<br>
return config;<br>
}<br>
}</p>