Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Typescript dep expected with ReactJS #447

Closed
fryorcraken opened this issue Aug 19, 2022 · 18 comments
Closed

Typescript dep expected with ReactJS #447

fryorcraken opened this issue Aug 19, 2022 · 18 comments

Comments

@fryorcraken
Copy link

Using @craco/craco@7.0.0-alpha.7 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/ts-node@10.9.1_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/util.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/ts-node@10.9.1_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/index.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/cosmiconfig-typescript-loader@2.0.2_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/loader.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/cosmiconfig-typescript-loader@2.0.2_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/index.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/config.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_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/ts-node@10.9.1_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/ts-node@10.9.1_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/ts-node@10.9.1_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/ts-node@10.9.1_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/ts-node@10.9.1_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/ts-node@10.9.1_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/cosmiconfig-typescript-loader@2.0.2_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/@craco+craco@7.0.0-alpha.7_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/ts-node@10.9.1_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/util.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/ts-node@10.9.1_hn66opzbaneygq52jmwjxha6su/node_modules/ts-node/dist/index.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/cosmiconfig-typescript-loader@2.0.2_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/loader.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/cosmiconfig-typescript-loader@2.0.2_uuugrqz3edm4besh7o7mb3boy4/node_modules/cosmiconfig-typescript-loader/dist/index.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/config.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_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?
fryorcraken added a commit to waku-org/examples.waku.org that referenced this issue Aug 19, 2022
@fryorcraken
build(react-relay-js): craco needs typescript
ed6c16d 
ref: dilanx/craco#447
fryorcraken added a commit to waku-org/examples.waku.org that referenced this issue Aug 19, 2022
@fryorcraken
build(react-relay-js): craco needs typescript
9021fdc 
ref: dilanx/craco#447
fryorcraken added a commit to waku-org/examples.waku.org that referenced this issue Aug 19, 2022
@fryorcraken
build(react-relay-js): craco needs typescript
0455636 
ref: dilanx/craco#447
fryorcraken added a commit to waku-org/examples.waku.org that referenced this issue Aug 19, 2022
@fryorcraken
build(react-relay-js): craco needs typescript
3e97e01 
ref: dilanx/craco#447
@fryorcraken
Copy link
Author

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

Run pnpm run build

> relay-reactjs-chat@0.1.0 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/react-scripts@5.0.1_hh7noc25gsrzvp6vxmzwopgyr4/node_modules/react-scripts/config/webpack.config.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/cra.js
- /home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_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/@cspotcode+source-map-support@0.8.1/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/react-scripts@5.0.1_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/@craco+craco@7.0.0-alpha.7_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/@craco+craco@7.0.0-alpha.7_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/@craco+craco@7.0.0-alpha.7_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/react-scripts@5.0.1_hh7noc25gsrzvp6vxmzwopgyr4/node_modules/react-scripts/config/webpack.config.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/lib/cra.js',
    '/home/runner/work/js-waku-examples/js-waku-examples/relay-reactjs-chat/node_modules/.pnpm/@craco+craco@7.0.0-alpha.7_6dh3mp4abgujcafyrw5alwgbbe/node_modules/@craco/craco/dist/scripts/build.js'
  ]
}
 ELIFECYCLE  Command failed with exit code 1.
Error: Process completed with exit code 1.

@fkrauthan
Copy link

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.

@dilanx
Copy link
Owner

dilanx commented Oct 2, 2022

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.

@fkrauthan
Copy link

fkrauthan commented Oct 2, 2022 •
edited
Loading

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) {

@dilanx
Copy link
Owner

dilanx commented Oct 2, 2022

@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.

@fkrauthan
Copy link

@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).

@dilanx
Copy link
Owner

dilanx commented Oct 2, 2022

@fkrauthan are you using npm as your package manager?

@fkrauthan
Copy link

I am using yarn and the yarn workspaces feature

@dilanx
Copy link
Owner

dilanx commented Oct 2, 2022

@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).

@dilanx dilanx moved this to For Later in CRACO Tasks Oct 2, 2022
@fkrauthan
Copy link

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?

@curtvict
Copy link
Contributor

curtvict commented Oct 6, 2022 •
edited
Loading

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: #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?

@curtvict
Copy link
Contributor

curtvict commented Oct 7, 2022

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?

@dilanx
Copy link
Owner

dilanx commented Oct 7, 2022

@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.

@curtvict
Copy link
Contributor

curtvict commented Oct 7, 2022

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.

This was referenced Oct 20, 2022
Closed
Open
@dilanx dilanx mentioned this issue Oct 27, 2022
Closed
@dilanx
Copy link
Owner

dilanx commented Oct 27, 2022

@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.

@fryorcraken
Copy link
Author

fryorcraken commented Oct 28, 2022 •
edited
Loading

@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 waku-org/examples.waku.org#144

Repository owner moved this from For Later to Done in CRACO Tasks Oct 28, 2022
@curtvict
Copy link
Contributor

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

@drummerjolev
Copy link

Hey all! We seem to be having a related issue while running Jest tests written in TypeScript in CRA:
Screenshot 2022-12-06 at 11 50 06

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?

weboko pushed a commit to waku-org/examples.waku.org that referenced this issue Dec 9, 2022
@fryorcraken @anonlinux777
build(react-relay-js): craco needs typescript
e2466f9 
ref: dilanx/craco#447
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
CRACO Tasks
Status: Done
Milestone
No milestone
Development

No branches or pull requests
5 participants
@fkrauthan @drummerjolev @dilanx @curtvict @fryorcraken