Импортируйте svelte-routing в svelte

Мне нужно создать свое стройное приложение, но при попытке импортировать "стройную маршрутизацию" всегда возникает ошибка.

Неперехваченная ошибка: сбой синтаксического анализа модуля: неожиданный токен (7:11). Для обработки этого типа файла может потребоваться соответствующий загрузчик

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

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 }]],
      },
    }
  ]
}

webpack import svelte svelte-3
person Vladyslav    schedule 22.03.2020    source источник
comment
UPD: похоже на файл маршрутизатора (github.com/EmilTholin/ svelte-routing / blob / master / src /) импортировать файл js   -  person Vladyslav    schedule 23.03.2020
comment
Альтернативой может быть маршрутизация ваших «страниц / компонентов» следующим образом: https://svelte.dev/repl/ca6de655755d4ae88c4c6cbf60f85fda?version=3.23.0   -  person w. Patrick Gale    schedule 28.05.2020
comment
Хорошая альтернатива: Routify   -  person hazg    schedule 05.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Это ошибка возникает из-за того, что веб-пакет не может обработать некоторую часть вашего кода. Чтобы исправить это, вы можете:

Проверьте, есть ли в вашем приложении загрузчик всех типов кода. Иногда внешние библиотеки пишутся с помощью Typescript вместо Javascript или используют препроцессор стилей, такой как SCSS, вместо традиционного CSS. Поэтому вам нужно будет добавить правило в конфигурацию Webpack для перевода вашего кода. (машинописный текст в javascript, scss в css). Но если ваш код не использует другие типы кода, кроме файлов Javascript и Svelte, и эта ошибка возникает только в том случае, если вы импортируете svelte-router, это решение вам не поможет (svelte-router использует только стандартные Javascript, css и .svelte код)

Проверьте, есть ли у webpack доступ к вашему каталогу node_modules. ваши правила веб-пакетов будут проверяться каждый раз, когда Webpack будет читать файл. Например, если у вас есть файл .ts (машинописный текст), webpack проверит, есть ли у вас для него правило. Затем он будет использовать правильный загрузчик, чтобы преобразовать этот файл во что-то другое. Но если ваше правило просит исключить ваш каталог node_modules, если у вас есть файл .ts внутри этой папки, webpack не будет использовать это правило и вместо этого будет искать другое правило.

Вы должны удалить свое свойство exclude внутри теста: /.js$/, чтобы позволить webpack искать файлы javascript внутри ваших node_modules. Ваша текущая линия блокирует его.

Проверьте, может ли webpack разрешить все расширения в вашем приложении. Webpack может не открыть конкретный файл, если вы не укажете, какой тип расширения открыть. Вы можете указать это, добавив эти строки в свой 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'],
    },
}
person Tryall Allombria    schedule 23.10.2020