Missing loader using MUI date picker

[prabhav-mehra]

Summary

I am unable to use MUI date picker in a storybook with the below error

ERROR in
./node_modules/@mui/x-date-pickers/DesktopTimePicker/DesktopTimePicker.js
45:52 Module parse failed: Unexpected token (45:52) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders

I am running using
yarn storybook

This happens as soon as I have a reference to LocalizationProvider and/or DatePicker

the following are my project files

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-notes/register',
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    '@storybook/addon-backgrounds',
    'storybook-addon-styled-component-theme/dist/preset',
    'addon-screen-reader',
    {
      name: '@storybook/addon-a11y',
      options: {
        rules: {
          // "color-contrast": { "enabled": false },
          // "tabindex": { "enabled": false }
        }
      }
    },
    '@storybook/addon-storysource',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
        transcludeMarkdown: true,
      },
    },
  ],
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      // Speeds up Storybook build time
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      // Makes union prop types like variant and size appear as select controls
      shouldExtractLiteralValuesFromEnum: true,
      // Makes string and boolean types that can be undefined appear as inputs and switches
      shouldRemoveUndefinedFromOptional: true,
      // Filter out third-party props from node_modules except @mui packages
      propFilter: (prop) =>
        prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,
    },
  },
}

// .storybook/webpack.config.js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
/* Uncomment me to debug dependency issues */
const CircularDependencyPlugin = require('circular-dependency-plugin');

const merge = require('webpack-merge');
const srcPath = path.join(__dirname, '../src/');
const baseConfig = require('@compass/loaders')(srcPath, false);

/* are-you-es5 check -a -r . */
const nonEs5Modules = /[\\/]node_modules[\\/](?!(@commitlint\cli|@commitlint\lint|@commitlint\load|@commitlint\read|@compass\loaders|@jest\environment|@jest\test-sequencer|@mdx-js\mdx|@mdx-js\util|@mrmlnc\readdir-enhanced|@nodelib\fs.stat|@storybook\addon-viewport|@storybook\node-logger|@svgr\plugin-jsx|@svgr\plugin-svgo|@typescript-eslint\eslint-plugin|@typescript-eslint\experimental-utils|@typescript-eslint\parser|@typescript-eslint\typescript-estree|abab|acorn-jsx|aggregate-error|ansi-align|ansi-colors|ansi-escapes|ansi-styles|are-you-es5|ast-types-flow|astral-regex|boxen|caller-callsite|caller-path|callsites|camelcase|camelcase-css|camelcase-keys|chalk|character-entities|character-entities-legacy|character-reference-invalid|chownr|circular-dependency-plugin|clean-stack|cli-boxes|cli-cursor|cli-truncate|color-convert|concurrently|constants-browserify|conventional-changelog|conventional-changelog-angular|conventional-changelog-atom|conventional-changelog-codemirror|conventional-changelog-conventionalcommits|conventional-changelog-core|conventional-changelog-ember|conventional-changelog-eslint|conventional-changelog-express|conventional-changelog-jquery|conventional-changelog-jshint|conventional-recommended-bump|copyfiles|core-js-compat|cosmiconfig|cross-spawn|css-color-names|cssstyle|dashdash|data-urls|datauri|diff-sequences|dir-glob|dotenv|dotenv-defaults|enhanced-resolve|enquirer|eslint|eslint-import-resolver-typescript|eslint-plugin-import|eslint-plugin-jest|eslint-plugin-lodash|eslint-plugin-react|eslint-scope|eslint-utils|eslint-visitor-keys|espree|execa|expect|fast-glob|figgy-pudding|figures|file-entry-cache|find-cache-dir|find-up|fs-extra|gensync|get-own-enumerable-property-symbols|get-stdin|get-stream|getpass|git-remote-origin-url|global-dirs|global-modules|global-prefix|globby|gzip-size|has-flag|html-encoding-sniffer|human-signals|ignore|import-cwd|import-fresh|import-from|import-local|indent-string|infer-owner|invert-kv|is-absolute-url|is-fullwidth-code-point|is-generator-fn|is-root|is-wsl|istanbul-lib-coverage|istanbul-lib-report|istanbul-lib-source-maps|istanbul-reports|jest|jest-axe|jest-changed-files|jest-cli|jest-config|jest-diff|jest-docblock|jest-each|jest-environment-jsdom|jest-environment-node|jest-get-type|jest-haste-map|jest-jasmine2|jest-junit|jest-junit-reporter|jest-leak-detector|jest-matcher-utils|jest-message-util|jest-mock|jest-pnp-resolver|jest-regex-util|jest-resolve|jest-resolve-dependencies|jest-runner|jest-runtime|jest-serializer|jest-snapshot|jest-styled-components|jest-util|jest-worker|jsdom|jsesc|json-parse-better-errors|json5|kleur|lcid|leven|lint-staged|load-json-file|loader-utils|locate-path|lodash-es|log-symbols|log-update|make-dir|map-age-cleaner|markdown-to-document|mem|meow|merge-stream|merge2|mimic-fn|minimist-options|node-fetch|npm-license-crawler|npm-run-path|onetime|open|opencollective-postinstall|opn|os-locale|p-defer|p-each-series|p-finally|p-is-promise|p-limit|p-locate|p-map|p-reduce|p-try|parent-module|parse-json|path-exists|path-key|path-type|pirates|pkg-dir|pkg-up|postcss-load-config|postcss-modules-extract-imports|postcss-modules-local-by-default|postcss-modules-scope|postcss-modules-values|prettier|pretty-format|promise-inflight|prompts|pug-lexer|quick-lru|react-docgen|read-pkg|read-pkg-up|realpath-native|rechoir|redent|regexpp|regexpu-core|remark-mdx|resolve-cwd|resolve-from|resolve-global|restore-cursor|rimraf|sane|schema-utils|sisteransi|slash|slice-ansi|ssri|string-length|string-width|stringify-object|strip-ansi|strip-bom|strip-final-newline|strip-indent|strip-json-comments|supports-color|symbol-tree|temp-dir|tempfile|term-size|terser|test-exclude|tmp|to-fast-properties|tr46|trim-newlines|ts-pnp|tsutils|typed-styles|typescript-plugin-styled-components|unicode-match-property-ecmascript|unicode-match-property-value-ecmascript|universalify|v8-compile-cache|w3c-hr-time|web-namespaces|webidl-conversions|whatwg-encoding|whatwg-mimetype|widest-line|window-size|worker-farm|wrap-ansi|write-file-atomic|ws|xml-name-validator|yargs|yargs-parser|yarn-audit-html)[\\/])/;

const isPublish = process && process.env && process.env.CI_STORYBOOK_BUILD;
if (isPublish) console.log('Running in storybook publish mode, no type checking will occur');

module.exports = ({ config, mode }) => {
  config.resolve.modules.push(srcPath);

  let entryPoints = config.entry;
  const polyfillPath = path.join(__dirname, '../', 'src/', 'utils', 'polyfills', 'polyfills.js')
  entryPoints.splice(0, 0, polyfillPath);
  config.entry = entryPoints;

  /* Blow away the default options so modules are not parsed twice */
  config.module.rules = []; 

  config.module.rules.push({ 
    test: /\.(ejs|mjs|js?)$/,
    use:
    [ 
      { 
      loader: 'babel-loader',
      options:
        { 
          presets: ['@babel/preset-env'],
          plugins: [ 
            '@babel/plugin-proposal-object-rest-spread',
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-syntax-dynamic-import',
            '@babel/plugin-transform-modules-commonjs',
            [ 
              'emotion',
              { 
                sourceMap: true, 
                autoLabel: true 
              } 
            ],
            'babel-plugin-macros',
            '@babel/plugin-transform-react-constant-elements',
            'babel-plugin-add-react-displayname',
            [ 
              'babel-plugin-react-docgen',
              { 
                DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' 
              } 
            ] 
          ] 
        } 
      } 
    ],
    include: [ 
      path.resolve(path.join(srcPath, '..'))
    ],
    exclude: [ 
      nonEs5Modules
    ] 
  }); 

  config.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-transform-react-jsx'],
        },
      },
      {
        loader: '@mdx-js/loader',
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });

  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    loaders: [ 
  //    require.resolve('@storybook/addon-storysource/loader'),
      require.resolve('@storybook/source-loader')
    ],
    enforce: 'pre',
  })

  if (!isPublish) {
    config.plugins.push(
      new ForkTsCheckerWebpackPlugin({
        tsconfig: path.join(__dirname, '../', 'tsconfig.json'),
        checkSyntacticErrors: true,
        watch: [ srcPath ]
      }),
      new CircularDependencyPlugin({
        exclude: /a\.js|node_modules|sub-form.tsx|render-field.tsx|address-group.tsx|form\\index.tsx|form\/index.tsx/,
        failOnError: false,
        allowAsyncCycles: false,
        cwd: process.cwd(),
      })
    );
  }

  config.devtool = isPublish ? '' : 'inline-source-map';

  if (isPublish) config.mode = 'production';

  // Return the altered config
  return merge(config, baseConfig);
};

{
  "name": "...",
  "version": "1.0.0",
  "description": "...",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
  "license": "UNLICENSED",
  "sideEffects": false,
  "scripts": {
    "storybook": "start-storybook -s ./src/components/public -c .storybook -p 6006",
   },
   "browserList": [
    ">1%",
    "last 2 versions",
    "Firefox ESR"
  ],
  "peerDependencies": {
    "@apollo/client": "^3.3.8",
    "@types/react-table": "^7.0.25",
    "@types/styled-components": "^5.1.1",
    "graphql": "^15.5.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "styled-components": "^5.1.1"
  },
  "dependencies": {
    "@babel/preset-react": "^7.24.7",
    "@babel/preset-typescript": "^7.24.7",
    "@babel/runtime": "^7.16.5",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@hookers/use-data-loader": "^1.1.1",
    "@mui/material": "^5.15.21",
    "@mui/x-date-pickers": "^7.8.0",
    "@types/styled-components": "^5.1.0",
    "@types/yup": "^0.29.9",
    "babel-preset-react-app": "^10.0.0",
    "capitalize": "^2.0.3",
    "change-case": "^4.1.2",
    "cloudwatch-front-logger": "^0.0.10",
    "copy-to-clipboard": "^3.3.1",
    "dayjs": "^1.11.11",
    "deep-object-diff": "^1.1.0",
    "formik": "^2.1.4",
    "framer-motion": "^1.6.15",
    "html2canvas": "^1.0.0-rc.7",
    "immer": "^8.0.0",
    "input-core": "^2.1.0",
    "jspdf": "^2.2.0",
    "lodash": "^4.17.10",
    "moment": "^2.24.0",
    "polished": "^4.2.2",
    "query-string": "^6.13.7",
    "react-calendar": "^3.2.1",
    "react-container-query": "^0.11.2",
    "react-error-boundary": "^3.1.3",
    "react-feather": "^2.0.3",
    "react-focus-lock": "^2.4.0",
    "react-icons": "^4.4.0",
    "react-movable": "^2.5.4",
    "react-phone-number-input": "^3.1.6",
    "react-query": "^3.34.2",
    "react-router-dom": "^5.1.2",
    "react-scroll": "^1.7.7",
    "react-select": "^5.4.0",
    "react-svg": "^14.0.16",
    "react-table": "^7.6.2",
    "react-tabs": "^3.2.3",
    "react-time-picker": "^4.0.1",
    "react-tooltip": "^4.2.21",
    "react-waypoint": "^9.0.3",
    "resize-observer-polyfill": "^1.5.1",
    "stacktrace-js": "^2.0.2",
    "styled-components": "^5.1.1",
    "utility-types": "^3.6.1",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "@apollo/client": "^3.3.8",
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.24.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-proposal-private-methods": "^7.7.4",
    "@babel/plugin-transform-react-constant-elements": "^7.7.4",
    "@babel/preset-env": "^7.24.7",
    "@commitlint/cli": "^8.2.0",
    "@fortawesome/fontawesome-common-types": "^0.2.28",
    "@storybook/addon-a11y": "^6.4.8",
    "@storybook/addon-actions": "^6.4.8",
    "@storybook/addon-backgrounds": "^6.4.8",
    "@storybook/addon-docs": "^6.4.8",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/addon-options": "^5.3.21",
    "@storybook/addon-storysource": "^6.4.8",
    "@storybook/addon-viewport": "^6.4.8",
    "@storybook/react": "^6.4.8",
    "@storybook/theming": "^6.4.8",
    "@testing-library/react-hooks": "^3.2.1",
    "@types/capitalize": "^2.0.0",
    "@types/change-case": "^2.3.1",
    "@types/enzyme": "^3.1.13",
    "@types/google-translate-api": "^2.3.1",
    "@types/google.analytics": "^0.0.40",
    "@types/googlemaps": "^3.40.1",
    "@types/jest": "^24.0.11",
    "@types/jest-axe": "^3.2.2",
    "@types/lodash": "^4.14.116",
    "@types/react": "16.9.13",
    "@types/react-calendar": "^3.1.2",
    "@types/react-dom": "^16.9.4",
    "@types/react-phone-number-input": "^3.0.6",
    "@types/react-router-dom": "^5.1.2",
    "@types/react-scroll": "^1.5.3",
    "@types/react-svg": "^5.0.0",
    "@types/react-table": "^7.0.25",
    "@types/react-tabs": "^2.3.3",
    "@types/react-time-picker": "^4.0.0",
    "@types/storybook__react": "^4.0.0",
    "@types/uuid": "^7.0.3",
    "@typescript-eslint/eslint-plugin": "^2.2.0",
    "@typescript-eslint/parser": "^2.2.0",
    "addon-screen-reader": "^1.8.6",
    "apollo-link": "^1.2.13",
    "are-you-es5": "^2.1.1",
    "autoprefixer": "^9.4.7",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-styled-components": "^1.10.7",
    "badge-up": "^2.3.0",
    "circular-dependency-plugin": "^5.0.2",
    "concurrently": "^4.1.0",
    "conventional-changelog-cli": "^2.0.28",
    "conventional-changelog-conventionalcommits": "^4.2.3",
    "conventional-recommended-bump": "^6.0.5",
    "copyfiles": "^2.1.1",
    "cross-env": "^7.0.2",
    "css-loader": "^5.1.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-import-resolver-typescript": "^1.1.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^22.3.0",
    "eslint-plugin-jsdoc": "^4.1.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-lodash": "^5.1.0",
    "eslint-plugin-react": "^7.5.1",
    "eslint-plugin-react-hooks": "^2.3.0",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^0.5.2",
    "graphql": "^15.5.0",
    "husky": "^3.1.0",
    "identity-obj-proxy": "^3.0.0",
    "intl": "^1.2.5",
    "jest": "^24.8.0",
    "jest-axe": "^3.5.0",
    "jest-junit": "^12.0.0",
    "jest-junit-reporter": "^1.1.0",
    "jest-styled-components": "^7.0.2",
    "lint-staged": "^10.2.11",
    "lorem-ipsum": "^2.0.3",
    "markdown-to-document": "^0.8.0",
    "merge-dirs": "^0.2.1",
    "namor": "^2.0.2",
    "npm-license-crawler": "^0.2.1",
    "object-assign": "^4.1.1",
    "promise": "^8.0.1",
    "raw-loader": "^4.0.2",
    "react": "^18.3.1",
    "react-dev-utils": "^7.0.1",
    "react-dom": "^18.3.1",
    "react-is": "^16.13.1",
    "react-test-renderer": "^16.12.0",
    "rimraf": "3.0.0",
    "semver": "^6.3.0",
    "storybook-addon-styled-component-theme": "^2.0.0",
    "style-loader": "^2.0.0",
    "ts-jest": "24.2.0",
    "ts-loader": "6.2.1",
    "typescript": "^3.7.2",
    "typescript-plugin-styled-components": "^1.4.0",
    "uuid": "^8.0.0",
    "webpack": "^4.33.0",
    "webpack-merge": "^4.2.2",
    "whatwg-fetch": "^3.0.0",
    "yargs": "^14.0.0",
    "yarn-audit-html": "^3.0.1"
  },
  "globals": {
    "ts-jest": {
      "useBabelrc": true,
      "mapCoverage": true,
      "tsConfigFile": "./tsconfig.json"
    }
  },
  "engines": {
    "node": ">=10.15.0"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "install"
    ]
  }
}

Additional information

No response

Create a reproduction

No response

[mani610k]

Were you able to find solution for this?