Why does it throw an error when I run build?

T

timonck2019-12-22 20:00:19

JavaScript

timonck, 2019-12-22 20:00:19

I have a src.ts folder with script.ts and index.html files.
In index.html I have

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

I run "ts:build": "rimraf dist.ts && webpack --config conf.ts/webpack.config.js"
and I get
ERROR in Error: C:\Users\Aspire 3\Desktop\error-handling\src. ts\index.html:94
var canvas = document.getElementById('canvas');
^
ReferenceError: document is not defined
- index.html:94 Object.
C:/Users/Aspire 3/Desktop/error-handling/src.ts/index.html:94:14
- index.html:21 __webpack_require__
C:/Users/Aspire 3/Desktop/error-handling/src.ts/ index.html:21:30
- index.html:85 WIDTH
C:/Users/Aspire 3/Desktop/error-handling/src.ts/index.html:85:18
- index.html:88
C:/Users/ Aspire 3/Desktop/error-handling/src.ts/index.html:
- index.js:247 HtmlWebpackPlugin.evaluateCompilationResult
[error-handling]/[html-webpack-plugin]/index.js:247:28
- index.js:161 Promise.resolve.then.then.then.compiledTemplate
[error- handling]/[html-webpack-plugin]/index.js:161:23
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack- plugin/lib/loader.js!./src.ts/index.html 6.52 KiB {0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ts:build: `rimraf dist.ts && webpack --config conf.ts/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ts:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Aspire 3\AppData\Roaming\npm-cache\_logs\2019-12-22T15_44_58_444Z-debug.log
file webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src.ts/script.ts',
    output:{
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, '..', 'dist.ts')
    },
    resolve: {
        extensions:[
            '.ts',
            '.js'
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: './src.ts/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.ts/,
                loader: 'ts-loader',
                include: path.resolve()
            }
        ]
    }
}

How can this error be corrected?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

Nikolai Lanets, 2019-12-23
@Fi1osof

You have a clear error:

ERROR in Error: C:\Users\Aspire 3\Desktop\error-handling\src.ts\index.html:94
var canvas = document.getElementById('canvas');
^
ReferenceError: document is not defined

document (if there are no imitators) is missing on the server side. Conditionally, your assembly is performed for SSR (Server-side rendering). And now he is trying to make a call to document, but it is not there.
Wrap it in a check, like so:

if(global.document){
   ....
}