Typescript dep expected with ReactJS

Using @craco/[email protected] with a ReactJS application.

Application can be found here: https://github.com/waku-org/js-waku-examples/tree/upgrade-js-waku/relay-reactjs-chat

craco.config.js:

const {getLoaders, loaderByName} = require("@craco/craco");

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName("babel-loader"));

            if (hasFoundAny) {
                matches.forEach(c => {
                    // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
                    if (c.loader.test.toString().includes("mjs")) {
                        // If your project uses typescript then do not forget to include `ts`/`tsx`
                        if (c.loader.test.toString().includes('jsx')) {
                            c.loader.test = /\.(js|cjs|mjs|jsx)$/
                        } else {
                            c.loader.test = /\.(js|cjs|mjs)$/
                        }
                    }
                });
            }

            return webpackConfig;
        }
    }
}

When running craco build I am getting:

> craco build

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'typescript'
Require stack:
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/util.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/index.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/loader.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/index.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/config.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/scripts/build.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at projectLocalResolveHelper (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/util.js:117:24)
    at resolveCompiler (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/configuration.js:232:22)
    at resolveAndLoadCompiler (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/configuration.js:225:26)
    at findAndReadConfig (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/configuration.js:48:28)
    at create (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/index.js:146:69)
    at register (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/index.js:127:19)
    at TypeScriptLoader (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/loader.js:7:51)
    at Object.<anonymous> (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/config.js:80:60) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/util.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/index.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/loader.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/index.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/config.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/scripts/build.js'
  ]
}
 ELIFECYCLE  Command failed with exit code 1.

Is that expected? If so, typescript should be added as a peer dependency of @craco/craco, right?

Same issue with estlint (same code after installing typescript):

Run pnpm run build

> [email protected] build /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat
> craco build

Error: Cannot find module 'eslint'
Require stack:
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hh7noc25gsrzvp6vxmzwopgyr4/node_modules/react-scripts/config/webpack.config.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/cra.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/scripts/build.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at module.exports (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hh7noc25gsrzvp6vxmzwopgyr4/node_modules/react-scripts/config/webpack.config.js:771:31)
    at loadWebpackProdConfig (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/cra.js:120:36)
    at overrideWebpackProd (/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/features/webpack/override.js:13:60)
    at /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/scripts/build.js:20:40 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/[email protected]_hh7noc25gsrzvp6vxmzwopgyr4/node_modules/react-scripts/config/webpack.config.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/cra.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@[email protected]_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/scripts/build.js'
  ]
}
 ELIFECYCLE  Command failed with exit code 1.
Error: Process completed with exit code 1.

I have the same issue. My project is not using Typescript but I am forced to add typescript as a devDependency to get CRAO latest alpha to run.

This is weird because typescript is in no way a dependency of CRACO (it's a dev dependency for development but the published version does not require TS).

@fryorcraken I cloned your repo and tested your relay-reactjs-chat package by removing both eslint and typescript from the dev dependencies so that only craco was listed, then installed and built with npm (npm install, npm run build). I didn't get those errors.

This is what I get as soon as I remove typescript from node_modules:

Error: Cannot find module 'typescript'
Require stack:
- C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\util.js
- C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\index.js
- C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\cosmiconfig-typescript-loader\dist\loader.js
- C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\cosmiconfig-typescript-loader\dist\index.js
- C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\@craco\craco\dist\lib\config.js
- C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\@craco\craco\dist\scripts\start.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at projectLocalResolveHelper (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\util.js:117:24)
    at resolveCompiler (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\configuration.js:232:22)
    at resolveAndLoadCompiler (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\configuration.js:225:26)
    at findAndReadConfig (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\configuration.js:48:28)
    at create (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\index.js:146:69)
    at register (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\ts-node\dist\index.js:127:19)
    at TypeScriptLoader (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\cosmiconfig-typescript-loader\dist\loader.js:7:51)
    at Object.<anonymous> (C:\Users\fkrauthan\WebstormProjects\cfps-notam\node_modules\@craco\craco\dist\lib\config.js:80:60) {

@fkrauthan I'd probably recommend against deleting the whole typescript directory from node_modules because even though craco doesn't require it directly, there are other packages that do. You can try doing a fresh install by deleting your node_modules folder and then running npm install in your main directory.

@dilanx sorry but deleting I mean removing it from my package.json as devDependency. Which in return seem to show that at least in my project nothing requires Typescript except somehow Craco (as shown in the error message tree).

@fkrauthan are you using npm as your package manager?

I am using yarn and the yarn workspaces feature

@fkrauthan hmm interesting. I've been testing out different things for a couple of hours.

It looks like this is only an issue when using yarn. Even when I tried adding typescript and ts-node to the peer dependencies in a dev version of craco, the module not found issue was still there.

It looks like yarn doesn't resolve the peer dependencies of cosmiconfig-typescript-loader, which is a dependency of craco to allow for the option to use a TS config. I'm not aware of a fix right now, but if anyone else is, that would be really appreciated! The only solution I can think of right now when using yarn is to install typescript and ts-node as dev dependencies in your project (which won't affect production ofc).

Hmm interesting. Any idea why this only started happening with the new 7.x version and not with the current live version? And is there anyway to dynamic load cosmiconfig-typescript-loader e.g. if typescript config tsconfig file is found?

I might be hitting a similar issue. When I run yarn test (which is the package script TZ=America/New_York craco test), locally everything works. But in GH Actions with the same command I'm receiving:

node:internal/modules/cjs/loader:959
  throw err;
  ^

Error: Cannot find module 'ts-node'
Require stack:
- /home/runner/work/frontend/frontend/node_modules/cosmiconfig-typescript-loader/dist/cjs/index.js
- /home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/lib/config.js
- /home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/scripts/test.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:9[5](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:6)[6](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:7):15)
    at Function.Module._load (node:internal/modules/cjs/loader:804:2[7](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:8))
    at Module.require (node:internal/modules/cjs/loader:102[8](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:9):1[9](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:10))
    at require (node:internal/modules/cjs/helpers:[10](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:11)2:18)
    at Object.<anonymous> (/home/runner/work/frontend/frontend/node_modules/cosmiconfig-typescript-loader/dist/cjs/index.js:28:22)
    at Module._compile (node:internal/modules/cjs/loader:[11](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:12)26:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:[12](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:13))
    at Module.require (node:internal/modules/cjs/loader:1028:[19](https://github.com/convictional/frontend/actions/runs/3200988932/jobs/5228513975#step:13:20)) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/runner/work/frontend/frontend/node_modules/cosmiconfig-typescript-loader/dist/cjs/index.js',
    '/home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/lib/config.js',
    '/home/runner/work/frontend/frontend/node_modules/@craco/craco/dist/scripts/test.js'
  ]
}

I'm using v7.0.0-alpha.8.

EDIT Oh, just seeing this now: https://github.com/dilanx/craco/issues/435

After adding ts-node to my devDependencies everything built as expected. This is a typescript project, which is probably why I wasn't getting the warning about typescript not being found (it's a dependency), but it's a little bit of a bummer that I need to include a dependency unrelated to my or this project just to get my tests to pass in CI. Has anyone brought this up with the cosmicconfig-typescript-loader project yet?

Continuing from above, this looks to be fixed in the latest version of cosmiconfig-typescript-loader:

https://github.com/Codex-/cosmiconfig-typescript-loader/blob/main/package.json#L36-L41

Is there a reason why we're pegged at v1.0.0 and aren't using the latest release?

@curtvict craco 6 is no longer supported, but craco 7 alpha does use the latest release. It appears that this is still an issue even then.

Ah, I was on the wrong branch. Thanks for pointing that out! I'll see if I can get this fixed upstream. Thanks again for your hard work on this.

@curtvict @fkrauthan @fryorcraken I've found a solution that seems to work for now. It seems like it was definitely an issue with the latest version of cosmiconfig-typescript-loader for some reason, not exactly sure why. That's probably something that we can bring up with them. I just released version 7.0.0-alpha.9, where I downgraded the dependency back to what it was when it was working in alpha 3. It seems to work without those module errors now. Please let me know what happens for you all.

@curtvict @fkrauthan @fryorcraken I've found a solution that seems to work for now. It seems like it was definitely an issue with the latest version of cosmiconfig-typescript-loader for some reason, not exactly sure why. That's probably something that we can bring up with them. I just released version 7.0.0-alpha.9, where I downgraded the dependency back to what it was when it was working in alpha 3. It seems to work without those module errors now. Please let me know what happens for you all.

Thanks for that, I can confirm the issue is gone with alpha.9 as demonstrated in https://github.com/waku-org/js-waku-examples/pull/144

Yep, for me too; I was able to remove ts-node as a dev dependency after this update and still successfully build the app.

Hey all! We seem to be having a related issue while running Jest tests written in TypeScript in CRA:

This was never an issue and only started appearing over the past week. Tried with the following craco versions:

"@craco/craco": "^7.0.0"
"@craco/craco": "^7.0.0-alpha.7"
"@craco/craco": "^7.0.0-alpha.9"

Yet the error remains the same. I also suspect cosmiconfig-typescript-loader to be an issue. Any ideas on how to further debug this?