Error: Cannot find module 'typescript'

[mustafa0x]

Seems like this can't be installed unless the project uses typescript?

[chanced]

that shouldn't be the case. I'll look into it and let you know.

[chanced]

Actually, I forgot about the repl, which works without typescript. I'm not sure what would cause an issue otherwise.

I'll look into it sometime today or tomorrow to see what could be causing that error. Could you provide more detail on the log?

[mustafa0x]

Require stack:
- /path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/transformers/typescript.js
- /path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/autoProcess.js
- /path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/index.js
- /path-to-app/rollup.config.js
- /path-to-app/node_modules/.pnpm/rollup@2.58.0/node_modules/rollup/dist/shared/loadConfigFile.js
- /path-to-app/node_modules/.pnpm/rollup@2.58.0/node_modules/rollup/dist/bin/rollup

node_modules/.pnpm/filedrop-svelte@0.0.12/node_modules/filedrop-svelte/components/FileDrop/FileDrop.svelte
Error: Cannot find module 'typescript'
Require stack:
- /path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/transformers/typescript.js
- /path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/autoProcess.js
- /path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/index.js
- /path-to-app/rollup.config.js
- /path-to-app/node_modules/.pnpm/rollup@2.58.0/node_modules/rollup/dist/shared/loadConfigFile.js
- /path-to-app/node_modules/.pnpm/rollup@2.58.0/node_modules/rollup/dist/bin/rollup
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/path-to-app/node_modules/.pnpm/svelte-preprocess@4.9.8_postcss@8.3.9+svelte@3.44.0/node_modules/svelte-preprocess/dist/transformers/typescript.js:8:38)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)

Probably because I have svelte-preprocess installed?

[chanced]

hmm, maybe. I'll see if I can recreate it locally.

[chanced]

I pushed a new version that fixes issues that have arisen with svelte-kit since I published the package but I wasn't able to recreate your issue specifically.

Could you try pulling to see if it is resolved? If not, could you possibly create a repo with your current rollup & package.json?

[mustafa0x]

Minimal reproduction:

fdrop.zip

fdrop-repro/
├── package.json
├── pnpm-lock.yaml
├── rollup.config.js
└── src
    ├── App.svelte
    └── main.js

$> pnpm i && pnpx rollup -c

src/main.js → bundle.js...
[!] (plugin svelte) Error: Cannot find module 'typescript'

svelte-preprocess is indeed the culprit. Thanks for looking into this.

[chanced]

Thanks for the src. It is definitely a weird one. I tried adding Typescript, just to see if I could get past that error and I'm getting

[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
node_modules/filedrop-svelte/components/FileDrop/FileDrop.css (1:10)

which doesn't exist.

src/main.js → bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
node_modules/filedrop-svelte/components/FileDrop/FileDrop.css (1:10)
1: p.svelte-1r2u3jm.svelte-1r2u3jm{background-color:#f0f0f0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0.375rem;border:0.7em dashed #c3c3c3;outline:1em solid #f0f0f0;transition:border 0.3s ease-in-out;outline-offset:-1.3em;padding:0.475em}p.svelte-1r2u3jm.svelte-1r2u3jm:focus{border-color:#2196f3}p.svelte-1r2u3jm.svelte-1r2u3jm:hover{border-color:#343434}p.svelte-1r2u3jm span.svelte-1r2u3jm{transition:color 0.1s;transition:fill 0.1s}p.svelte-1r2u3jm:focus span.svelte-1r2u3jm{color:#2196f3;fill:#2196f3}p.svelte-1r2u3jm:hover span.svelte-1r2u3jm,p.svelte-1r2u3jm span.svelte-1r2u3jm{color:#373737;font-size:1.2em;cursor:default;align-content:center}
             ^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/chance/Projects/fdrop-repro/node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (/Users/chance/Projects/fdrop-repro/node_modules/rollup/dist/shared/rollup.js:12382:16)
    at Module.tryParse (/Users/chance/Projects/fdrop-repro/node_modules/rollup/dist/shared/rollup.js:12785:25)
    at Module.setSource (/Users/chance/Projects/fdrop-repro/node_modules/rollup/dist/shared/rollup.js:12688:24)
    at ModuleLoader.addModuleSource (/Users/chance/Projects/fdrop-repro/node_modules/rollup/dist/shared/rollup.js:22161:20)

Weird, let me see if I can get around this without the typescript dep.

[chanced]

I was able to get it to bundle using the following config:

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import svelte from "rollup-plugin-svelte";
import svelte_preprocess from "svelte-preprocess";

const production = !process.env.ROLLUP_WATCH;

export default {
    input: "src/main.js",
    output: {
        format: "esm",
        file: "bundle.js",
    },
    plugins: [
        svelte({
            emitCss: false, // <-- this was changed as there isn't a plugin to handle css
            compilerOptions: {
                dev: !production,
            },
            preprocess: svelte_preprocess(), // <-- this was changed, but it doesn't have any impact
        }),

        resolve({
            browser: true,
            dedupe: (importee) =>
                importee === "svelte" || importee.startsWith("svelte/"),
        }),
        commonjs(),
    ],
    watch: {
        clearScreen: false,
    },
};

▶ npm run dev

> dev
> pnpx rollup -c

src/main.js → bundle.js...

[rollup-plugin-svelte] The following packages did not export their `package.json` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.

- tslib

created bundle.js in 755ms

[chanced]

it could be that I have typescript installed globally though. Try that and see if it works on your end please.

[mustafa0x]

Yeah, I removed the CSS related code since the typescript issue was occurring before it.

[chanced]

@mustafa0x I've opened a ticket on sveltekit to see if there are possible workarounds or if possibly something that could be addressed in kit (which is what this package was bundled with).

In the meantime, the only workaround I have to offer is to add typescript to your project.

I apologize about the inconvenience.

[chanced]

This seems resolved in 0.1.1. Delete your lock file and your node_modules and update dependencies.

If, for some reason, it doesn't work with pnpm, please try with npm.

[mustafa0x]

Resolved, thank you!