第三方JS应用导致图片加载问题 图片加载网络包导致问题的 JS

问题描述

我的 Web 应用程序遇到了由在同一网站上运行的另一个 JS 应用程序引起的问题。

我的 TS Preact 小部件中的问题是某些图像未加载。 JS控制台抛出如下异常：

类型错误：无法读取未定义的属性“调用”

图片加载

const promiseForImage = (image: string) => {
  if (image.length === 0) {
    console.error('no image given');
    return null;
  }
  return import(`sharedimages/${image}.png?resize&sizes[]=160&sizes[]=320&sizes[]=640&sizes[]=960`);
};

const loadImage = (image: string) => {
  const promise = promiseForImage(image);
  if (!promise) {
    return;
  }
  promise
    .then((baseImage) => {
      const newImageInfo = {
        src: baseImage.src,srcSet: baseImage.srcSet,height: baseImage.height,} as ImageInfo;

      if (newImageInfo === undefined || newImageInfo.src === undefined || newImageInfo.srcSet === undefined) {
        console.error(`newImage is not valid: imageName ${image},images: ${baseImage} \nnewImageInfo: ${getobjectDescription(newImageInfo)}`);
      } else if (imageInfo.src !== newImageInfo.src || imageInfo.srcSet !== newImageInfo.srcSet) {
        console.info(`Updating info ${getobjectDescription(newImageInfo)}`);
        setimageInfo(newImageInfo);
      }
    })
    .catch((e) => {
      console.error(`Error loading image ${image}: ${e}`);
    });
};

网络包

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');
const copyWebpackPlugin = require('copy-webpack-plugin');
const bundleOutputDir = './dist';

/* eslint-disable import/no-extraneous-dependencies */
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

// const CompressionPlugin = require('compression-webpack-plugin');

module.exports = (env) => {
  const isDevBuild = !(env && env.prod);
  const analyzeBundle = env && env.analyze;

  const publicURL = 'https://mywidget.co/widget.js'

  const plugins = [new ForkTsCheckerWebpackPlugin()];
  if (isDevBuild) {
    // eslint-disable-next-line new-cap
    plugins.push(new webpack.sourceMapDevToolPlugin(),new copyWebpackPlugin([{ from: 'dev/' }]));
  }

  if (analyzeBundle) {
    // eslint-disable-next-line global-require
    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
    plugins.push(new BundleAnalyzerPlugin());
  }

  const babelPlugins = [
    // Syntax sugar found in React components
    '@babel/proposal-class-properties','@babel/proposal-object-rest-spread',// transpile JSX/TSX to JS
    [
      '@babel/plugin-transform-react-jsx',{
        // we use Preact,which has `Preact.h` instead of `React.createElement`
        pragma: 'h',pragmaFrag: 'Fragment',},],];

  if (!isDevBuild) {
    babelPlugins.push(['transform-remove-console',{ exclude: ['error','warn'] }]);
  }

  return [
    {
      entry: './src/index.ts',output: {
        filename: 'widget.js',path: path.resolve(bundleOutputDir),publicPath: isDevBuild ? '' : publicURL,devServer: {
        host: '0.0.0.0',// your ip address
        port: 8080,disableHostCheck: true,contentBase: bundleOutputDir,open: 'google chrome',plugins,optimization: {
        minimize: !isDevBuild,nodeenv: 'production',mode: isDevBuild ? 'development' : 'production',module: {
        rules: [
          // packs PNG's discovered in url() into bundle
          {
            test: /\.(jpe?g|png|webp)$/i,use: [
              {
                loader: 'responsive-loader',options: {
                  // eslint-disable-next-line global-require
                  adapter: require('responsive-loader/sharp'),// sizes: [160,320,640,960,1280],name: '[path][name]-[width].[ext]',sourceMap: isDevBuild,// packs SVG's discovered in url() into bundle
          { test: /\.svg/,use: 'svg-url-loader' },{
            test: /\.(css)$/i,use: [
              {
                loader: 'style-loader',options: {
                  injectType: 'singletonStyleTag',{
                // allows import CSS as modules
                loader: 'css-loader',options: {
                  modules: {
                    // css class names format
                    localIdentName: '[name]-[local]-[hash:base64:5]',{
            test: /\.(scss)$/i,options: { injectType: 'singletonStyleTag' },{
                loader: 'sass-loader',options: {
                  sourceMap: isDevBuild,// use babel-loader for TS and JS modeles,// starting v7 Babel babel-loader can transpile TS into JS,// so no need for ts-loader
          // note,that in dev we still use tsc for type checking
          {
            test: /\.(js|ts|tsx|jsx)$/,exclude: /node_modules/,use: [
              {
                loader: 'babel-loader',options: {
                  presets: [
                    [
                      '@babel/preset-env',{
                        targets: {
                          browsers: ['>1%'],// makes usage of @babel/polyfill because of IE11
                        // there is at least async functions and for..of
                        useBuiltIns: 'usage',corejs: { version: 3,proposals: true },[
                      // enable transpiling ts => js
                      '@babel/typescript',// tell babel to compile JSX using into Preact
                      { jsxPragma: 'h' },plugins: babelPlugins,resolve: {
        extensions: ['*','.js','.ts','.tsx'],plugins: [new TsconfigPathsPlugin()],alias: {
          react: 'preact/compat','react-dom': 'preact/compat',images: path.join(__dirname,'images'),sharedimages: path.resolve(__dirname,'../../packages/shared/src/resources'),];
};

导致问题的 JS

https://pixc.com/resize.js?shop=myshop.myshopify.com

一旦我禁用 pixc 插件，图像就会正确加载。我如何才能保护我的应用免受此应用以及其他潜在的 JS 应用出现此类问题的影响？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）