How to target “Main” script and not “Module” script in Webpack?

Question

I'm running into a build issue on a large project, which I can reproduce in an extremely simplistic example:

Given a basic webpack project (from Getting Started):

[webpack]: ls
node_modules            package.json
package-lock.json       src

[webpack]: ls src
index.js

If I try to import a package that has a "module" listed in package.json (which I cannot find a reference for in https://docs.npmjs.com/cli/v6/configuring-npm/package-json ), like @szhsin/react-menu ( https://github.com/szhsin/react-menu/blob/master/package.json#L9-L10 ), then Webpack tries to import that, instead of the "main" script!

Example

// src/index.js
import '@szhsin/react-menu'

[webpack]: npx webpack
[webpack-cli] Compilation finished
assets by status 33.4 KiB [cached] 1 asset
orphan modules 42.2 KiB [orphan] 1 module
./src/index.js + 1 modules 42.2 KiB [built] [code generated]

ERROR in ./node_modules/@szhsin/react-menu/dist/index.modern.js 1:0-122
Module not found: Error: Can't resolve 'react' in '/Users/delong/dev/webpack/node_modules/@szhsin/react-menu/dist'
 @ ./src/index.js 1:0-27

Note: It's trying to import dist/index.modern.js , and not dist/index.js !

How do I need to configure Webpack in order to default to importing the "main" script?

Answer 1

Just use the full path:

import '@szhsin/react-menu/dist/index.js'