Add webpackIgnore for import(this.lottieLoaderUrl)

[annahassel]

Reference Issue

Fixes #4213: for webpack issue: Critical dependency: the request of a dependency is an expression
Before this fix, I tried webpack.ContextReplacementPlugin, webpack.IgnorePlugin, import('${this.lottieLoaderUrl}') without result.

I tested it using the following code:

package.json

{
  "name": "mvw",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@google/model-viewer": "^3.1.1",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4"
  }
}

webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    index: path.resolve(__dirname, 'index.js'),
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  mode: process.env.NODE_ENV || 'development',
  module: {
    rules: [
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    ],
  },
}

index.js

import { ModelViewerElement } from '@google/model-viewer'

Console output before fix

NOTE: WARNING in ./node_modules/@google/model-viewer/lib/three-components/TextureUtils.js 57:43-71
Critical dependency: the request of a dependency is an expression.

npm run build 

> mvw@1.0.0 build
> webpack --config webpack.config.js

asset index.3f26103a21c122fc43ef.js 2.51 MiB [emitted] [immutable] (name: index)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/@google/model-viewer/lib/ 449 KiB 55 modules
modules by path ./node_modules/three/ 1.57 MiB 19 modules
modules by path ./node_modules/@lit/reactive-element/development/ 66.7 KiB
  modules by path ./node_modules/@lit/reactive-element/development/decorators/*.js 18.4 KiB 10 modules
  modules by path ./node_modules/@lit/reactive-element/development/*.js 48.3 KiB 2 modules
modules by path ./node_modules/lit/*.js 755 bytes
  ./node_modules/lit/decorators.js 598 bytes [built] [code generated]
  ./node_modules/lit/index.js 157 bytes [built] [code generated]
modules by path ./node_modules/lit-html/development/*.js 64.7 KiB
  ./node_modules/lit-html/development/lit-html.js 64 KiB [built] [code generated]
  ./node_modules/lit-html/development/is-server.js 706 bytes [built] [code generated]
./index.js 58 bytes [built] [code generated]
./node_modules/lit-element/development/lit-element.js 9.56 KiB [built] [code generated]

WARNING in ./node_modules/@google/model-viewer/lib/three-components/TextureUtils.js 57:43-71
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/@google/model-viewer/lib/three-components/Renderer.js 23:0-45 64:36-48 96:33-45
 @ ./node_modules/@google/model-viewer/lib/model-viewer-base.js 29:0-58 237:8-35 241:15-42 248:15-33
 @ ./node_modules/@google/model-viewer/lib/model-viewer.js 23:0-60 27:146-168
 @ ./index.js 1:0-57

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.88.1 compiled with 1 warning in 759 ms

Console output after fix (using npm run build:dev and npm link for test)

NOTE: No warning.

npm run build 

> mvw@1.0.0 build
> webpack --config webpack.config.js

asset index.515dd1dad3a873d80f95.js 2.56 MiB [emitted] [immutable] (name: index)
runtime modules 670 bytes 3 modules
modules by path ../../sorokinsh/model-viewer/packages/model-viewer/lib/ 452 KiB 52 modules
modules by path ../../sorokinsh/model-viewer/packages/model-viewer/node_modules/ 1.74 MiB
  modules by path ../../sorokinsh/model-viewer/packages/model-viewer/node_modules/three/ 1.6 MiB 20 modules
  modules by path ../../sorokinsh/model-viewer/packages/model-viewer/node_modules/@lit/reactive-el...(truncated) 66.7 KiB 12 modules
  modules by path ../../sorokinsh/model-viewer/packages/model-viewer/node_modules/lit/*.js 755 bytes 2 modules
  modules by path ../../sorokinsh/model-viewer/packages/model-viewer/node_modules/lit-html/de...(truncated) 64.5 KiB 2 modules
  ../../sorokinsh/model-viewer/packages/model-viewer/node_modules/lit-element/deve...(truncated) 9.56 KiB [built] [code generated]
./index.js 58 bytes [built] [code generated]
webpack 5.88.1 compiled successfully in 758 ms

I also tested it on real project and it is works well.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[elalish]

Nice when it's simple!