使用Webpack构建Sapper Svelte项目dist文件夹遇语法报错求助

Let's break down what's happening here and fix that warning step by step:

First, the root cause: The export let target syntax is specific to Svelte components (it declares a component prop), but your client.js is a regular JavaScript entry file—not a Svelte component. The svelte-loader is incorrectly treating your .js file as a Svelte component, which triggers the prop declaration warning.

Here's how to resolve this and get your custom Webpack build working smoothly:

1. Fix the client.js Syntax #

Replace the Svelte-specific export let with a standard JavaScript variable declaration—you don't need to export this as a component prop, since this is just your app's entry point:

import * as sapper from '@sapper/app';
// Use const/let instead of export let for a regular JS variable
const target = document.querySelector('#sapper');
sapper.start({ target });

This matches the behavior of your React ReactDOM.render equivalent code and eliminates the loader confusion.

2. Correct Your Webpack Loader Rules #

Ensure svelte-loader only processes .svelte files, not .js files. Update your webpack.config.js rules to avoid misapplying the loader:

const path = require('path');

module.exports = {
  entry: { main: path.join(__dirname, 'src', 'client') },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      // Only apply svelte-loader to .svelte files
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            // Add your svelte-loader options here (e.g., dev mode settings)
          }
        }
      },
      // Handle JavaScript files with babel-loader or another JS loader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  // Add other necessary plugins/resolve settings for Sapper
};

3. Bonus: Easier Alternative—Customize Sapper's Built-in Webpack Config #

Since Sapper is already built on Webpack, you don't need to write a full custom config from scratch. You can modify Sapper's existing setup to output directly to dist instead of __sapper__:

Create or update sapper.config.js in your project root:

const path = require('path');

module.exports = {
  webpack(config, { dev, mode }) {
    // Override the output path to your desired dist folder
    config.output.path = path.resolve(__dirname, 'dist');
    // Add any other Webpack customizations here
    return config;
  }
};

Then run sapper build or sapper export as usual—your static files will now land in the dist folder, just like a typical React project.

内容的提问来源于stack exchange，提问作者Eni Tesoro