Vite v5 react cannot build: Error: [commonjs--resolver] Failed to resolve entry for package "@langchain/core". The package may have incorrect main/module/exports specified in its package.json

[Parthvsquare]

Checked other resources

• I added a very descriptive title to this question.
• I searched the LangChain documentation with the integrated search.
• I used the GitHub search to find a similar question and didn't find it.

Commit to Help

• I commit to help with one of those options 👆

Example Code

// package.json

  "dependencies": {
    "@apollo/client": "^3.8.4",
    "@apollo/react-hooks": "^4.0.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.8",
    "@langchain/core": "0.2.0",
    "@langchain/openai": "^0.0.33",
    "@mui/icons-material": "^5.14.9",
    "@mui/material": "^5.14.10",
    "@mui/x-data-grid": "^6.14.0",
    "big.js": "^6.2.1",
    "clsx": "^2.0.0",
    "dotenv": "16.3.1",
    "firebase": "^10.5.0",
    "formik": "^2.4.5",
    "graphql": "^16.8.1",
    "graphql-tag": "^2.12.6",
    "history": "^5.3.0",
    "langchain": "^0.2.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "notistack": "^3.0.1",
    "npm-version": "^1.1.0",
    "react": "^18.2.0",
    "react-cropper": "^2.3.3",
    "react-dom": "^18.2.0",
    "react-phone-input-2": "^2.15.1",
    "react-router-dom": "^6.16.0",
    "yup": "=0.32.11"
  },
  "resolutions": {
    "@langchain/core": "0.2.0"
  },
  "overrides": {
    "@langchain/core": "0.2.0"
  },
  "pnpm": {
    "overrides": {
      "@langchain/core": "0.2.0"
    }
  },

Description

✓ 2503 modules transformed.
x Build failed in 4.35s
error during build:
Error: [commonjs--resolver] Failed to resolve entry for package "@langchain/core". The package may have incorrect main/module/exports specified in its package.json: Missing "." specifier in "@langchain/core" package
    at packageEntryFailure (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48264:17)
    at resolvePackageEntry (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48259:9)
    at tryNodeResolve (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48031:20)
    at Object.resolveId (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:47781:28)
    at file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19774:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)
    at async resolveId (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18355:26)
    at async ModuleLoader.resolveId (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18758:15)
    at async Object.resolveId (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:8247:10)
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)
    at async resolveId (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18355:26)
    at async ModuleLoader.loadEntryModule (file:///Users/parthvsquare/Work%20Documents/biztrology/Downloads/lokobee-portal-frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19121:33)
    at async Promise.all (index 0)
    at async Promise.all (index 0)

vite config

    import { defineConfig, loadEnv } from "vite";
import path from "path";
// ts config don't have a reach in this file
import { dependencies } from "./package.json";
import { ValidateEnv } from "@julr/vite-plugin-validate-env";
import react from "@vitejs/plugin-react";

// https://sambitsahoo.com/blog/vite-code-splitting-that-works.html
function renderChunks(deps: Record<string, string>) {
  const chunks = {};
  Object.keys(deps).forEach((key) => {
    if (["react", "react-router-dom", "react-dom", "firebase"].includes(key)) return;
    chunks[key] = [key];
  });
  return chunks;
}

// https://vitejs.dev/config/
export default defineConfig({
  ...(process.env.NODE_ENV === "development"
    ? {
        define: {
          global: {},
        },
      }
    : {}),
  plugins: [react(), htmlPlugin(loadEnv(process.env.NODE_ENV, ".")), ValidateEnv()],
  server: {
    port: 3000,
    open: "/",
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
      ...(process.env.NODE_ENV !== "development"
        ? {
            "./runtimeConfig": "./runtimeConfig.browser", //fix production build
          }
        : {}),
    },
  },
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-router-dom", "react-dom"],
          ...renderChunks(dependencies),
        },
      },
      external: ["cropperjs"],
    },
  },
});

/*
 * Replace env variables in index.html
 * @see https://github.com/vitejs/vite/issues/3105#issuecomment-939703781
 * @see https://vitejs.dev/guide/api-plugin.html#transformindexhtml
 */
function htmlPlugin(env: ReturnType<typeof loadEnv>) {
  return {
    name: "html-transform",
    transformIndexHtml: {
      order: "pre" as const,
      handler: (html: string): string => html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match),
    },
  };
}

System Info

pnpm: 9.06
macos: lateset
node: 20

[dosubot[bot]]

The error you're encountering suggests that Vite is having trouble resolving the entry point for the @langchain/core package. Here are a few steps to resolve this issue:

1. Check Node.js Version: Ensure your Node.js version is 18 or higher. You can check your current version by running:

   node -v

   If it's lower than 18, update Node.js.

2. Update Vite Configuration: Add an alias in your vite.config.ts to point to the correct path of the @langchain/core package:

   import { defineConfig, loadEnv } from "vite";
   import path from "path";
   import { dependencies } from "./package.json";
   import { ValidateEnv } from "@julr/vite-plugin-validate-env";
   import react from "@vitejs/plugin-react";
   
   function renderChunks(deps: Record<string, string>) {
     const chunks = {};
     Object.keys(deps).forEach((key) => {
       if (["react", "react-router-dom", "react-dom", "firebase"].includes(key)) return;
       chunks[key] = [key];
     });
     return chunks;
   }
   
   export default defineConfig({
     ...(process.env.NODE_ENV === "development"
       ? {
           define: {
             global: {},
           },
         }
       : {}),
     plugins: [react(), htmlPlugin(loadEnv(process.env.NODE_ENV, ".")), ValidateEnv()],
     server: {
       port: 3000,
       open: "/",
     },
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "src/"),
         "@langchain/core": path.resolve(__dirname, "node_modules/@langchain/core"),
         ...(process.env.NODE_ENV !== "development"
           ? {
               "./runtimeConfig": "./runtimeConfig.browser",
             }
           : {}),
       },
     },
     build: {
       sourcemap: false,
       rollupOptions: {
         output: {
           manualChunks: {
             vendor: ["react", "react-router-dom", "react-dom"],
             ...renderChunks(dependencies),
           },
         },
         external: ["cropperjs"],
       },
     },
   });
   
   function htmlPlugin(env: ReturnType<typeof loadEnv>) {
     return {
       name: "html-transform",
       transformIndexHtml: {
         order: "pre" as const,
         handler: (html: string): string => html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match),
       },
     };
   }

3. Ensure Correct Package Version: Make sure you are using the correct version of @langchain/core by running:

   pnpm install

4. Check package.json of @langchain/core: Verify that the package.json of @langchain/core has the correct main, module, and exports fields.

5. Manual Resolution: If the above steps do not resolve the issue, manually specify the entry point for the @langchain/core package in your Vite configuration:

   import { defineConfig, loadEnv } from "vite";
   import path from "path";
   import { dependencies } from "./package.json";
   import { ValidateEnv } from "@julr/vite-plugin-validate-env";
   import react from "@vitejs/plugin-react";
   
   function renderChunks(deps: Record<string, string>) {
     const chunks = {};
     Object.keys(deps).forEach((key) => {
       if (["react", "react-router-dom", "react-dom", "firebase"].includes(key)) return;
       chunks[key] = [key];
     });
     return chunks;
   }
   
   export default defineConfig({
     ...(process.env.NODE_ENV === "development"
       ? {
           define: {
             global: {},
           },
         }
       : {}),
     plugins: [react(), htmlPlugin(loadEnv(process.env.NODE_ENV, ".")), ValidateEnv()],
     server: {
       port: 3000,
       open: "/",
     },
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "src/"),
         "@langchain/core": path.resolve(__dirname, "node_modules/@langchain/core/index.js"),
         ...(process.env.NODE_ENV !== "development"
           ? {
               "./runtimeConfig": "./runtimeConfig.browser",
             }
           : {}),
       },
     },
     build: {
       sourcemap: false,
       rollupOptions: {
         output: {
           manualChunks: {
             vendor: ["react", "react-router-dom", "react-dom"],
             ...renderChunks(dependencies),
           },
         },
         external: ["cropperjs"],
       },
     },
   });
   
   function htmlPlugin(env: ReturnType<typeof loadEnv>) {
     return {
       name: "html-transform",
       transformIndexHtml: {
         order: "pre" as const,
         handler: (html: string): string => html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match),
       },
     };
   }

By following these steps, you should be able to resolve the build error related to the @langchain/core package in your Vite v5 React project.

Details

Sources

• Failed to resolve import "langchain/vectorstores/memory" . Does the file exist?
• [ERROR] Could not resolve "langchain"
• Import error when using in React-vite project
• langchain-core/package.json
• langchain-core/langchain.config.js

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[kirbysayshi]

This appears to be a true misconfiguration in the core package.json: https://publint.dev/@langchain/[email protected]. We're finding that "@langchain/core": path.resolve(__dirname, "node_modules/@langchain/core"), in resolve (above) does seem to workaround the problem but it's unclear why since Vite should resolve to that anyway.