ModuleParseError: Module parse failedYou may need an additional loader to handle the result of these loaders

Question

Hello Awesome Developers, I am working on storybook upgrade from V.6 to V7.

Now I am facing with issue when i start storybook. I don't understand which loader do i need to import additionally as it was working absolutely fine with storybook v6.

Any help would be appreciated.

Thanks in advance.

99% end closing watch compilationWARN Force closed preview build
ModuleParseError: Module parse failed: Unexpected token (18:0)
File was processed with these loaders:
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| That's all.
| */
> .ngx-datatable.material {
|   background: #fff;
|   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    at handleParseError('node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:982:19')

Broken build, fix the error above.
You may need to refresh the browser.

I've done everything according to the migration guide.

Package.json

{
  "name": "test-ui-kit",
  "version": "13.3.2",
  "scripts": {
    "ng": "ng",
    "postinstall": "husky install && yarn audit:packages && patch-package && ngcc",
    "start:sandbox": "cross-env NODE_OPTIONS=--max_old_space_size=16384 ng serve sandbox --port 4300",
    "bundle:scss": "scss-bundle -c scss-bundle.config.json",
    "copy:scss": "cpy ./ ../../../../dist/@mm-ui/components/resources/ --cwd=projects/ui-components/src/assets --parents ",
    "build": "yarn build:ui-components && yarn bundle:scss && yarn copy:scss && yarn gulp",
    "build:ui-components": "ng build ui-components --configuration production",
    "build:core": "ng build core --configuration production",
    "build:charts": "ng build charts --configuration production",
    "build:types": "cpy ./ ../../dist/@types/mm-ui/ --cwd=projects/types --parents",
    "storybook": "yarn build:types && yarn build && yarn build:core && yarn build:charts && yarn compodoc:json && yarn start:storybook",
    "start:storybook": "cross-env NODE_OPTIONS=--max_old_space_size=16384 ng run ui-kit:start",
    "build:storybook": "cross-env NODE_OPTIONS=--max_old_space_size=16384 ng run ui-kit:build-storybook",
    "test": "jest --maxWorkers=8 --ci --collectCoverage --reporters=default --reporters=jest-junit",
    "test:coverage": "jest --coverage",
    "test:snapshot:update": "jest --updateSnapshot",
    "audit:packages": "yarn audit-ci --config audit-ci.json > .audit-ci.log",
    "audit:full-log": "yarn audit --json > audit-full.log || exit 0",
    "audit:update-allow-list": "yarn audit:full-log && node ./scripts/update-vulnerability-allow-list.js",
    "compodoc:json": "compodoc -e json -d .",
    "audit-ci": "audit-ci --pass-enoaudit --package-manager=yarn",
    "lint:check:ci": "chmod +x scripts/lint-check-pipeline.sh && scripts/lint-check-pipeline.sh",
    "lint:check:pre-commit": "chmod +x scripts/lint-check-pre-commit-hook.sh && scripts/lint-check-pre-commit-hook.sh",
    "lint:fix": "chmod +x scripts/lint-fix-local.sh && scripts/lint-fix-local.sh",
    "format:check:ci": "chmod +x scripts/format-check-pipeline.sh && scripts/format-check-pipeline.sh",
    "format:check:pre-commit": "chmod +x scripts/format-check-pre-commit-hook.sh && scripts/format-check-pre-commit-hook.sh",
    "format:fix": "chmod +x scripts/format-fix-local.sh && scripts/format-fix-local.sh"
  },
  "private": true,
  "license": "UNLICENSED",
  "engines": {
    "node": ">=16.20.0"
  },
  "dependencies": {
    "@angular/animations": "~14.3.0",
    "@angular/cdk": "~14.2.7",
    "@angular/common": "~14.3.0",
    "@angular/compiler": "~14.3.0",
    "@angular/core": "~14.3.0",
    "@angular/forms": "~14.3.0",
    "@angular/platform-browser": "~14.3.0",
    "@angular/platform-browser-dynamic": "~14.3.0",
    "@angular/router": "~14.3.0",
    "@faker-js/faker": "^8.0.2",
    "@ngneat/until-destroy": "8.1.4",
    "@ngx-translate/core": "13.0.0",
    "@sentry/browser": "6.16.1",
    "@sentry/integrations": "6.16.1",
    "@storybook/preset-scss": "^1.0.3",
    "@swimlane/ngx-charts": "20.1.2",
    "@swimlane/ngx-datatable": "20.0.0",
    "angular-imask": "6.2.2",
    "bignumber.js": "9.0.2",
    "bootstrap": "4.6.1",
    "caniuse-lite": "^1.0.30001486",
    "core-js": "3.20.3",
    "dayjs": "1.10.7",
    "esbuild": "0.14.22",
    "lodash": "4.17.21",
    "lost": "9.0.0-1",
    "ngx-bootstrap": "8.0.0",
    "ngx-virtual-scroller": "4.0.3",
    "rxjs": "~6.6.7",
    "storybook-addon-sass-postcss": "^0.1.3",
    "tslib": "^2.4.0",
    "uuid": "3.4.0",
    "xlsx": "0.17.5",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-builders/jest": "^14.0.1",
    "@angular-devkit/build-angular": "^14.2.12",
    "@angular-eslint/builder": "^14.4.0",
    "@angular-eslint/eslint-plugin": "^14.2.11",
    "@angular-eslint/eslint-plugin-template": "^14.2.11",
    "@angular-eslint/template-parser": "^14.2.11",
    "@angular/cli": "~14.2.11",
    "@angular/compiler-cli": "~14.3.0",
    "@angular/language-service": "~14.3.0",
    "@babel/core": "7.22.17",
    "@commitlint/cli": "^17.6.7",
    "@commitlint/config-conventional": "^17.6.7",
    "@compodoc/compodoc": "1.1.18",
    "@ngneat/spectator": "9.0.0",
    "@storybook/addon-console": "^2.0.0",
    "@storybook/addon-essentials": "7.4.0",
    "@storybook/addon-links": "7.4.0",
    "@storybook/addon-mdx-gfm": "^7.4.0",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/angular": "7.4.0",
    "@types/d3-shape": "^3.1.1",
    "@types/jest": "^29.5.1",
    "@types/lodash": "^4.14.195",
    "@types/mm-ui": "file:./projects/types",
    "@types/node": "^14.18.37",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "audit-ci": "5.1.2",
    "autoprefixer": "9.8.8",
    "babel-loader": "9.1.3",
    "badge-maker": "^3.3.1",
    "cpy-cli": "4.1.0",
    "cross-env": "7.0.3",
    "css-loader": "6.8.1",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.2",
    "eslint-plugin-jsdoc": "^46.4.3",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-storybook": "^0.6.13",
    "gulp": "4.0.2",
    "gulp-postcss": "9.0.1",
    "husky": "7.0.4",
    "jest": "^28.1.3",
    "jest-extended": "^3.2.4",
    "jest-junit": "13.0.0",
    "jest-preset-angular": "^12.0.0",
    "jest-sonar-reporter": "2.0.0",
    "ng-mocks": "14.10.0",
    "ng-packagr": "14.2.2",
    "patch-package": "6.4.7",
    "postcss": "^8.4.29",
    "postcss-scss": "4.0.8",
    "prettier": "^2.7.1",
    "pretty-quick": "3.1.3",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "sass": "^1.66.1",
    "sass-loader": "13.3.2",
    "scss-bundle": "3.1.2",
    "storybook": "^7.4.0",
    "storybook-addon-designs": "^7.0.0-beta.2",
    "style-loader": "3.3.3",
    "stylelint": "^14.16.1",
    "stylelint-config-prettier-scss": "^0.0.1",
    "stylelint-config-standard-scss": "^6.1.0",
    "ts-jest": "^28.0.8",
    "ts-node": "10.5.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/projects/ui-components/src/setupJest.ts"
    ],
    "globals": {
      "ts-jest": {
        "isolatedModules": true,
        "allowSyntheticDefaultImports": true,
        "tsconfig": "<rootDir>/projects/ui-components/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    },
    "modulePathIgnorePatterns": [
      "<rootDir>/dist/"
    ],
    "moduleNameMapper": {
      "^ui-lib/(.*)$": "<rootDir>/projects/ui-components/src/lib/$1",
      "^@mm-ui/components/(.*)$": "<rootDir>/dist/@mm-ui/components/$1",
      "^@mm-ui/components$": "<rootDir>/projects/ui-components/src/public-api.ts"
    },
    "testEnvironment": "jsdom",
    "snapshotSerializers": [
      "jest-preset-angular/build/serializers/no-ng-attributes",
      "jest-preset-angular/build/serializers/ng-snapshot",
      "jest-preset-angular/build/serializers/html-comment"
    ],
    "transform": {},
    "transformIgnorePatterns": [],
    "collectCoverageFrom": [
      "projects/**/*.ts",
      "!projects/**/setupJest.ts",
      "!projects/**/jestGlobalMocks.ts",
      "!projects/**/public-api.ts",
      "!projects/**/*.module.ts",
      "!projects/sandbox/**/*",
      "!<rootDir>/node_modules/**/*",
      "!<rootDir>/dist/**/*"
    ],
    "extensionsToTreatAsEsm": [
      ".ts"
    ],
    "testResultsProcessor": "jest-sonar-reporter",
    "reporters": [
      "default",
      "jest-junit"
    ]
  }
}

Main.js

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

const config = {
  core: {
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        fsCache: true,
        lazyCompilation: true
      }
    }
  },
  stories: ['./**/*.stories.@(ts|mdx)'],
  staticDirs: ['./stories/assets', '../dist/@mm-ui/components/resources'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-designs'
  ],
  framework: {
    name: '@storybook/angular',
    options: {
      enableIvy: true
    }
  },

  docs: {
    autodocs: true
  },

  webpackFinal: async config => {
    config.module.rules.push(
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
      test: /\.scss?$/,
      use: [
        "style-loader",
        'css-loader',
        "sass-loader"
      ],
      include: [path.resolve(__dirname, '../dist/@mm-ui/components/resources/scss')]
    });
    const chartsLibPath = path.resolve('dist/@mm-ui/charts');
    const componentsLibPath = path.resolve('dist/@mm-ui/components');
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/@mm-ui\/(charts|components)/, function (resource) {
        resource.request = resource.request.replace(/@mm-ui\/charts/, chartsLibPath);
        resource.request = resource.request.replace(/@mm-ui\/components/, componentsLibPath);
      }),
      new TerserPlugin({
        minify: TerserPlugin.esbuildMinify,
        terserOptions: {
          minify: true,
          minifyWhitespace: true,
          minifyIdentifiers: true,
          minifySyntax: true,
          sourcemap: true
        },
        parallel: true
      })
    );
    return config;
  }
};

export default config;

Angular.json

 

    "projects": {
        "ui-kit": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "architect": {
            "start": {
              "builder": "@storybook/angular:start-storybook",
              "options": {
                "compodoc": true,
                "compodocArgs": ["-e", "json", "-d", "."],
                "port": 9001,
                "configDir": "storybook",
                "browserTarget": "ui-kit:start"
              }
            },
            "build": {
              "builder": "@storybook/angular:build-storybook",
              "options": {
                "compodoc": true,
                "compodocArgs": ["-e", "json", "-d", "."],
                "configDir": "storybook",
                "browserTarget": "ui-kit:start",
                "outputDir": "dist/storybook"
              }
            }
          }
        }
      }