Import `svelte-routing` in svelte

Question

I have to build my svelte app but always have an error when trying to import 'svelte-routing'

Uncaught Error: Module parse failed: Unexpected token (7:11) You may need an appropriate loader to handle this file type

app.svelte

<script>
  import { onMount, onDestroy, setContext } from 'svelte'
  import { Router, Route } from 'svelte-routing'
</script>
<h1>Hello world!</h1>

package.json

{

  "dependencies": {

   "@rails/actioncable": "^6.0.1",

   "@rails/webpacker": "3.5",

   "axios": "^0.19.1",

   "babel-core": "7.0.0-bridge.0",

   "babel-loader": "7.0.0",

   "babel-plugin-lodash": "^3.3.2",

   "babel-plugin-module-resolver": "^3.1.1",

   "babel-plugin-react-transform": "^3.0.0",

   "babel-plugin-transform-react-jsx": "^6.24.1",

   "css-loader": "^3.4.2",

   "sirv-cli": "^0.4.5",

   "svelte": "^3.19.2",

   "svelte-loader": "^2.13.6",

   "svelte-routing": "^1.4.1"

  },

  "devDependencies": {

   "@babel/cli": "^7.0.0-beta.40",

   "@babel/core": "^7.0.0-beta.40",

   "@babel/plugin-proposal-class-properties": "^7.8.3",

   "@babel/plugin-proposal-decorators": "^7.8.3",

   "@babel/preset-env": "^7.0.0-beta.40",

   "@babel/preset-react": "^7.0.0-beta.40",

   "core-js": "3",

   "webpack-bundle-analyzer": "^3.6.0",

   "webpack-dev-server": "^3.9"

  }
}

webpack config

module.exports = {
  rules: [
    {
      test: /\.svelte$/,
      exclude: /node_modules\/(?!svelte)/,
      use: [
        { //babel loader after the svelte loader
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        },
        { //svelte loader first
          loader: 'svelte-loader',
          options: {
            hydratable: true
          }
        }
      ]
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: [/node_modules\/(?!svelte)/, /\.legacy.js$/],
      options: {
        presets: [['@babel/preset-env', { modules: false, "useBuiltIns": 'usage', corejs: 3 }]],
      },
    }
  ]
}

Answer 1

This is error is triggered because webpack can't handle some part of your code. To fix this you can :

Check if you have a loader of every type of code in your application. Sometimes, external libraries are written with Typescript instead of Javascript or use style preprocessor like SCSS instead of traditional CSS. So you will need to add a rule inside your Webpack configuration to translate your code. (typescript to javascript, scss to css). But if your code doesn't use other types of code than Javascript and Svelte files, and this error occurs only if you are importing svelte-router, this solution will not help you (svelte-router only uses standard Javascript, css and .svelte code)

Check if webpack have access to your node_modules directory. your webpacks rules will be checked every time Webpack will read a file. For example, if you have a .ts (typescript) file, webpack will check if you have a rule for it. It will then use the correct loader to translate this file into something else. But if your rule asks to exclude your node_modules directory, if you have a .ts file inside that folder, webpack will not use this rule and will search for another rule instead.

You should delete your "exclude" property inside the "test: /.js$/," to allow webpack to look for javascript files inside your node_modules. Your current line is blocking it.

Check if webpack can resolve every extension in your application. Webpack can fail to open a specific file if you don't specify what type of extension to open. You can specify it by adding these lines to your webpack.config.js :

module.exports = {
   resolve: {
        alias: {svelte: path.resolve('node_modules', 'svelte')}, //Add that only if the line below fail. 
        extensions: ['.mjs', '.js', '.svelte', '.ts'],
    },
}