0

I'm trying to use the npm package image-focus here to, well, focus some of my images (https://www.npmjs.com/package/image-focus).

However I can't get it to work. I installed it via yarn add image-focus; then I added this to my image-controller.ts:

import {FocusedImage} from "image-focus";

export class ImageController {
imageSelectorString = '.focused-image';

focusImage() {
    let image = document.querySelector(this.imageSelectorString) as HTMLImageElement;
    const focusedImage = new FocusedImage(image);
  }
}

Then in my main.js I did this:

let ic = new ImageController();
ic.focusImage();

However, upon reloading my site I get a JS- exception in my Browser:

main.min.js:1 Uncaught ReferenceError: require is not defined
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at Object.<anonymous> (main.min.js:1)
at n (main.min.js:1)
at main.min.js:1
at main.min.js:1

With the browser highlighting this bit as wrong in the console:

function(e, t) {
    e.exports = require("image-focus")
}

This is my webpack.config.js:

const nodeExternals = require('webpack-node-externals');
const path = require('path');
const devMode = true;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    entry:
    [
        './src/index.ts',
        './scss/main.scss'
    ],

externals: {
    'typescript-require': "require('typescript-require')",
    'image-focus': "require('image-focus')",
},
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
        ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
],
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        },
        {
            test: /\.ts?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].css',
                        outputPath: 'css/'
                    }
                },
                {
                    loader: 'extract-loader'
                },
                {
                    loader: 'css-loader',
                },
                {
                    loader: 'postcss-loader'
                },
                {
                    loader: 'sass-loader',
                }
            ]
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ],
        },
        {
            test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: '[name].[ext]'
            }
        }
    ]
},
resolve: {
    extensions: ['.tsx', '.ts', '.js'],
},

output: {
    filename: "main.min.js",
    path: path.resolve(__dirname, 'static_root')
},
};

Does anyone know how to fix this? Help would be greatly appreciated.

Greetings derelektrischemoench

derelektrischemoench
  • 253
  • 2
  • 14
  • You're using webpack (I guess), so `require` should never end up in the script used by the browser in the first place. What is your setup here? How are you compiling and serving the website? Edit: nvm, found your [previous question](https://stackoverflow.com/questions/59203689/configure-fonts-in-webpack) which contains the setup –  Dec 10 '19 at 08:34
  • The obvious duplicate is of course this: https://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined however I'm not flagging it as such yet since this might be a slightly different issue here. –  Dec 10 '19 at 08:35
  • Hi @ChrisG, that was quick. Yep I'm using webpack. I'm compiling my typescript via `{ test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/ }, ` And in my output config object in webpack config.js I have this bit of code: `output: { filename: "main.min.js", path: path.resolve(__dirname, 'static_root') },` – derelektrischemoench Dec 10 '19 at 08:38

0 Answers0