Блог

Я понятия не имею, что я делаю не так. Я просто хочу использовать stylus в своих файлах svelte. По сути, я хотел попробовать и адаптировать https://github.com/sveltejs/svelte-preprocess/tree/main/examples/sapper-rollup . Использование typescript, а также стилуса, как упоминалось.

Я всегда получаю сообщение об ошибке cannot read length of undefined , когда добавляю код стилуса, показанный ниже. Он работает с обычным css. SCSS, например, тоже не работает.

 // rollup.config.js
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import config from 'sapper/config/rollup.js'
import path from 'path'
import pkg from './package.json'
import replace from '@rollup/plugin-replace'
import resolve from '@rollup/plugin-node-resolve'
import svelte from 'rollup-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'
import url from '@rollup/plugin-url'
import { terser } from 'rollup-plugin-terser'

const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD

const onwarn = (warning, onwarn) =>
   (warning.code === 'MISSING_EXPORT' amp;amp; /'preload'/.test(warning.message)) ||
   (warning.code === 'CIRCULAR_DEPENDENCY' amp;amp; /[/\]@sapper[/\]/.test(warning.message)) ||
   (warning.code === 'THIS_IS_UNDEFINED') ||
   onwarn(warning)

export default {
   client: {
      input: config.client.input().replace(/.js$/, '.ts'),
      output: config.client.output(),
      plugins: [
         replace({
            'process.browser': true,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         svelte({
            dev,
            hydratable: true,
            preprocess: sveltePreprocess({
               stylus: {
                  includePaths: ['src'],
               },
               postcss: {
                  plugins: [require('postcss-import')],
               },
            }),
            emitCss: true
         }),
         url({
            sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
            publicPath: '/client/'
         }),
         resolve({
            browser: true,
            dedupe: ['svelte']
         }),
         commonjs(),
         typescript({ sourceMap: dev }),

         legacy amp;amp; babel({
            extensions: ['.js', '.mjs', '.html', '.svelte'],
            babelHelpers: 'runtime',
            exclude: ['node_modules/@babel/**'],
            presets: [
               ['@babel/preset-env', {
                  targets: '> 0.25%, not dead'
               }]
            ],
            plugins: [
               '@babel/plugin-syntax-dynamic-import',
               ['@babel/plugin-transform-runtime', {
                  useESModules: true
               }]
            ]
         }),

         !dev amp;amp; terser({
            module: true
         })
      ],

      preserveEntrySignatures: false,
      onwarn,
   },

   server: {
      input: { server: config.server.input().server.replace(/.js$/, ".ts") },
      output: config.server.output(),
      plugins: [
         replace({
            'process.browser': false,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         svelte({
            generate: 'ssr',
            hydratable: true,
            preprocess: sveltePreprocess(),
            dev
         }),
         url({
            sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
            publicPath: '/client/',
            emitFiles: false // already emitted by client build
         }),
         resolve({
            dedupe: ['svelte']
         }),
         commonjs(),
         typescript({ sourceMap: dev })
      ],
      external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

      preserveEntrySignatures: 'strict',
      onwarn,
   },

   serviceworker: {
      input: config.serviceworker.input().replace(/.js$/, '.ts'),
      output: config.serviceworker.output(),
      plugins: [
         resolve(),
         replace({
            'process.browser': true,
            'process.env.NODE_ENV': JSON.stringify(mode)
         }),
         commonjs(),
         typescript({ sourceMap: dev }),
         !dev amp;amp; terser()
      ],

      preserveEntrySignatures: false,
      onwarn,
   }
}
 

Вот пример фрагмента кода

 // component
<style type="text/stylus">
  main
    position relative
    max-width 56em
    background-color white
    padding 2em
    margin 0 auto
    box-sizing border-box
</style>
 

Я думаю, что ошибка где-то в моем rollup.config.js но я не знаю / не понимаю, что я сделал не так.

Это проблема совместимости между svelte-preprocess и svelte@3.30 .

Вы не единственный, кто сталкивается с этим (или вы тот, кто открыл эту проблему?): https://github.com/sveltejs/svelte-preprocess/issues/284

Скорее всего, это связано с тем, что в Svelte 3.30 добавлена поддержка исходных текстов в препроцессорах: https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3300

Понижение до svelte@3.29 должно решить вашу проблему на данный момент:

 yarn add -D svelte@3.29
 

И, хм… Я бы подумал, что вам понадобится точно такая же preprocess конфигурация в client и server приложения Sapper. Возможно, вы захотите это проверить.