Externals defined in webpack.config still getting error module not found

Question

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";
.....
.....

Garin

See this related issue. github.com/webpack/webpack.js.org/issues/1726 – Osteoid

Answer 1

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

Garin

Thanks, this helped me! I'll also add here, the string value is case sensitive, ex vue does not work, but Vue does. – Towardly

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']. – Grade