6

I have defined externals in webpack.config for material-ui 

module.exports = [{
  entry: ...
  output:...
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react"
    },
    "material-ui": {
      commonjs: "material-ui",
      commonjs2: "material-ui"
    }
  },
  module: ...
}];

Still its giving error like-

Cannot resolve module 'material-ui/IconButton'......

In my entry js file, I have 

import React, {Component} from "react";
import IconButton from "material-ui/IconButton";
.....
.....
VISHAL DAGA
  • 4,132
  • 10
  • 47
  • 53

1 Answers1

11

Ok I solved it. External expects complete path.

So either, 

import {IconButton} from "material-ui"

or 

externals: {
  "material-ui/IconButton": {
    commonjs: "material-ui/IconButton",
    ...
  }
}

will work. Ofcourse, second option is not reasonable here

VISHAL DAGA
  • 4,132
  • 10
  • 47
  • 53
  • Thanks, this helped me! I'll also add here, the string value is case sensitive, ex `vue` does not work, but `Vue` does. – Will P. Jun 03 '19 at 16:30
  • thank you very much! Using your method solved my problem. The problem scenario I encountered is as follows: My component library, component A needs to refer to another component B in the component library through [npm package name], so I use externals; and because I use [npm link] for real-time development , So when the local [lib cache folder] is emptied during the component library packaging process, it prompts [Cannot resolve module'library name/lib/component B']. – Lancer.Yan Oct 27 '20 at 08:07