Failed to load node_modules/svelte-router-spa/src/components/navigate.svelte

[nezlicodes]

I am having troubles with my build. I keep getting this error message:

[snowpack] ! installing dependencies...
[snowpack] Failed to load node_modules/svelte-router-spa/src/components/navigate.svelte
  Try installing rollup-plugin-svelte and adding it to Snowpack (https://www.snowpack.dev/#custom-rollup-plugins)
[snowpack] Install failed.

Here is my snowpack.config.js file

module.exports = {
  plugins: ['@snowpack/plugin-webpack', '@snowpack/plugin-svelte'],
  installOptions: {
    rollup: { plugins: [require('rollup-plugin-svelte')()] }
  },
  extends: '@snowpack/app-scripts-svelte',
  proxy: {
    '/api': 'http://localhost:3000/api',
  },
  devOptions: {
    out: 'dist/',
    port: 4242,
  },
  buildOptions: {
    baseUrl: 'dist/',
  },
  alias: {
    '@components': './src/components',
    '@state': './src/state',
    '@features': './src/features',
    '@models': './src/models',
    '@themes': './src/themes',
  },
}

Am I doing this wrong?
Thanks in advance for your help.

Versions :
"rollup-plugin-svelte": "^7.0.0".
"snowpack": "^2.18.4".
"svelte-router-spa": "^5.8.3"

[FredKSchott]

Interesting. There was a bug around this that was recently fixed in 2.18.3, but it sounds like you would have picked this us with ^2.18.4. Can you run with the --verbose and share your output?

[ztyankov]

I'm having the same issue when trying to use the latest version of the svelte-spa-router in my Snowpack-Svelte-TS-TW setup.

Here are the installed package versions:

• snowpack: 2.18.5
• rollup-plugin-svelte: 7.0.0
• svelte-spa-router: 3.1.0

Here is the verbose output from the npm start command:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start',
1 verbose cli   '--verbose'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle @~prestart: @
6 info lifecycle @~start: @
7 verbose lifecycle @~start: unsafe-perm in lifecycle true
8 verbose lifecycle @~start: PATH: C:\Users\Zdravko\AppData\Roaming\nvm\v12.20.0\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\.bin;...
9 verbose lifecycle @~start: CWD: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw
10 silly lifecycle @~start: Args: [ '/d /s /c', 'snowpack dev' ]
11 silly lifecycle @~start: Returned: code: 1  signal: null
12 info lifecycle @~start: Failed to exec start script
13 verbose stack Error: @ start: `snowpack dev`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\Zdravko\AppData\Roaming\nvm\v12.20.0\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\Zdravko\AppData\Roaming\nvm\v12.20.0\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1022:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid @
15 verbose cwd D:\@Learning\100-days-projects\snowpack-svelte-ts-tw
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start" "--verbose"
18 verbose node v12.20.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error @ start: `snowpack dev`
22 error Exit status 1
23 error Failed at the @ start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

and my snowpack.config.js:

module.exports = {
    extends: "@snowpack/app-scripts-svelte",
    mount: {
        public: "/",
        src: "/_dist_",
    },
    plugins: [
        [
            "@snowpack/plugin-build-script",
            { cmd: "postcss", input: [".css"], output: [".css"] },
        ],
        "@snowpack/plugin-svelte",
        "@snowpack/plugin-dotenv",
        "@snowpack/plugin-typescript",
    ],
    install: [
        /* ... */
    ],
    installOptions: {
        installTypes: true,
        installOptions: {
            rollup: {
                plugins: [
                    require("rollup-plugin-svelte")({
                        include: ["./node_modules"],
                    })
                ]
            }
        },
    },
};

Thank you in advance for your help :)

[ztyankov]

Unfortunately, I'm getting the same error with [email protected].

[FredKSchott]

Okay, would love to help find out what's wrong here.

That output is all npm and I don't see anything about Snowpack. Can you run snowpack dev directly (not through npm) so that we can see what the error message is? Bonus points if you can share the snowpack dev --verbose output as well.

[ztyankov]

Hi @FredKSchott,

Thank you very much for looking into this issue!

After looking into this issue a bit further and trying different things, I was able to resolve it on my own.

Here is the solution that worked for me:

Remove this line from the `snowpack.config.js` file:

extends: "@snowpack/app-scripts-svelte",

I got the idea by testing the same router pkg in a different template with just Svelte and TS. There I was running snowpack 2.18.5 and my snowpack.config.js was a little bit different, because I wanted to compile Svelte Material UI with Sass.

Running the verbose version of the command generated 5k lines log file. So I'm providing the last run iteration:

 Console

[snowpack] run command: dev
[snowpack] loaded plugin: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\@snowpack\plugin-svelte\plugin.js
[snowpack] loaded plugin: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\@snowpack\plugin-dotenv\plugin.js
[snowpack] loaded plugin: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\@snowpack\plugin-build-script\plugin.js
[snowpack] loaded plugin: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\@snowpack\plugin-svelte\plugin.js
[snowpack] loaded plugin: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\@snowpack\plugin-dotenv\plugin.js
[snowpack] loaded plugin: D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\@snowpack\plugin-typescript\plugin.js
[snowpack] config loaded: {
  root: 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw',
  plugins: [
    {
      name: '@snowpack/plugin-svelte',
      resolve: [Object],
      knownEntrypoints: [Array],
      load: [AsyncFunction: load],
      markChanged: [Function]
    },
    { name: '@snowpack/plugin-dotenv', markChanged: [Function] },
    {
      name: 'build:postcss',
      resolve: [Object],
      load: [AsyncFunction: load],
      markChanged: [Function]
    },
    {
      name: '@snowpack/plugin-svelte',
      resolve: [Object],
      knownEntrypoints: [Array],
      load: [AsyncFunction: load],
      markChanged: [Function]
    },
    { name: '@snowpack/plugin-dotenv', markChanged: [Function] },
    {
      name: '@snowpack/plugin-typescript',
      run: [AsyncFunction: run],
      markChanged: [Function]
    },
    {
      name: '@snowpack/plugin-esbuild',
      resolve: [Object],
      load: [AsyncFunction: load],
      cleanup: [Function: cleanup]
    }
  ],
  alias: {},
  exclude: [
    '**/node_modules/**/*',
    'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\build/**/*'
  ],
  routes: [],
  devOptions: {
    secure: false,
    hostname: 'localhost',
    port: 8080,
    open: 'default',
    output: 'dashboard',
    hmrDelay: 0,
    hmrPort: undefined,
    hmrErrorOverlay: true
  },
  buildOptions: {
    out: 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\build',
    baseUrl: '/',
    metaUrlPath: '/_snowpack',
    clean: true,
    sourcemap: false,
    watch: false,
    htmlFragments: false,
    ssr: false
  },
  testOptions: { files: [ '__tests__/**/*', '**/*.@(spec|test).*' ] },
  packageOptions: {
    source: 'local',
    external: [],
    packageLookupFields: [ 'svelte', 'svelte' ],
    knownEntrypoints: [
      'svelte/internal',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte/internal',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js'
    ],
    installTypes: true,
    installOptions: { rollup: [Object] },
    rollup: { plugins: [Array] }
  },
  mount: {
    'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\public': { url: '/', static: false, resolve: true },
    'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\src': { url: '/_dist_', static: false, resolve: true }
  },
  extends: '@snowpack/app-scripts-svelte',
  experiments: {},
  optimize: undefined,
  _extensionMap: {
    '.svelte': [ '.js', '.css' ],
    '.css': [ '.css' ],
    '.mjs': [ '.js' ],
    '.jsx': [ '.js' ],
    '.ts': [ '.js' ],
    '.tsx': [ '.js' ]
  }
}
[snowpack] lockfile not loaded
[snowpack] attaching console.log listeners
[snowpack] dashboard started
[snowpack] Using in-memory cache.
[snowpack] Mounting directories:
[snowpack]  -> 'D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\public' as URL '/'
[snowpack]  -> 'D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\src' as URL '/_dist_'
[snowpack] Using cache folder: node_modules\.cache\snowpack\development
[snowpack] Cache out of date or missing. Updating...
[snowpack] Scanning public\index.html for imports as HTML
[snowpack] Skip scanning public\logo.svg for imports (unknown file extension .svg)
[snowpack] Skip scanning public\robots.txt for imports (unknown file extension .txt)
[snowpack] Scanning src\App.svelte for imports as HTML
[snowpack] Scanning src\index.ts for imports as JS
[snowpack] Scanning src\routes.ts for imports as JS
[snowpack] Scanning src\routes\Dashboard.svelte for imports as HTML
[snowpack] Scanning src\routes\Home.svelte for imports as HTML
[snowpack] Scanning src\routes\NotFound.svelte for imports as HTML
[snowpack] Scanning src\styles\Tailwind.css for imports as CSS
[snowpack] ! building dependencies...
[snowpack] D:\@Learning\100-days-projects\snowpack-svelte-ts-tw
[snowpack] running installer with options: {
  input: {
    svelte: 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte\\index.mjs',
    'svelte-hmr/runtime/hot-api-esm': 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte-hmr\\runtime\\hot-api-esm.js',
    'svelte-hmr/runtime/proxy-adapter-dom': 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte-hmr\\runtime\\proxy-adapter-dom.js',
    'svelte-spa-router': 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte-spa-router\\Router.svelte',
    'svelte/easing': 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte\\easing\\index.mjs',
    'svelte/internal': 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte\\internal\\index.mjs',
    'svelte/transition': 'D:\\@Learning\\100-days-projects\\snowpack-svelte-ts-tw\\node_modules\\svelte\\transition\\index.mjs'
  },
  context: undefined,
  external: [Function: external],
  treeshake: { moduleSideEffects: 'no-external' },
  plugins: [
    { name: 'alias', resolveId: [Function: noop$3] },
    {
      name: 'snowpack:fetch-handler',
      resolveId: [Function: resolveId],
      load: [Function: load]
    },
    {
      name: 'node-resolve',
      buildStart: [Function: buildStart],
      generateBundle: [Function: generateBundle],
      resolveId: [AsyncFunction: resolveId],
      load: [Function: load],
      getPackageInfoForId: [Function: getPackageInfoForId]
    },
    { name: 'json', transform: [Function: transform] },
    {
      name: 'snowpack:rollup-plugin-css',
      transform: [AsyncFunction: transform]
    },
    {
      name: 'replace',
      renderChunk: [Function: renderChunk],
      transform: [Function: transform]
    },
    {
      name: 'commonjs',
      buildStart: [Function: buildStart],
      resolveId: [Function: resolveId],
      load: [Function: load],
      transform: [Function: transform],
      moduleParsed: [Function: moduleParsed]
    },
    {
      name: 'snowpack:wrap-install-targets',
      buildStart: [Function: buildStart],
      resolveId: [Function: resolveId],
      load: [Function: load]
    },
    {
      name: 'snowpack:rollup-plugin-stats',
      generateBundle: [Function: generateBundle],
      writeBundle: [Function: writeBundle]
    },
    {
      name: 'snowpack:rollup-plugin-node-process-polyfill',
      transform: [Function: transform],
      resolveId: [Function: resolveId],
      load: [Function: load]
    },
    {
      name: 'svelte',
      resolveId: [Function: resolveId],
      load: [Function: load],
      transform: [AsyncFunction: transform],
      generateBundle: [Function: generateBundle]
    },
    {
      name: 'svelte',
      resolveId: [Function: resolveId],
      load: [Function: load],
      transform: [AsyncFunction: transform],
      generateBundle: [Function: generateBundle]
    },
    {
      name: 'snowpack:rollup-plugin-catch-unresolved',
      resolveId: [Function: resolveId]
    },
    {
      name: 'snowpack:rollup-plugin-strip-source-mapping',
      transform: [Function: transform]
    }
  ],
  onwarn: [Function: onwarn]
}
[snowpack] cjsAutoDetectExportsUntrusted error: Unexpected export statement in CJS module.
  at @:1:8
[snowpack] cjsAutoDetectExportsUntrusted error: Unexpected import statement in CJS module.
  at @:1:8
[snowpack] cjsAutoDetectExportsUntrusted error: Unexpected import statement in CJS module.
  at @:2:8
[snowpack] cjsAutoDetectExportsUntrusted error: Unexpected export statement in CJS module.
  at @:1:8
[snowpack] cjsAutoDetectExportsUntrusted error: Unexpected export statement in CJS module.
  at @:1717:8
[snowpack] cjsAutoDetectExportsUntrusted error: Unexpected import statement in CJS module.
  at @:1:8
[snowpack] FAILURE: Expected } (25:13)
23: } from "svelte/internal";
24: 
25: const { Error: Error_1, Object: Object_1, console: console_1 } = globals;
                 ^
26: import { wrap as _wrap } from "./wrap";
27: import { tick } from "svelte";
[snowpack] Failed to load node_modules/svelte-spa-router/Router.svelte
  Try installing rollup-plugin-svelte and adding it to Snowpack (https://www.snowpack.dev/tutorials/svelte)
[snowpack] Install failed.
[snowpack] Error: Install failed.
    at Object.install (D:\@Learning\100-days-projects\snowpack-svelte-ts-tw\node_modules\snowpack\lib\index.js:47808:19)

Let me know if you need anything else.

Cheers,
Zdravko

[adam-kov]

Hi,
I get the same error ("Failed to load node_modules/svelte-spa-router/Router.svelte") with the following Snowpack config and dependency versions:

const rollupPluginSvelte = require('rollup-plugin-svelte');

module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-svelte',
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-typescript',
    '@snowpack/plugin-postcss',
  ],
  packageOptions: {
    packageLookupFields: ['svelte'],
    rollup: {
      plugins: [
        rollupPluginSvelte({
          dev: process.env.NODE_ENV !== 'production',
        }),
      ],
    },
  },
  alias: {
    components: './src/components',
    pages: './src/pages',
  },
};

"snowpack": "^3.0.1",
"rollup-plugin-svelte": "^7.1.0",
"svelte-spa-router": "^3.1.0",

I had this error with another package as well, which had .svelte files in it, but it wasn't crucial, so I decided not to import it. This one is different though, because I have to have routing in my app.

I'm not sure if posting another config helps the issue, but I'd love to see it resolved. :)
Thanks for the help in advance!

[lpil]

Was a solution for this found?