You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.jsmodule.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 timecompilerOptions: {allowSyntheticDefaultImports: false,esModuleInterop: false,},// Makes union prop types like variant and size appear as select controlsshouldExtractLiteralValuesFromEnum: true,// Makes string and boolean types that can be undefined appear as inputs and switchesshouldRemoveUndefinedFromOptional: true,// Filter out third-party props from node_modules except @mui packagespropFilter: (prop)=>prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,},},}
// .storybook/webpack.config.jsconstpath=require('path');constForkTsCheckerWebpackPlugin=require('fork-ts-checker-webpack-plugin');constcreateCompiler=require('@storybook/addon-docs/mdx-compiler-plugin');/* Uncomment me to debug dependency issues */constCircularDependencyPlugin=require('circular-dependency-plugin');constmerge=require('webpack-merge');constsrcPath=path.join(__dirname,'../src/');constbaseConfig=require('@compass/loaders')(srcPath,false);/* are-you-es5 check -a -r . */constnonEs5Modules=/[\\/]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)[\\/])/;constisPublish=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);letentryPoints=config.entry;constpolyfillPath=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(newForkTsCheckerWebpackPlugin({tsconfig: path.join(__dirname,'../','tsconfig.json'),checkSyntacticErrors: true,watch: [srcPath]}),newCircularDependencyPlugin({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 configreturnmerge(config,baseConfig);};
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
I am unable to use MUI date picker in a storybook with the below error
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
Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions