堆棧內存溢出
  簡體   English   中英

帶有 Webpack 的 Vanilla Javascript 項目無法在 netlify 上部署

[英]Vanilla Javascript project with Webpack failing to deploy on netlify

 原文  2022-09-11 02:35:56  3   1    javascript/ webpack/ netlify

問題描述

出於某種原因，我的香草 javascript 項目使用 webpack 可以在我的本地計算機上完美運行，但是一旦我將它連接到使用 github 進行網絡化，整個事情就無法構建。 它不斷給我一個錯誤，“找不到模塊”和“子編譯中存在錯誤”。 我曾嘗試研究如何解決這個問題，但沒有運氣。

注意：公共目錄設置為“dist/”，構建命令設置為 netlify 上的“npm start build”。

這是我的 webpack 配置文件：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    mode: "development",
    entry: {
        bundle: path.resolve(__dirname, "./src/index.js")
    },
    output: {
        path: path.resolve(__dirname, "dist"), 
        filename: "bundle.js",
        clean: true,
    },
    watch: true,
    devServer: {
        port: 3000,
        contentBase: path.resolve(__dirname, 'dist'),
        hot: true
    },
    module: {
        rules: [
            {
                test:/\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test:/\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    },
                },
            },
            {
                test: /\.(png|svg|jpg|jpeg|pdf|gif)$/i,
                type: 'asset/resource', 
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'URL Shortner',
            filename: 'index.html',
            template:'./src/template.html',
        }),
        new BrowserSyncPlugin({
            // browse to http://localhost:3000/ during development,
            // ./public directory is being served
            host: 'localhost',
            port: 3000,
            server: { baseDir: ['dist'] },
            files: ['./dist/*.html'],
            browser: 'chrome',
        }),
    ],
}

這是我的 index.js 文件：

import './styles/main.scss';
import './input.js';
import './warning.js';

import bgBoostDesktop from './assets/bg-boost-desktop.svg'
import bgBoostMobile from './assets/bg-boost-mobile.svg'
import bgShortenDesktop from './assets/bg-shorten-desktop.svg'
import bgShortenMobile from './assets/bg-shorten-mobile.svg'

import iconBrandRecognition from './assets/icon-brand-recognition.svg'
const brandRecognitionSrc = document.querySelector('.iconOne')
brandRecognitionSrc.src = iconBrandRecognition

import iconDetailedRecords from './assets/icon-detailed-records.svg'
const detailedRecordsSrc = document.querySelector('.iconTwo')
detailedRecordsSrc.src = iconDetailedRecords

import iconFullyCustomizable from './assets/icon-fully-customizable.svg'
const fullyCustomizableSrc = document.querySelector('.iconThree')
fullyCustomizableSrc.src = iconFullyCustomizable

import iconFacebook from './assets/icon-facebook.svg'
const facebookSrc = document.querySelector('.facebook')
facebookSrc.src = iconFacebook

import iconInstagram from './assets/icon-instagram.svg'
const instagramSrc = document.querySelector('.instagram');
instagramSrc.src = iconInstagram

import iconPinterest from './assets/icon-pinterest.svg'
const pinterestSrc = document.querySelector('.pinterest');
pinterestSrc.src = iconPinterest

import iconTwitter from './assets/icon-twitter.svg'
const twitterSrc = document.querySelector('.twitter')
twitterSrc.src = iconTwitter

import illustration from './assets/illustration-working.svg'
const illustrationSrc = document.querySelector('.illustration')
illustrationSrc.src = illustration

import logo from './assets/logo.svg'
import footerLogo from './assets/logo copy.svg'
const logoSrc = document.querySelector('.logo')
const logoFooterSrc = document.querySelector('.footerLogo');
logoSrc.src = logo
logoFooterSrc.src = footerLogo

這是netlify中的錯誤：

11:41:32 AM: Build ready to start
11:41:36 AM: build-image version: d7b3dbfb0846505993c9a131894d1858074c90b4 (focal)
11:41:36 AM: build-image tag: v4.10.1
11:41:36 AM: buildbot version: 37262c48b1f3cfa88c6caed707d29b19aef6a5a7
11:41:36 AM: Fetching cached dependencies
11:41:36 AM: Failed to fetch cache, continuing with build
11:41:36 AM: Starting to prepare the repo for build
11:41:36 AM: No cached dependencies found. Cloning fresh repo
11:41:36 AM: git clone https://github.com/emersonvisuals/url-shortner-app
11:41:41 AM: Preparing Git Reference refs/heads/main
11:41:42 AM: Parsing package.json dependencies
11:41:43 AM: Starting build script
11:41:43 AM: Installing dependencies
11:41:43 AM: Python version set to 2.7
11:41:43 AM: Downloading and installing node v16.17.0...
11:41:43 AM: Downloading https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz...
11:41:43 AM: Computing checksum with sha256sum
11:41:44 AM: Checksums matched!
11:41:45 AM: Now using node v16.17.0 (npm v8.15.0)
11:41:45 AM: Started restoring cached build plugins
11:41:45 AM: Finished restoring cached build plugins
11:41:46 AM: Attempting ruby version 2.7.2, read from environment
11:41:46 AM: Using ruby version 2.7.2
11:41:46 AM: Using PHP version 8.0
11:41:47 AM: No npm workspaces detected
11:41:47 AM: Started restoring cached node modules
11:41:47 AM: Finished restoring cached node modules
11:41:47 AM: Installing NPM modules using NPM version 8.15.0
11:41:47 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:41:47 AM: npm WARN config location in the cache, and they are managed by
11:41:47 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:41:47 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:41:47 AM: npm WARN config location in the cache, and they are managed by
11:41:47 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:41:48 AM: npm WARN old lockfile
11:41:48 AM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
11:41:48 AM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
11:41:48 AM: npm WARN old lockfile
11:41:48 AM: npm WARN old lockfile This is a one-time fix-up, please be patient...
11:41:48 AM: npm WARN old lockfile
11:41:54 AM: npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
11:41:54 AM: npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
11:41:58 AM: added 885 packages, and audited 886 packages in 11s
11:41:58 AM: 80 packages are looking for funding
11:41:58 AM:   run `npm fund` for details
11:41:58 AM: 19 vulnerabilities (14 moderate, 5 high)
11:41:58 AM: To address issues that do not require attention, run:
11:41:58 AM:   npm audit fix
11:41:58 AM: To address all issues (including breaking changes), run:
11:41:58 AM:   npm audit fix --force
11:41:58 AM: Run `npm audit` for details.
11:41:58 AM: NPM modules installed
11:41:59 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:41:59 AM: npm WARN config location in the cache, and they are managed by
11:41:59 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:41:59 AM: Started restoring cached go cache
11:41:59 AM: Finished restoring cached go cache
11:41:59 AM: Installing Go version 1.17 (requested 1.17)
11:42:03 AM: unset GOOS;
11:42:03 AM: unset GOARCH;
11:42:03 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
11:42:03 AM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
11:42:03 AM: go version >&2;
11:42:03 AM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
11:42:03 AM: go version go1.17 linux/amd64
11:42:03 AM: Installing missing commands
11:42:03 AM: Verify run directory
11:42:04 AM: ​
11:42:04 AM: ────────────────────────────────────────────────────────────────
11:42:04 AM:   Netlify Build                                                 
11:42:04 AM: ────────────────────────────────────────────────────────────────
11:42:04 AM: ​
11:42:04 AM: ❯ Version
11:42:04 AM:   @netlify/build 27.17.1
11:42:04 AM: ​
11:42:04 AM: ❯ Flags
11:42:04 AM:   baseRelDir: true
11:42:04 AM:   buildId: 631d3ccc77e7bc000981d175
11:42:04 AM:   deployId: 631d3ccc77e7bc000981d177
11:42:04 AM: ​
11:42:04 AM: ❯ Current directory
11:42:04 AM:   /opt/build/repo
11:42:04 AM: ​
11:42:04 AM: ❯ Config file
11:42:04 AM:   No config file was defined: using default values.
11:42:04 AM: ​
11:42:04 AM: ❯ Context
11:42:04 AM:   production
11:42:04 AM: ​
11:42:04 AM: ────────────────────────────────────────────────────────────────
11:42:04 AM:   1. Build command from Netlify app                             
11:42:04 AM: ────────────────────────────────────────────────────────────────
11:42:04 AM: ​
11:42:04 AM: $ npm run build
11:42:04 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:42:04 AM: npm WARN config location in the cache, and they are managed by
11:42:04 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:42:04 AM: > url-shortening-api-master@1.0.0 build
11:42:04 AM: > webpack
11:42:06 AM: assets by status 33.7 KiB [cached] 14 assets
11:42:06 AM: assets by status 63.1 KiB [compared for emit]
11:42:06 AM:   asset bundle.js 58.5 KiB [compared for emit] (name: bundle)
11:42:06 AM:   asset index.html 4.69 KiB [compared for emit]
11:42:06 AM: runtime modules 2.01 KiB 7 modules
11:42:06 AM: modules by path ./src/ 25.2 KiB (javascript) 33.7 KiB (asset)
11:42:06 AM:   asset modules 588 bytes (javascript) 33.7 KiB (asset)
11:42:06 AM:     ./src/assets/bg-boost-desktop.svg 42 bytes (javascript) 1 KiB (asset) [built] [code generated]
11:42:06 AM:     + 13 modules
11:42:06 AM:   javascript modules 24.7 KiB
11:42:06 AM:     modules by path ./src/*.js 7.11 KiB 3 modules
    modules by path ./src/styles/*.scss 17.6 KiB 2 modules
modules by path ./node_modules/ 8.07 KiB
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.44 KiB [built] [code generated]
    + 5 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
    ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
webpack 5.74.0 compiled successfully in 994 ms
[Browsersync] Access URLs:
11:42:06 AM:  ------------------------------------
11:42:06 AM:        Local: http://localhost:3000
11:42:06 AM:     External: http://10.65.51.52:3000
11:42:06 AM:  ------------------------------------
11:42:06 AM:           UI: http://localhost:3001
11:42:06 AM:  UI External: http://localhost:3001
11:42:06 AM:  ------------------------------------
11:42:06 AM: [Browsersync] Serving files from: dist
11:42:06 AM: [Browsersync] Watching files...
12:17:33 PM: Build exceeded maximum allowed runtime
12:17:33 PM: [Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
asset index.html 2.51 KiB [emitted]
12:17:33 PM: asset bundle.js 662 bytes [emitted] (name: bundle)
12:17:33 PM: ERROR in bundle
12:17:33 PM: Module not found: Error: Can't resolve '/opt/build/repo/src/index.js' in '/opt/build/repo'
resolve '/opt/build/repo/src/index.js' in '/opt/build/repo'
12:17:33 PM:   No description file found in /opt/build/repo or above
12:17:33 PM:   root path /opt/build/repo
12:17:33 PM:     No description file found in /opt/build/repo/opt/build/repo/src or above
12:17:33 PM:     no extension
12:17:33 PM:       /opt/build/repo/opt/build/repo/src/index.js doesn't exist
    .js
12:17:33 PM:       /opt/build/repo/opt/build/repo/src/index.js.js doesn't exist
    .json
12:17:33 PM:       /opt/build/repo/opt/build/repo/src/index.js.json doesn't exist
    .wasm
12:17:33 PM:       /opt/build/repo/opt/build/repo/src/index.js.wasm doesn't exist
    as directory
12:17:33 PM:       /opt/build/repo/opt/build/repo/src/index.js doesn't exist
  No description file found in /opt/build/repo/src or above
12:17:33 PM:   no extension
12:17:33 PM:     /opt/build/repo/src/index.js doesn't exist
  .js
12:17:33 PM:     /opt/build/repo/src/index.js.js doesn't exist
  .json
12:17:33 PM:     /opt/build/repo/src/index.js.json doesn't exist
  .wasm
12:17:33 PM:     /opt/build/repo/src/index.js.wasm doesn't exist
  as directory
12:17:33 PM:     /opt/build/repo/src/index.js doesn't exist
12:17:33 PM: ERROR in   Error: Child compilation failed:
12:17:33 PM:   Module not found: Error: Can't resolve '/opt/build/repo/src/template.html' in   '/opt/build/repo'
  ModuleNotFoundError: Module not found: Error: Can't resolve '/opt/build/repo/s  rc/template.html' in '/opt/build/repo'
      at /opt/build/repo/node_modules/webpack/lib/Compilation.js:2016:28
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:798:13
12:17:33 PM:       at eval (eval at create (/opt/build/repo/node_modules/tapable/lib/HookCode  Factory.js:33:10), <anonymous>:10:1)
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:270:22
12:17:33 PM:       at eval (eval at create (/opt/build/repo/node_modules/tapable/lib/HookCode  Factory.js:33:10), <anonymous>:9:1)
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:434:22
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:120:11
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:670:25
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:855:8
12:17:33 PM:       at /opt/build/repo/node_modules/webpack/lib/NormalModuleFactory.js:975:5
12:17:33 PM:   - Compilation.js:2016
12:17:33 PM:     [repo]/[webpack]/lib/Compilation.js:2016:28
12:17:33 PM:   - NormalModuleFactory.js:798
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:798:13
12:17:33 PM:   - NormalModuleFactory.js:270
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:270:22
12:17:33 PM:   - NormalModuleFactory.js:434
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:434:22
12:17:33 PM:   - NormalModuleFactory.js:120
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:120:11
12:17:33 PM:   - NormalModuleFactory.js:670
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:670:25
12:17:33 PM:   - NormalModuleFactory.js:855
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:855:8
12:17:33 PM:   - NormalModuleFactory.js:975
12:17:33 PM:     [repo]/[webpack]/lib/NormalModuleFactory.js:975:5
12:17:33 PM:   - child-compiler.js:169
12:17:33 PM:     [repo]/[html-webpack-plugin]/lib/child-compiler.js:169:18
12:17:33 PM:   - Compiler.js:551 finalCallback
12:17:33 PM:     [repo]/[webpack]/lib/Compiler.js:551:5
12:17:33 PM:   - Compiler.js:577
12:17:33 PM:     [repo]/[webpack]/lib/Compiler.js:577:11
12:17:33 PM:   - Compiler.js:1196
12:17:33 PM:     [repo]/[webpack]/lib/Compiler.js:1196:17
12:17:33 PM:   - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
12:17:33 PM:     [repo]/[tapable]/lib/Hook.js:18:14
12:17:33 PM:   - Compiler.js:1192
12:17:33 PM:     [repo]/[webpack]/lib/Compiler.js:1192:33
12:17:33 PM:   - Compilation.js:2787 finalCallback
12:17:33 PM:     [repo]/[webpack]/lib/Compilation.js:2787:11
12:17:33 PM:   - Compilation.js:3092
12:17:33 PM:     [repo]/[webpack]/lib/Compilation.js:3092:11
12:17:33 PM: 
12:17:33 PM: 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
12:17:33 PM: webpack 5.74.0 compiled with 3 errors in 100 ms
12:17:33 PM: [Browsersync] Reloading Browsers...

這是我的 github 存儲庫的鏈接： https://github.com/emersonvisuals/url-shortner-app

多謝！

1 個解決方案

解決方案1
 0  2022-09-11 04:08:34

問題更新：設法找到解決此問題的方法 - 我通過刪除 netlify 構建命令設置中的“npm run build”語句以及如何解決問題進行了實驗。 我的網站現在上線了！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將 Netlify 的環境變量與 vanilla JavaScript 一起使用？ find() 方法在我的 vanilla javascript 項目中不起作用 將自定義 vanilla javascript 函數添加到 webpack-encore 工作流配置 如何使用Webpack部署MERN項目 部署失敗的 Netlify 頁面未找到 Netlify 部署 Netlify 部署卡住，無法部署 Javascript / Webpack / React：在庫中使用引用失敗 香草插件樣板和Webpack 如何使用jenkins部署JavaScript項目？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM