Change of .svelte file only restarts server [SOLVED]

Svelte
1

I know we are early with the svelte integration, but after going through the tutorial I really want to play with it some more.

I cloned the meteor-svelte-starter repository and was able to somewhat get it to work, but in order to really understand everything I want to start from scratch.

So far I have these packages installed

meteor                  # Shared foundation for all Meteor packages
static-html             # Define static page content in .html files
standard-minifier-css   # CSS minifier run for production mode
standard-minifier-js    # JS minifier run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers
ecmascript              # Enable ECMAScript2015+ syntax in app code
dynamic-import
typescript              # Enable TypeScript syntax in .ts and .tsx modules
shell-server            # Server-side component of the `meteor shell` command
webapp                  # Serves a Meteor app over HTTP
server-render           # Support for server-side rendering

svelte:compiler
npdev:svelte-loadable
rdb:svelte-meteor-data

and the following npm packages

  "dependencies": {
    "@babel/runtime": "^7.8.3",
    "meteor-node-stubs": "^1.0.0",
    "svelte": "^3.20.1",
    "svelte-loadable": "^1.4.0",
    "svelte-routing": "^1.4.2"
  },

and added this to package.json

  "svelte:compiler": {
    "hydratable": true,
    "css": false
  },
  "babel": {
    "plugins": [
      "svelte-loadable/babel",
      "@babel/plugin-proposal-optional-chaining"
    ]
  },

But whenever I edit my App.svelte it only reloads the server, which is odd since the server does not import that file, and it doesn’t reload the client.

What am I missing?

2

If I am running a svelte app and I make changes to a file with the .svelte extension the application will refresh in the browser, so it does work as you would expect it to. I am not sure why that isn’t working for you though

3

Did you do anything special to your setup? Any .babel files or special additions to package.json?

4

no this is how it is set up https://github.com/meteor/simple-todos-svelte

5

Thanks @brianmulhall, I checked out simple-todos-svelte and used the same package.json and now it works. Odd.

this is my package.json now

{
  "name": "svelte-bootstrap",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.8.3",
    "bcrypt": "^4.0.1",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "meteor-node-stubs": "^1.0.0",
    "popper.js": "^1.16.1",
    "svelte": "^3.21.0",
    "sveltestrap": "^3.3.3"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  },
  "devDependencies": {
    "chai": "^4.2.0"
  }
}

and here are my meteor packages

meteor-base             # Shared foundation for all Meteor packages
static-html             # Define static page content in .html files
standard-minifier-css   # CSS minifier run for production mode
standard-minifier-js    # JS minifier run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers
ecmascript              # Enable ECMAScript2015+ syntax in app code
dynamic-import
typescript              # Enable TypeScript syntax in .ts and .tsx modules
shell-server            # Server-side component of the `meteor shell` command
webapp                  # Serves a Meteor app over HTTP
server-render           # Support for server-side rendering

svelte:compiler
rdb:svelte-meteor-data
accounts-password