Module not found when trying to use useOrder and useOrderGroup hooks

[Marinho]

I’m trying to use the following Hooks from order-placed GitHub - vtex-apps/order-placed: App for the orderPlaced page in IO Stores. It will replace checkout-confirmation-ui.. When I import the useOrderGroup or useOrder I’m getting module not found. Even when I try to import from another path like VTEX.order-placed/index or VTEX.order-placed/react/OrderContext, instead of: VTEX.order-placed/OrderGroupContext;

When I open the path VTEX.order-placed/react/OrderContext, show me the code below:

import { useOrder } from './components/OrderContext';
declare const _default: {
    useOrder: typeof useOrder;
};
export default _default;

But don’t find the useOrder when compiling with the command VTEX link. Does anyone know how to solve this?

My manifest.json: has “VTEX.order-placed”: “2.x”,
My package from react folder has : “VTEX.order-placed”: “http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-placed@2.16.0/public/@types/vtex.order-placed”,

[victor.miranda]

Hi, @Marinho!

What you’re experiencing has to do with how TypeScript types are generated from react VTEX IO apps. Since you have vtex.order-placed listed in your package.json, you’re correctly using the types that were automatically generated by VTEX IO for vtex.order-placed. But if you take a look at these types (you can find them inside your project’s node_modules folder), you’ll notice that there’s a single entrypoint, in the form of index.d.ts. This single entrypoint then exports all of the modules that you can import from vtex.order-placed. Sooo, instead of having multiple entrypoints, that would enable you to import modules like this: import {...} from 'vtex.order-placed/ModuleName', you always have to import modules like this: import { ModuleName } from 'vtex.order-placed' so that TypeScript doesn’t complain.

For the hooks you’re trying to use, you have to import them like this:

import { OrderContext, OrderGroupContext } from 'vtex.order-placed'

// inside your component
const { useOrderGroup } = OrderGroupContext
const { useOrder } = OrderContext

I know that this is a bit confusing, but this is due to the fact that the tooling we use to generate TypeScript types automatically doesn’t support multiple entrypoints, the same way that VTEX IO supports internally. This issue you’re having is strictly related to TypeScript, there’s nothing wrong with your code .