React应用中如何在Webpack里使用npm link导入的模块？

Hey there! I’ve been through this exact scenario a few times, so let me break down the steps to get your linked module working smoothly with your React + Webpack setup.

Step 1: Set Up npm Link for Your External Module #

First, let’s link your @mymodule/external module globally so your React app can reference it:

• Navigate to your MyModule_Folder in the terminal:

  cd path/to/MyModule_Folder
  

• Run the link command to register the module globally:

  npm link
  

Step 2: Link the Module to Your React App #

Now connect your React app to the globally linked module:

• Go to your App directory:

  cd path/to/App
  

• Link the external module to your app:

  npm link @mymodule/external
  

At this point, your app should recognize the module, but we need to fix some common Webpack/React gotchas.

Step 3: Fix Duplicate React Instance Errors #

A super common issue is having two separate React instances (one in your app, one in the linked module) which causes runtime errors like "Invalid hook call". Here’s how to fix it:

Update the External Module’s package.json #

Move react and react-dom from dependencies to peerDependencies in your MyModule_Folder/package.json—this tells the module to use the React instance from your app instead of its own:

{
  "name": "@mymodule/external",
  "version": "1.0.0",
  "main": "src/index.jsx",
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  // ... rest of your config
}

Then run npm install in the module folder to apply this change.

Add Resolve Aliases to Webpack #

In your app’s Webpack config (usually webpack.config.js or config/webpack.config.js), add aliases to force the linked module to use your app’s React:

const path = require('path');

module.exports = {
  // ... other Webpack config
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')
    }
  }
};

Step 4: Configure Webpack to Transpile the Linked Module #

By default, Webpack skips transpiling code in node_modules, but your linked module is likely untranspiled source code. Update your Webpack rules to include the module:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // Exclude node_modules except our linked module
        exclude: /node_modules(?!\/@mymodule\/external)/,
        use: 'babel-loader'
      },
      // Make sure you have CSS handling if your module uses styles
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

This tells Webpack to run Babel on your linked module’s JS/JSX files, just like your app’s code.

Step 5: Verify the Module Entry Point #

Double-check that your MyModule_Folder/package.json has the correct main field pointing to your module’s entry file. For example, if you have an src/index.jsx that exports your component:

// MyModule_Folder/src/index.jsx
import MyComponent from './myModule/MyComponent';
export default MyComponent;

Then your main should be:

"main": "src/index.jsx"

Step 6: Use the Module in Your App #

Now you can import and use the component just like any other module:

// App/src/App.jsx
import MyComponent from '@mymodule/external';

function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}

export default App;

Troubleshooting Tips #

• If you run into weird caching issues, restart your Webpack dev server and run npm cache clean --force to clear any stale modules.
• Make sure your linked module’s Babel config matches your app’s (e.g., both using the same React preset) to avoid transpilation mismatches.

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