Hi,
I am new to react and I am having a react application and using okta libraries for authentication.
I am having an import statement as below:
import ‘@okta/okta-signin-widget/dist/css/okta-sign-in.min.css’;
ERROR in ./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected “{”.
╷
2 │ import API from “!../…/…/…/style-loader/dist/runtime/injectStylesIntoStyleTag.js”;
│ ^
╵
node_modules@okta\okta-signin-widget\dist\css\okta-sign-in.min.css 2:91 root stylesheet
SassError: SassError: expected “{”.
╷
2 │ import API from “!../…/…/…/style-loader/dist/runtime/injectStylesIntoStyleTag.js”;
│ ^
╵
node_modules@okta\okta-signin-widget\dist\css\okta-sign-in.min.css 2:91 root stylesheet
at Object.loader (D:\Word-CDDP\Generation2-NewBranch\QE-CD-DevCompress\QE-CD\Dev\node_modules\sass-loader\dist\index.js:56:14)
@ ./node_modules/@okta/okta-signin-widget/dist/css/okta-sign-in.min.css 8:6-214 22:17-24 26:0-184 26:0-184 27:22-29 27:33-47 27:50-64
Following is the webpack configuration :
module.exports =
// smp.wrap(
{
module: {
rules: [
{
test: /.css$/,
use: [‘style-loader’, ‘css-loader’],
exclude: /.module.css$/,
},
{
test: /.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 10000,
},
},
],
},
{
test: /.(s(a|c)ss)$/,
use: [‘style-loader’, ‘css-loader’, ‘sass-loader’],
},
],
},
plugins: [
// new BundleAnalyzerPlugin(),
new CleanWebpackPlugin(),
],
};