@timonck

Почему выбивает ошибку когда запускаю build?

У меня есть папка src.ts с файлами script.ts и index.html.
В index.html у меня
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>


запускаю "ts:build": "rimraf dist.ts && webpack --config conf.ts/webpack.config.js"
и вылетает ошибка

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:88:10

- 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

файл 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()
            }
        ]
    }
}


Как можно исправить эту ошибку?
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fi1osof
@Fi1osof
JS fullstack developer
У вас четкая ошибка:
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 (если нет никаких иммитаторов) на стороне сервера отсутствует. Условно у вас сборка выполняется для SSR (Server-side rendering). И вот он пытается выполнить обращение к document, а его нету.
Оберните в проверку, например так:

if(global.document){
   ....
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Cryptopay Санкт-Петербург
от 150 000 ₽
Salesbeat Москва
от 150 000 до 250 000 ₽
Enapter Санкт-Петербург
от 160 000 до 240 000 ₽