Lerna、Webpack与Babel转译后导入模块返回Undefined问题咨询

Hey there, let's dig into this frustrating issue you're hitting—nothing's more annoying than a "routine" import failing with undefined, right? Let’s break down the most likely culprits and fixes:

1. Fix Your Webpack Output Configuration (The #1 Cause) #

9 times out of 10, this happens because Webpack isn’t configured to expose your module’s exports correctly for Node.js/commonJS environments. By default, Webpack bundles code for browser environments, which doesn’t play nice with how other Node modules import code.

Update your Webpack config’s output section to explicitly set libraryTarget: 'commonjs2'—this tells Webpack to assign your module’s exports to module.exports, which is what Node.js expects:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: 'index.js',
    // Critical line: ensures exports are exposed correctly for Node
    libraryTarget: 'commonjs2',
    // Optional: name your library if you need UMD support, but commonjs2 is enough here
    library: 'module-b'
  },
  // ...rest of your simplified config
};

After updating, re-run your prepublish script and check the lib/index.js file—you should see a line at the end like module.exports = [your-exported-value];. If that’s missing, this was definitely the issue.

2. Verify Your Prepublish Script Timing & Lerna Bootstrap Behavior #

First, note that npm’s prepublish hook is deprecated (it still works, but prepare is the modern, standard hook for build steps). Swap your script in module B’s package.json to use prepare instead—Lerna’s bootstrap command will automatically run this hook when installing/linking packages:

{
  "scripts": {
    "prepare": "webpack --mode production"
  }
}

If you’re still seeing issues, manually trigger the build in module B (npm run prepare) and confirm the lib directory has fresh, correct output. Also, try running Lerna bootstrap with --force-local to bypass any cached linked packages:

lerna bootstrap --force-local

3. Check Your Babel Configuration #

If Babel is transpiling ES module syntax (like export default) to commonJS before Webpack processes it, it can mess up Webpack’s ability to properly expose exports. Make sure your Babel preset-env config has modules: false—this tells Babel to leave module syntax intact so Webpack can handle it:

// .babelrc or babel.config.js
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": { "node": "current" }
    }]
  ]
}

4. Validate Your Module’s Actual Exports #

Double-check that module B’s source code is exporting values correctly. For example:

• If you’re using export default MyComponent, the bundled code should assign that to module.exports
• If you’re using named exports (export const foo = 'bar'), Webpack should expose them as module.exports.foo = 'bar'

Open the lib/index.js file directly to confirm these exports exist—if they don’t, your Webpack entry point might be pointing to the wrong file, or your source code has no valid exports.

5. Rule Out Lerna Hoisting Conflicts #

Occasionally, Lerna’s default hoisting behavior can cause dependency resolution issues (e.g., Webpack/Babel being hoisted to the root and not matching module B’s expected versions). Try disabling hoisting temporarily in your lerna.json to test:

{
  "packages": ["packages/*"],
  "version": "independent",
  "hoist": false
}

Run lerna clean && lerna bootstrap after making this change to see if it resolves the undefined import.

内容的提问来源于stack exchange，提问作者Aviad