发布到NPM的react-baidumap包引入后返回空对象，寻求技术帮助

Let's break down why you're hitting this issue with your react-baidumap package—importing Point gives an empty object, which is almost always tied to export/bundler configuration mismatches. Here's how to fix it step by step:

1. Validate Your package.json Entry Points #

First, make sure your package.json points to the correct bundled output file. If the main (or module) field is misconfigured, Node.js won't resolve your exports properly.

• Open your package.json and double-check these fields:

  {
    "main": "dist/index.js", // Must match your bundler's output path
    "module": "dist/index.esm.js", // Optional but recommended for ES module support
    "type": "module" // Add this if your source uses ES modules instead of CommonJS
  }
  

  Confirm the file paths here exist in your project after running the build command.

2. Check Your Source Export Syntax #

Incorrect export patterns in your source code can break bundling. Ensure you're using named exports consistently:

// src/Point.js
export const Point = () => { /* Your component logic here */ };

// src/index.js
// Re-export the component so it's available at the package root
export { Point } from './Point';

Avoid mixing default and named exports unless you explicitly handle them in your import statements.

3. Fix Your Bundler Configuration #

Most packaging issues stem from misconfigured bundlers (Rollup or Webpack are the most common for React libraries). Here's what to adjust:

For Rollup: #

Ensure your rollup.config.js preserves named exports and outputs compatible formats:

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs', // CommonJS for Node.js/require syntax
      exports: 'named' // Critical for keeping your named exports intact
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm', // ES module for modern import syntax
      exports: 'named'
    }
  ],
  // Don't forget plugins like @rollup/plugin-babel and @rollup/plugin-node-resolve
};

For Webpack: #

If using Webpack, configure it to output a library with preserved named exports:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      name: 'react-baidumap',
      type: 'umd', // Universal format for cross-environment support
      export: 'named'
    }
  },
  // Add externals for React/ReactDOM to avoid bundling them into your package
  externals: {
    react: 'react',
    'react-dom': 'react-dom'
  }
};

4. Test Locally Properly #

Skip npm install path/react-baidumap for testing—use npm link to avoid caching issues:

• Run npm link in your react-baidumap project directory
• In your test project, run npm link react-baidumap
• Now import Point and test again. This creates a direct symlink to your built package, so you can debug changes in real time.

5. Rule Out Tree Shaking/Minification Issues #

If your bundler is incorrectly tree-shaking the Point component (marking it as unused), add a comment to preserve it:

/*#__PURE__*/
export const Point = () => { /* Component logic */ };

Or adjust your minifier settings (like Terser) to avoid removing unused exports during build.

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