Facing an import error with webpack build

[deprantik]

`<repo_path>/packages/backend/dist/main.js:1688
module.exports = require("<repo_path>/node_modules/file-type/index.js");
^

Error [ERR_REQUIRE_ESM]: require() of ES Module<repo_path>/node_modules/file-type/index.js from <repo_path>/packages/backend/dist/main.js not supported.
Instead change the require of index.js in /Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js to a dynamic import() which is available in all CommonJS modules.
at Object.file-type (<repo_path>/packages/backend/dist/main.js:1688:18)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (<repo_path>/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///../../plugins/ui-components-backend/src/service/routes/components/storybook.ts:5:67)
at Module.../../plugins/ui-components-backend/src/service/routes/components/storybook.ts (<repo_path>/packages/backend/dist/main.js:1240:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (<repo_path>/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///../../plugins/ui-components-backend/src/service/routes/components/index.ts:8:68)
at Module.../../plugins/ui-components-backend/src/service/routes/components/index.ts (<repo_path>/packages/backend/dist/main.js:1218:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (<repo_path>/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///../../plugins/ui-components-backend/src/service/routes/index.ts:7:69)
at Module.../../plugins/ui-components-backend/src/service/routes/index.ts (<repo_path>/packages/backend/dist/main.js:1273:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///../../plugins/ui-components-backend/src/service/router.ts:11:65)
at Module.../../plugins/ui-components-backend/src/service/router.ts (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:1207:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///../../plugins/ui-components-backend/src/index.ts:6:73)
at Module.../../plugins/ui-components-backend/src/index.ts (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:1075:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///./src/plugins/uiComponents.ts:5:96)
at Module../src/plugins/uiComponents.ts (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:305:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at fn (/Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:2207:21)
at eval (webpack-internal:///./src/index.ts:23:80)
at Module../src/index.ts (<repo_path>/packages/backend/dist/main.js:140:1)
at webpack_require (<repo_path>/packages/backend/dist/main.js:2025:33)
at /Users/4095851/lowes-repo/lowes-backstage/packages/backend/dist/main.js:3045:37
at Object. (<repo_path>/packages/backend/dist/main.js:3047:12) {
code: 'ERR_REQUIRE_ESM'
}
`

Can anyone help me how to resolve this?

[sindresorhus]

https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[morpig]

If the package is used in an async context, you could use [await import(…)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) from CommonJS instead of require(…).

can you give example?