Issue 1:
Module parse failed: Unexpected character '@' (2:0)

You may need an appropriate loader to handle this file type.

| /* roboto-100normal - latin /

| @font-face {

| font-family: 'Roboto';

| font-style: normal;

@ ./pages/index.tsx 3:0-25

@ multi ./pages/index.tsx

at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/next/dist/server/build/index.js:162:31

at runWithDependencies (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:154:4)

at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:1126:9

at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:473:16

at iteratorCallback (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:1050:13)

at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:958:16

at /home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/async/dist/async.js:1123:13

at runCompilers (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:96:47)

at fn (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:101:6)

at compiler.run (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/MultiCompiler.js:150:5)

at emitRecords.err (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:265:13)

at Compiler.emitRecords (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:371:38)

at emitAssets.err (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:258:10)

at applyPluginsAsyncSeries1.err (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/Compiler.js:364:12)

at next (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/tapable/lib/Tapable.js:218:11)

at Compiler.compiler.plugin (/home/muhammad/be-projects/bluerain-app-dukaan-admin/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)

errors:

[ '(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| / roboto-100normal - latin /\n| @font-face {\n| font-family: 'Roboto';\n| font-style: normal;\n @ ./pages/index.tsx 3:0-25\n @ multi ./pages/index.tsx',

'(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| / roboto-100normal - latin */\n| @font-face {\n| font-family: 'Roboto';\n| font-style: normal;\n @ ./pages/index.tsx 3:0-25\n @ multi ./pages/index.tsx' ],

warnings: [] }

Issue 2:
i am facing issue in importing the typeface-roboto font Types in the next.js file.

Error: Module parse failed: Unexpected character '@' (2:0)

You may need an appropriate loader to handle this file type.

| /* roboto-100normal - latin */

| @font-face {

| font-family: 'Roboto';

| font-style: normal;

at Object. (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:6649:7)

at webpack_require (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:23:31)

at Object. (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:6552:23)

at webpack_require (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:23:31)

at Object.module.exports.Object.defineProperty.value (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:161:18)

at webpack_require (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:23:31)

at /home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:70:18

at Object. (/home/muhammad/be-projects/bluerain-app-dukaan-admin/.next/dist/bundles/pages/index.js:73:10)

at Module._compile (internal/modules/cjs/loader.js:654:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)

This is my next.config.js

module.exports = {

webpack: (config, options) => {

config.module.rules.push({ test: /.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });

config.module.rules.push({

test: /.+(ts|tsx)$/,

use: [

//	defaultLoaders.babel,

{ loader: 'ts-loader', options: { transpileOnly: true } }

],

exclude: /node_modules/,

}, );

return config;

}

}