preprocessors throws error in svelte

[AbhiPrasad]

Discussed in #7723

^{Originally posted by sagar-siwakoti April 4, 2023}
I am using svelte with webpack and while integrating sentry/svelte it throws an error saying

Module not found: Error: Package path . is not exported from package folder path/node_modules/@sentry/svelte/node_modules/magic-string (see exports field in /node_modules/@sentry/svelte/node_modules/magic-string/package.json)

I am integrating it as

`
import * as Sentry from "@sentry/svelte";

Sentry.init({
dsn: //dsn link,
integrations: [new Sentry.BrowserTracing()],
tracesSampleRate: 1.0,
});

`

[AbhiPrasad]

Hey @sagar-siwakoti thanks for reporting the bug!

Could you provide:

• Your Svelte version
• Your Sentry SDK version
• Your webpack version

Also, what file are you adding the Svelte SDK init to?

Could you provide a copy of your webpack config?

Is this using Sveltekit also? Or just vanilla Svelte?

[sagar-siwakoti]

Here are the details :

• Svelte (vanila) Version: ^3.0.0
• Sentry Svetle SDK version: 7.46.0
• Webpack version: 5.72.0

I am adding sdk in main.ts file which looks like this:

import App from "./App.svelte";
import * as Sentry from "@sentry/svelte";

// Sentry SDK init
Sentry.init({
  dsn: "", //lin goes here
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
});
const app = new App({
  target: document.body,
});

export default app;

And my webpack config is:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
require("dotenv").config({ path: "./.env" });
const webpack = require("webpack");

function getPath(...pathParts) {
  return path.resolve(__dirname, ...pathParts);
}
module.exports = (env) => {
  const isDev = !!(env && env.development);

  console.log("isDevelopment Mode: ", isDev);

  return {
    entry: {
      app: getPath("src", "main.ts"),
    },

    output: {
      path: getPath("", "build"),
      filename: isDev ? "[name].js" : "[name].[contenthash].js",
      chunkFilename: isDev ? "[name].js" : "[name].[contenthash].js",
      publicPath: "/",
    },

    optimization: {
      minimize: !isDev,
      minimizer: ["...", new CssMinimizerPlugin()],
      usedExports: true,
      splitChunks: {
        chunks: "all",
        name: (module, chunks, cacheGroupKey) => {
          const allChunksNames = chunks.map((chunk) => chunk.name).join("_");
          const prefix =
            cacheGroupKey === "defaultVendors" ? "vendors" : cacheGroupKey;
          return `${prefix}_${allChunksNames}`;
        },
      },
      runtimeChunk: { name: "runtime" },
    },

    resolve: {
      conditionNames: ["webpack", "browser", "module", "svelte"],
      alias: {
        svelte: getPath("node_modules", "svelte"),
        src: getPath("src"),
      },
      extensions: [".ts", ".mjs", ".js", ".css", ".svelte"],
      mainFields: ["svelte", "browser", "module", "main"],
    },

    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: "ts-loader",
          options: {
            transpileOnly: isDev,
            context: getPath(),
            configFile: getPath("tsconfig.json"),
          },
        },
        {
          test: /\.svelte$/,
          loader: "svelte-loader",
          options: {
            onwarn: (warning, handler) => {
              if (
                warning.code === "a11y-click-events-have-key-events" ||
                warning.code === "unused-export-let" ||
                warning.code === "a11y-label-has-associated-control" ||
                warning.code === "a11y-media-has-caption" ||
                warning.code === "css-unused-selector" ||
                warning.code === "a11y-img-redundant-alt"
              )
                return;

              // Handle all other warnings normally
              handler(warning);
            },

            compilerOptions: {
              dev: isDev,
            },

            emitCss: true,
            hotReload: isDev,
            preprocess: require("svelte-preprocess")({
              sourceMap: isDev,
              postcss: {
                plugins: [require("tailwindcss"), require("autoprefixer")],
              },
            }),
          },
        },
        {
          // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
          test: /node_modules\/svelte\/.*\.mjs$/,
          resolve: {
            fullySpecified: false,
          },
        },
        {
          test: /\.css$/,
          sideEffects: true, // So we don't remove global css
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: "css-loader",
              options: {
                sourceMap: isDev,
                url: false,
              },
            },
          ],
        },
        {
          test: /\.(png|svg|jpe?g|gif|mp3)$/,
          loader: "file-loader",
          options: { name: "[name].[ext]" },
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          loader: "file-loader",
          options: { name: "[name].[ext]" },
        },
      ],
    },

    plugins: [
      new webpack.DefinePlugin({
        "process.env": JSON.stringify(process.env),
      }),
      new CopyPlugin({
        patterns: [
          { from: "public/audio", to: "audio" },
          { from: "public/fonts", to: "fonts" },
          { from: "public/images", to: "images" },
          { from: "public/global.css", to: "global.css" },
        ],
      }),
      new ForkTsCheckerWebpackPlugin({
        typescript: { configFile: getPath("tsconfig.json") },
      }),
      new HtmlWebpackPlugin({
        template: getPath("public", "index.html"),
        favicon: getPath("public", "favicon.png"),
      }),
      new MiniCssExtractPlugin({
        filename: isDev ? "[name].css" : "[name].[contenthash].css",
        chunkFilename: isDev ? "[name].css" : "[name].[contenthash].css",
      }),
    ],

    mode: isDev ? "development" : "production",
    devtool: isDev ? "source-map" : false,
    devServer: {
      hot: true,
      compress: true,
      historyApiFallback: true,
      open: true,
      port: 3000,
    },
  };
};

[Lms24]

Thanks for the information @sagar-siwakoti. Are you by any chance using the component tracking feature of our SDK?
Or in other words, did you wrap withSentryConfig around your svelte.config.js file?

[sagar-siwakoti]

No I haven't used component tracking. I was working with a basic installation guide.

[Lms24]

@sagar-siwakoti would you be able to provide a minimal reproduction example for this bug? I'm not sure if this is a bug on our end. This rather complex webpack config to me looks like there could be going on something else.

Also, any chance that your resolve config interferes here? This is more a guess than anything else as I'm not entirely sure what this does anyway. I'm just guessing that anything that interferes with dependency/module resolution might be a problem here...

Given that we only tested Svelte apps with Vite afaik, it's definitely possible though that there are problems with our SDK and Webpack.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀