Issue when using svelte^4.0.0

[ppcamp]

Describe the bug Typescript/ svelte-check warnings.

To Reproduce Steps to reproduce the behavior:

1. Create a sveltekit empty project with typescript & eslint support (in my case, I've used the vite cli)
2. Install the Textfield package (and setup a basic env as you may check in docs) and use it in some page component (just copy the textfied example)
3. Run npm run check
4. You'll see a lot of errors.

If you add "moduleResolution": "bundler" to your tsconfig.json file, you'll see that now we have binding issues (the variables are now typed as functions)

Expected behavior We shouldn't see such errors in svelte^4.0.0.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 | wsl2 (with Ubuntu LTS)
• Browser: Chromium based
• Version: latest available (which, for some reason, is the 7.0.0-beta.9)

Additional context Doing my tests, I've noticed that, if after I create the project, I just rollback to the svelte^3.50.0, I don't have any issue anymore.

[hperrin]

Thank you for the report. I'm looking into this right now actually. :) I'm going through the migration steps for Svelte v4.

[hperrin]

I made a lot of progress on this today, you can see in these two commits:

https://github.com/hperrin/svelte-material-ui/commit/51d2411a5630ca5511ad9e79a2f333339998f939 https://github.com/hperrin/svelte-material-ui/commit/4476f3ab3b77df32b53b610c4ce2ecdc3b0fcd96

There are still issues to work through before it will pass type checks for Svelte 4. I'll continue working on it tomorrow.

Btw, there are breaking changes with this, so the next version will not be compatible with Svelte 3.

[hperrin]

The latest commit looks like it's working with Svelte 4 well. No more type errors!

[ppcamp]

Thanks @hperrin . Later today I'll try it out.

[hperrin]

I had to use a @ts-ignore for the "svelte/internal" import, and I'm trying to get rid of that before I release a new version. If I can't by this afternoon, I'll release what I have.

[ppcamp]

I just cloned the repo and typed npm i (which builds all packages, I suppose),

And I'm getting this error

       > @smui-extra/site@7.0.0-beta.9 smui-unity-light
       > smui-theme compile static/smui-unity.css -s expanded -i src/theme/unity -i node_modules/

       Compiling SMUI Styles...
       Writing CSS to static/smui-unity.css...

       > @smui-extra/site@7.0.0-beta.9 smui-unity-dark
       > smui-theme compile static/smui-unity-dark.css -s expanded -i src/theme/unity-dark -i node_modules/

       Compiling SMUI Styles...
       Writing CSS to static/smui-unity-dark.css...

       > @smui-extra/site@7.0.0-beta.9 site-unity-light
       > sass --no-source-map -I src/theme/unity -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-unity.css

       > @smui-extra/site@7.0.0-beta.9 site-unity-dark
       > sass --no-source-map -I src/theme/unity-dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-unity-dark.css

       vite v4.3.9 building SSR bundle for production...
       transforming...
       ✓ 444 modules transformed.
       ✓ built in 3.64s
       Could not resolve "./ambient" from "../paper/dist/index.js"
       file: /home/ppcamps/my/svelte-material-ui/packages/paper/dist/index.js
       error during build:
       RollupError: Could not resolve "./ambient" from "../paper/dist/index.js"
           at error (file:///home/ppcamps/my/svelte-material-ui/node_modules/rollup/dist/es/shared/node-entry.js:2213:30)
           at ModuleLoader.handleInvalidResolvedId (file:///home/ppcamps/my/svelte-material-ui/node_modules/rollup/dist/es/shared/node-entry.js:24219:24)
           at file:///home/ppcamps/my/svelte-material-ui/node_modules/rollup/dist/es/shared/node-entry.js:24181:26
       npm ERR! Lifecycle script `build` failed with error: 
       npm ERR! Error: command failed 
       npm ERR!   in workspace: @smui-extra/site@7.0.0-beta.9 
       npm ERR!   at location: /home/ppcamps/my/svelte-material-ui/packages/site 

 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————
 >  Lerna (powered by Nx)   Ran target build for 44 projects (2m)

    ✔    43/44 succeeded [0 read from cache]

    ✖    1/44 targets failed, including the following:
         - @smui-extra/site:build

npm ERR! code 1
npm ERR! path /home/ppcamps/my/svelte-material-ui
npm ERR! command failed
npm ERR! command sh -c lerna run build

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ppcamps/.npm/_logs/2023-06-27T18_32_40_612Z-debug-0.log

Hence, I also tried the following:

1. Cloned the repo
2. Went to svelte-material-ui/packages/textfield
3. npm run build
4. cd dist && npm pack
5. Went back to my "vite-testing-project" and run npm i ../svelte-material-ui/packages/textfield/dist/smui-textfield-7.0.0-beta.9.tgz
6. Run npm run check, which threw this new error

> textsvelte@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json

====================================
Loading svelte-check in workspace: /home/ppcamps/my/textsvelte
Getting Svelte diagnostics...

/home/ppcamps/my/textsvelte/node_modules/@smui/common/src/internal/forwardEventsBuilder.ts:7:8
Error: Cannot find module 'svelte/internal' or its corresponding type declarations. 
  stop_propagation,
} from 'svelte/internal';

====================================
svelte-check found 1 error and 0 warnings in 1 file

And when I run the npm run dev, I'm getting this error now:

3:59:57 PM [vite] Error when evaluating SSR module /node_modules/@smui/textfield/dist/index.js: failed to import "./ambient"
|- Error: Failed to load url ./ambient (resolved id: ./ambient) in /home/ppcamps/my/textsvelte/node_modules/@smui/textfield/dist/index.js. Does the file exist?
    at loadAndTransform (file:///home/ppcamps/my/textsvelte/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53376:21)

3:59:57 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/node_modules/@smui/textfield/dist/index.js"
|- Error: Failed to load url ./ambient (resolved id: ./ambient) in /home/ppcamps/my/textsvelte/node_modules/@smui/textfield/dist/index.js. Does the file exist?
    at loadAndTransform (file:///home/ppcamps/my/textsvelte/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53376:21)

Internal server error: Failed to load url ./ambient (resolved id: ./ambient) in /home/ppcamps/my/textsvelte/node_modules/@smui/textfield/dist/index.js. Does the file exist?

[hperrin]

I figured out a solution for the ./ambient issue.

[ppcamp]

Is there something I could do to help?

[hperrin]

Sure. Do you want to run your tests again and confirm they're working for you too? I don't get any errors locally on the latest commit.

[hperrin]

The only issue I'm having now is with the segmented button component. There's an issue with the component in MDC-Web 14, where it doesn't have its exports in package.json. I wish they would release a 14.0.1 to fix it.

[hperrin]

I think it's because it requires everything to be modules now. I'm going to change it to the module version, but then it might complain that package.json doesn't declare that it's a module.

[hperrin]

Yeah, segmented button is broken in the latest release. :(

[hperrin]

I'm just going to copy the code from MDC-Web and include it in the package.

[hperrin]

Done! SMUI is working with Svelte 4 in version 7.0.0-beta.12!

[ppcamp]

Sorry for the late response, just tested. It's working now, thxs