[SOLVED] After upgrading to Snowpack 3 cannot find files

After upgrading to Snowpack 3 cannot find files

I'm using Snowpack + Svelte. After upgrading to Snowpack 3 is not working anymore and I can't configure mount in snowpack.config.js properly.

Don't understand exactly why it cannot find App.js also it's trying to find .jsx, .ts...

[404] /_dist_/screens/App.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="global.css">
    <script type="module" defer src="_dist_/main.js"></script>
</head>

<body>
</body>
</html>

And then in my snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  plugins: [
    '@snowpack/plugin-svelte',
    '@snowpack/plugin-dotenv',
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
  alias: {
    components: './src/components',
    screens: './src/screens',
    lib: './src/lib'
  },
};

I also tried:

  mount: {
    // Same behavior as the "src" example above:
    "src": {url: "/dist"},
    // Mount "public" to the root URL path ("/*") and serve files with zero transformations:
    "public": {url: "/", static: true, resolve: false}
  },

So now it's complaining less but still not working

[snowpack] [404] /_dist_/main.js

Files structure

root
--node-modules
--public
----global.css
----index.html
--src
----components
----lib
----screens
----main.js
--snowpack.config.js
...

package.json

  "devDependencies": {
    "@snowpack/plugin-dotenv": "^2.0.5",
    "@snowpack/plugin-svelte": "^3.5.0",
    "@snowpack/web-test-runner-plugin": "^0.2.1",
    "@testing-library/svelte": "^3.0.3",
    "@web/test-runner": "^0.12.2",
    "chai": "^4.2.0",
    "smart-webcomponents": "^9.0.0",
    "snowpack": "^3.0.10",
    "svelte": "^3.31.2",
    "svelte-i18n": "^3.3.0"
  }

Any help or idea will be really appreciated.

Solution

Just add .svelte when you import your components.

import App from 'screens/App.svelte'

Please, check this https://github.com/snowpackjs/snowpack/pull/2014#issuecomment-756624333 if you wanna dive deeper.