Cannot import material-ui/icons at nextjs

[Rukeith]

• [ x] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

import @material-ui/icons fail, build nextjs fail

Expected Behavior 🤔

Should use normally

Steps to Reproduce 🕹

Steps:

1. Install material-ui/icons
2. Import icon and render
3. npm run dev fail

Context 🔦

Your Environment 🌎

Chrome 91.0.4472.101

  System:
    OS: macOS 11.4
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: Not Found
    npm: 7.17.0 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.101
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.1
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0
    @emotion/styled: ^11.3.0 => 11.3.0
    @material-ui/core: ^5.0.0-alpha.36 => 5.0.0-alpha.36
    @material-ui/icons: ^5.0.0-alpha.36 => 5.0.0-alpha.36
    @material-ui/private-theming:  5.0.0-alpha.35
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.35
    @material-ui/utils:  5.0.0-alpha.35
    @types/react:  17.0.11
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  4.3.2

[siriwatknp]

Follow these steps

1. npm install --save next-transpile-modules
2. create next.config.js at root dir
3. paste this code to the config

   // next.config.js
   const withTM = require("next-transpile-modules")(["@material-ui/icons"]);
   
   module.exports = withTM(/* your Next.js config */);

4. npm run dev

[Rukeith]

I have tried this, and I got this error

My next.config.js

const withTM = require("next-transpile-modules")(["@material-ui/icons"]);
module.exports = withTM();

Error :

❯ npm run dev

> smeargle-client-website@1.0.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/jarvis/Project/smeargle-client-website/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].module.rules[4] should be one of these:
   ["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration[0].module.rules[4].loader should be a non-empty string.
      -> A loader request.
 - configuration[1].module.rules[4] should be one of these:
   ["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration[1].module.rules[4].loader should be a non-empty string.
      -> A loader request.
    at validate (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/compiled/schema-utils3/index.js:1:153657)
    at validateSchema (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/compiled/webpack/bundle5.js:137989:2)
    at create (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/compiled/webpack/bundle5.js:141432:24)
    at webpack (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/compiled/webpack/bundle5.js:141474:32)
    at f (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/compiled/webpack/bundle5.js:99016:16)
    at HotReloader.start (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/server/hot-reloader.js:18:415)
    at async DevServer.prepare (/Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/server/next-dev-server.js:16:453)
    at async /Users/jarvis/Project/smeargle-client-website/node_modules/next/dist/cli/next-dev.js:22:1 {
  errors: [
    {
      keyword: 'oneOf',
      dataPath: '[0].module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    },
    {
      keyword: 'oneOf',
      dataPath: '[1].module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    }
  ],
  schema: {
    definitions: {
      Amd: [Object],
      AssetFilterItemTypes: [Object],
      AssetFilterTypes: [Object],
      AssetGeneratorDataUrl: [Object],
      AssetGeneratorDataUrlFunction: [Object],
      AssetGeneratorDataUrlOptions: [Object],
      AssetGeneratorOptions: [Object],
      AssetInlineGeneratorOptions: [Object],
      AssetModuleFilename: [Object],
      AssetParserDataUrlFunction: [Object],
      AssetParserDataUrlOptions: [Object],
      AssetParserOptions: [Object],
      AssetResourceGeneratorOptions: [Object],
      AuxiliaryComment: [Object],
      Bail: [Object],
      CacheOptions: [Object],
      CacheOptionsNormalized: [Object],
      Charset: [Object],
      ChunkFilename: [Object],
      ChunkFormat: [Object],
      ChunkLoadTimeout: [Object],
      ChunkLoading: [Object],
      ChunkLoadingGlobal: [Object],
      ChunkLoadingType: [Object],
      Clean: [Object],
      CleanOptions: [Object],
      CompareBeforeEmit: [Object],
      Context: [Object],
      CrossOriginLoading: [Object],
      Dependencies: [Object],
      DevServer: [Object],
      DevTool: [Object],
      DevtoolFallbackModuleFilenameTemplate: [Object],
      DevtoolModuleFilenameTemplate: [Object],
      DevtoolNamespace: [Object],
      EmptyGeneratorOptions: [Object],
      EmptyParserOptions: [Object],
      EnabledChunkLoadingTypes: [Object],
      EnabledLibraryTypes: [Object],
      EnabledWasmLoadingTypes: [Object],
      Entry: [Object],
      EntryDescription: [Object],
      EntryDescriptionNormalized: [Object],
      EntryDynamic: [Object],
      EntryDynamicNormalized: [Object],
      EntryFilename: [Object],
      EntryItem: [Object],
      EntryNormalized: [Object],
      EntryObject: [Object],
      EntryRuntime: [Object],
      EntryStatic: [Object],
      EntryStaticNormalized: [Object],
      EntryUnnamed: [Object],
      Environment: [Object],
      Experiments: [Object],
      ExternalItem: [Object],
      ExternalItemFunctionData: [Object],
      ExternalItemValue: [Object],
      Externals: [Object],
      ExternalsPresets: [Object],
      ExternalsType: [Object],
      FileCacheOptions: [Object],
      Filename: [Object],
      FilenameTemplate: [Object],
      FilterItemTypes: [Object],
      FilterTypes: [Object],
      GeneratorOptionsByModuleType: [Object],
      GlobalObject: [Object],
      HashDigest: [Object],
      HashDigestLength: [Object],
      HashFunction: [Object],
      HashSalt: [Object],
      HotUpdateChunkFilename: [Object],
      HotUpdateGlobal: [Object],
      HotUpdateMainFilename: [Object],
      IgnoreWarnings: [Object],
      IgnoreWarningsNormalized: [Object],
      Iife: [Object],
      ImportFunctionName: [Object],
      ImportMetaName: [Object],
      InfrastructureLogging: [Object],
      JavascriptParserOptions: [Object],
      Layer: [Object],
      Library: [Object],
      LibraryCustomUmdCommentObject: [Object],
      LibraryCustomUmdObject: [Object],
      LibraryExport: [Object],
      LibraryName: [Object],
      LibraryOptions: [Object],
      LibraryType: [Object],
      Loader: [Object],
      MemoryCacheOptions: [Object],
      Mode: [Object],
      ModuleFilterItemTypes: [Object],
      ModuleFilterTypes: [Object],
      ModuleOptions: [Object],
      ModuleOptionsNormalized: [Object],
      Name: [Object],
      NoParse: [Object],
      Node: [Object],
      NodeOptions: [Object],
      Optimization: [Object],
      OptimizationRuntimeChunk: [Object],
      OptimizationRuntimeChunkNormalized: [Object],
      OptimizationSplitChunksCacheGroup: [Object],
      OptimizationSplitChunksGetCacheGroups: [Object],
      OptimizationSplitChunksOptions: [Object],
      OptimizationSplitChunksSizes: [Object],
      Output: [Object],
      OutputModule: [Object],
      OutputNormalized: [Object],
      Parallelism: [Object],
      ParserOptionsByModuleType: [Object],
      Path: [Object],
      Pathinfo: [Object],
      Performance: [Object],
      PerformanceOptions: [Object],
      Plugins: [Object],
      Profile: [Object],
      PublicPath: [Object],
      RawPublicPath: [Object],
      RecordsInputPath: [Object],
      RecordsOutputPath: [Object],
      RecordsPath: [Object],
      Resolve: [Object],
      ResolveAlias: [Object],
      ResolveLoader: [Object],
      ResolveOptions: [Object],
      ResolvePluginInstance: [Object],
      RuleSetCondition: [Object],
      RuleSetConditionAbsolute: [Object],
      RuleSetConditionOrConditions: [Object],
      RuleSetConditionOrConditionsAbsolute: [Object],
      RuleSetConditions: [Object],
      RuleSetConditionsAbsolute: [Object],
      RuleSetLoader: [Object],
      RuleSetLoaderOptions: [Object],
      RuleSetLogicalConditions: [Object],
      RuleSetLogicalConditionsAbsolute: [Object],
      RuleSetRule: [Object],
      RuleSetRules: [Object],
      RuleSetUse: [Object],
      RuleSetUseItem: [Object],
      ScriptType: [Object],
      SnapshotOptions: [Object],
      SourceMapFilename: [Object],
      SourcePrefix: [Object],
      StatsOptions: [Object],
      StatsValue: [Object],
      StrictModuleErrorHandling: [Object],
      StrictModuleExceptionHandling: [Object],
      Target: [Object],
      TrustedTypes: [Object],
      UmdNamedDefine: [Object],
      UniqueName: [Object],
      WarningFilterItemTypes: [Object],
      WarningFilterTypes: [Object],
      WasmLoading: [Object],
      WasmLoadingType: [Object],
      Watch: [Object],
      WatchOptions: [Object],
      WebassemblyModuleFilename: [Object],
      WebpackOptionsNormalized: [Object],
      WebpackPluginFunction: [Object],
      WebpackPluginInstance: [Object]
    },
    title: 'WebpackOptions',
    description: 'Options object as provided by the user.',
    type: 'object',
    additionalProperties: false,
    properties: {
      amd: [Object],
      bail: [Object],
      cache: [Object],
      context: [Object],
      dependencies: [Object],
      devServer: [Object],
      devtool: [Object],
      entry: [Object],
      experiments: [Object],
      externals: [Object],
      externalsPresets: [Object],
      externalsType: [Object],
      ignoreWarnings: [Object],
      infrastructureLogging: [Object],
      loader: [Object],
      mode: [Object],
      module: [Object],
      name: [Object],
      node: [Object],
      optimization: [Object],
      output: [Object],
      parallelism: [Object],
      performance: [Object],
      plugins: [Object],
      profile: [Object],
      recordsInputPath: [Object],
      recordsOutputPath: [Object],
      recordsPath: [Object],
      resolve: [Object],
      resolveLoader: [Object],
      snapshot: [Object],
      stats: [Object],
      target: [Object],
      watch: [Object],
      watchOptions: [Object]
    }
  },
  headerName: 'Webpack',
  baseDataPath: 'configuration',
  postFormatter: [Function: postFormatter]
}

[Rukeith]

Well, I found the solution from this discuss
martpie/next-transpile-modules#215

I just add webpack5: true and next-transpile-modules.
But I hope icons could upgrade then I won't need to do that in next version. It will be great.

[oliviertassinari]

It's fixed in the latest version #26656.