agilgur5
commented
1 year ago text > screenshots
Please note that text is strongly preferred over screenshots when reporting GitHub issues (or StackOverflow questions, per the link), as text can be copied, searched, etc and is significantly more accessible, while screenshots cannot / are not nearly as accessible.
As you used a screenshot, I did have to manually transpose the text of the error here:
src/index.ts → dist/index.esm.mjs...
[!] (plugin rpt2) Error: src/index.ts:2:15 - error: TS2792: Cannot find module './logic'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
2 export * from './logic';MJS usage
Based on your code, this looks to be because of your usage of MJS, i.e. the ESM spec, along with how TS has changed up resolution in this space in recent times with nodenext / node16 and, as introduced in TS 5.0, bundler.
Specifically, the 3 imports / exports you're getting an error on are all directory imports.
Per the Node ESM docs, directory imports must be fully specified:
Directory indexes (e.g. './startup/index.js') must also be fully specified.
So, as far as I can tell, this actually seems like a bug from when the MJS extension was specified back in https://github.com/react-hook-form/react-hook-form/pull/7262, just that TS / Node just didn't error out on it before, whereas it has a stricter adherence to the spec now.
TS 5.0 support
TS 5.0 is still in beta, so I think we'll want to wait for a stable release before supporting things that might change beforehand.
In particular, rpt2 will probably have to update some code to support the new moduleResolution: "bundler" (as linked above).
nodenext / node16 were going to cause breakage with the Rollup integration, so I hadn't taken the plunge to attempt to implement those, especially as no one requested them, but this new mode is a different story as it is specifically built to be used with bundlers like Rollup.
bluebill1049
Thiago-Offredi
Troubleshooting
Does
tschave the same output? If so, please explain why this is incorrect behaviorIt's working correctly with
tscDoes your Rollup plugin order match? If not, please elaborate
Rollup config hasn't been changed for years and looks like the order is not an issue: https://github.com/react-hook-form/react-hook-form/blob/master/scripts/rollup/createRollupConfig.js#L14-L44
Can you create a minimal example that reproduces this behavior? Preferably, use this environment for your reproduction
Here is the PR: https://github.com/react-hook-form/react-hook-form/pull/9834
What happens and why it is incorrect
Related to
export *Environment
Github action and local build
Versions
```js const config = { input: options.input, output: { file: outputName, format: options.format, name: 'ReactHookForm', sourcemap: true, globals: { react: 'React' }, exports: 'named', }, plugins: [ external(), typescript({ tsconfig: options.tsconfig, clean: true, exclude: ['**/__tests__', '**/*.test.ts'], }), options.format === 'umd' && commonjs({ include: /\/node_modules\//, }), sourcemaps(), options.format !== 'esm' && terser({ output: { comments: false }, compress: { drop_console: true, }, }), ].filter(Boolean), }; ```
:rollup.config.js
```json5 { "compilerOptions": { "sourceMap": true, "module": "es2015", "target": "es2018", "moduleResolution": "node", "outDir": "./dist", "jsx": "react", "skipLibCheck": true, "declaration": true, "declarationMap": true, "noEmit": true, "esModuleInterop": true, "lib": ["dom", "dom.iterable", "esnext"], "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true }, "include": ["src"], "exclude": [ "node_modules", "app", "examples", "cypress", "src/*.test.ts", "src/*.test.tsx", "src/*.test-d.ts", "src/*.test-d.tsx", "src/__mocks__" ] } ```
:tsconfig.json
```json { "name": "react-hook-form", "description": "Performant, flexible and extensible forms library for React Hooks", "version": "7.42.1", "main": "dist/index.cjs.js", "module": "dist/index.esm.mjs", "umd:main": "dist/index.umd.js", "unpkg": "dist/index.umd.js", "jsdelivr": "dist/index.umd.js", "jsnext:main": "dist/index.esm.mjs", "source": "src/index.ts", "types": "dist/index.d.ts", "sideEffects": false, "files": [ "dist", "dist/__tests__" ], "exports": { "./package.json": "./package.json", ".": { "types": "./dist/index.d.ts", "import": "./dist/index.esm.mjs", "require": "./dist/index.cjs.js" } }, "scripts": { "clean": "rimraf dist", "prebuild": "pnpm clean", "build": "pnpm build:modern", "build:watch": "pnpm build:modern -w", "postbuild": "rimraf dist/__tests__ && node ./scripts/rollup/assert-esm-exports.mjs && node ./scripts/rollup/assert-cjs-exports.cjs", "build:modern": "rollup -c ./scripts/rollup/rollup.config.js", "build:esm": "rollup -c ./scripts/rollup/rollup.esm.config.js", "prettier:fix": "prettier --config .prettierrc --write \"**/*.{js,ts,tsx,css}\"", "lint": "eslint '**/*.{js,ts,tsx}'", "lint:fix": "pnpm lint --fix", "type": "tsc --noEmit", "jest-preview": "jest-preview", "test": "jest --config ./scripts/jest/jest.config.js", "test:coverage": "pnpm test -- --coverage", "test:watch": "pnpm test -- --onlyChanged --watch", "test:web": "TEST_ENV=web pnpm test", "test:type": "tsd src/__typetest__", "e2e": "cypress run", "e2e:watch": "cypress open", "api-extractor": "api-extractor run --local", "api-extractor:build": "pnpm build:esm && pnpm api-extractor", "api-extractor:ci": "node scripts/apiExtractor.js", "postversion": "git push && git push origin v$npm_package_version", "prepublishOnly": "pnpm install && pnpm lint:fix && pnpm type && pnpm test && pnpm build", "bundlewatch": "pnpm build:modern && bundlewatch", "start": "pnpm build:esm && pnpm --dir ./app install && pnpm --dir ./app run dev" }, "keywords": [ "react", "hooks", "form", "forms", "form-validation", "validation", "typescript", "react-hooks" ], "repository": { "type": "git", "url": "https://github.com/react-hook-form/react-hook-form" }, "homepage": "https://www.react-hook-form.com", "author": "
:package.json