For some reason my vanilla javascript project using webpack works perfectly through my local computer but once I connect it to netlify with github the whole thing fails to build. It keeps giving me an error that 'a module cannot be found' and that 'there is an error within child compilations'. I have tried researching how to get around this issue but no luck.
Note: The public directory is set to 'dist/' and the build command is set to 'npm start build' on netlify.
Here is my webpack config file:
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',
}),
],
}
Here is my index.js file:
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
Here is the error in 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...
Here is a link to my github repo: https://github.com/emersonvisuals/url-shortner-app
Thanks heaps!
