[SOLVED] Image problems after upgrading to Webpack 5 / Aurelia 1

Help Requests
1

The image problems started with having to change src="/images/image.jpg" to relative paths src="../../../images/image.jpg", but now I’m getting something that’s stumpted me.

ERROR in ./src/view/create/posts/list.html 3:33-91
Module not found: Error: Can't resolve '../../../images/header1.jpg"' in '/home/john/node/web-app/web-app.client/src/view/create/posts'
resolve '../../../images/header1.jpg"' in '/home/john/node/web-app/web-app.client/src/view/create/posts'
  using description file: /home/john/node/web-app/web-app.client/package.json (relative path: ./src/view/create/posts)
    using description file: /home/john/node/web-app/web-app.client/package.json (relative path: ./src/images/header1.jpg")
      no extension
        /home/john/node/web-app/web-app.client/src/images/header1.jpg" doesn't exist
      .ts
        /home/john/node/web-app/web-app.client/src/images/header1.jpg".ts doesn't exist
      .js
        /home/john/node/web-app/web-app.client/src/images/header1.jpg".js doesn't exist
      as directory
        /home/john/node/web-app/web-app.client/src/images/header1.jpg" doesn't exist
 @ ./src/view/create/posts/list.ts
 @ ./src/view/create/posts/index.ts
 @ ./src/view/create/index.ts
 @ ./src/view/app.ts
 @ ./src/main.ts
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js

webpack 5.66.0 compiled with 1 error and 2 warnings in 7357 ms

Here is the module definition from webpack.config.json (is url-loader/file-loader user for this? If so, the limit is 8192 bytes, and the image is 351k, so file-loader should pick it up, right?):

      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },

Offending HTML:

<img src=../../../images/header1.jpg" class="img-fluid rounded-start" alt="...">

The the version of webpack:

    "aurelia-webpack-plugin": "^5.0.3",
    "file-loader": "^6.2.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.66.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"

Lastly, the devServer config:


  devServer: {
    client: {
      logging: 'error'
    },
    static: {
      directory: outDir,
      publicPath: '',
    },
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true,
    open: project.platform.open,
    hot: hmr || project.platform.hmr,
    port: port || project.platform.port,
    host: host,
    proxy: [
      {      
        path: '/api',
        target: "http://localhost:3000/",
        secure: false,
        changeOrigin: true,
        onProxyReq: proxyReq => {
          // Browers may send Origin headers even with same-origin
          // requests. To prevent CORS issues, we have to change
          // the Origin to match the target URL.
          if (proxyReq.getHeader('origin')) {
            proxyReq.setHeader('origin', "http://localhost:3000/");
          }
        }
      }
    ]
  },

json

Same thing happening with loading json:

WARNING in ./src/main.ts 9:35-52

Should not import the named export 'debug' (imported as 'environment') from default-exporting module (only default export is available soon)


WARNING in ./src/main.ts 10:8-27

Should not import the named export 'testing' (imported as 'environment') from default-exporting module (only default export is available soon)

import {Aurelia} from 'aurelia-framework';
import * as environment from './config/environment.json';
import {PLATFORM} from 'aurelia-pal';
import * as Bootstrap from 'bootstrap';
import { applyMetadataPolyfill } from '@aurelia/metadata';

export function configure(aurelia: Aurelia): void {

  applyMetadataPolyfill(Reflect, false, true, false, false);

  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('view/app')));
}

I think I’ve spent more time fixing broken changes than writing application code, haha.

2

So, I’m thinking that Webpack is looking at resolve.extensions for how to load the images. If you look at the error, it’s looking for the no extension, ts and js. The file is definitely located at that location it’s trying to load, so I’m not sure why it’s not picking it up.

resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
    alias: {
      'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding')
    }
  },

image
image721×665 61.1 KB

3

What a simple missing character (") can do…

<img src=../../../images/header1.jpg" class="img-fluid rounded-start" alt="...">

<img src="../../../images/header1.jpg" class="img-fluid rounded-start" alt="...">

Image problem solved. :smile: Now onto the named export issue with json files.

1 Like