Currently, I am immersed in a project with the following arrangement:
/ # repository root
/core # A local, unpublished npm package used by both projectA and projectB
/projectA # A Next.js app
/projectB # Another Next.js app
In my setup, I generate a core-1.0.0.tgz file by running tsc && npm pack on /core/package.json and /core/tsconfig.json. The transpilation process seems to run smoothly without any errors, resulting in the expected transpiled .js code being present in the .tgz file.
/core/tsconfig.json
{
"compilerOptions": {
"lib": ["es2022", "DOM"],
"module": "commonjs",
"target": "es2022",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": ".compiled",
"declaration": true,
"jsx": "react"
},
"include": ["./index.ts"]
}
/core/package.json
{
"name": "core",
"version": "1.0.0",
"engines": {
"node": "18.15.0"
},
"main": "./.compiled/index.js",
"types": "./.compiled/index.d.ts",
"files":[
"./.compiled/**"
],
"scripts": {
"test": "ts-node ./tests.ts",
"build": "npm install && npm run test && tsc && npm pack"
},
"dependencies": {
...
"@uppy/aws-s3": "3.3.1",
...
}
...
}
To integrate the core package into projectA, I modify /projectA/package.json as follows:
...
"dependencies": {
...
"core": "../core/core-1.0.0.tgz",
...
},
...
After executing npm install in /projectA, everything appears functional. Upon inspection of projectA/node_modules, not only do I see the transpiled JS files under the core folder, but also the dependencies from core have been installed into projectA/node_modules.
However, upon launching projectA, an error surfaces immediately related to a core import, stating:
Error: require() of ES Module C:\dev\repo\projectA\node_modules\@uppy\aws-s3\lib\index.js from C:\dev\repo\projectA\node_modules\core\.compiled\library\components\file-uploader\FileUploader.js not supported.
Instead change the require of index.js in C:\dev\repo\projectA\node_modules\core\.compiled\library\components\file-uploader\FileUploader.js to a dynamic import() which is available in all CommonJS modules.
@uppy/aws-s3 stands as one of the sub-dependencies of core. The error emanates from FileUploader.js, a transpiled version of FileUploader.ts React component designed as a UI wrapper for @uppy. Although understanding the error message, I feel slightly disoriented amidst the layers. Presumably, tweaking /core/tsconfig.json is necessary, yet pinpointing precisely what requires alteration remains elusive.
/core/.../FileUploader.ts
import UppyAwsS3 from '@uppy/aws-s3'
import Uppy, { SuccessResponse, UppyFile } from '@uppy/core'
import UppyDashboard from '@uppy/dashboard'
import cx from 'classnames'
import React from 'react'
interface Props {
className?: string
fullWidth: boolean
...
}
interface State {}
class FileUploader extends React.Component<Props, State> {
...
render = () => {
return (
<div className={cx('FileUploader', this.props.className, this.props.fullWidth && 'FileUploader--fullWidth')}>
...
</div>
)
}
}
export default FileUploader
Provided here is /projectA/tsconfig.json for reference:
{
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"jsx": "preserve",
"lib": ["ES2022", "dom"],
},
"exclude": [
"node_modules"
]
}
If anyone holds insights on establishing this shared TypeScript package, or notices discrepancies in my current setup, your assistance would be highly appreciated.
Edit: Advice has been given to refer to this question. However, my scenario involves TypeScript rather than plain JavaScript. My inquiry pertains to configuring tsc to compile the correct import syntax, allowing Next.js to utilize the shared FileUploader component from my core CommonJS package dependent on the ESM package @uppy/aws-s3.
Update: To aid in troubleshooting, I've prepared a basic sample project illustrating the error. It can be accessed here.