@motohashi_ryuto (ryuto motohashi)posted at 2022-05-15

Uncaught TypeErrorが解消できません。

Q&A

JavaScript Rails Bootstrap

Railsでアプリ作成中に、、、

現在RailsにBootstrapとjavascriptを併用して、レイアウトを整えております。
しかし作業中にエラーが出てしまい反映されません。

どなたかご教授お願い致します。

環境

Rails6
Bootstrap5
javascript

エラー詳細

まずChromeのコンソールエラー文です。

Uncaught TypeError: Cannot set properties of null (setting 'textContent')
    at Object../app/javascript/scripts/start.js (start.js:19:1)
    at __webpack_require__ (bootstrap:19:1)
    at Module../app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

エラーに出ている関連のページ

javascript/script/start.js

const timeDisplay = document.querySelector(".time-display");
const timeSelect = document.querySelectorAll("time-select button");
let fakeDuration = 600;

//ここでエラーが発生しています↓
timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
  fakeDuration % 60
)}`;

bootstrap.js

// The module cache
 	var installedModules = {};

 	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};
　　　　　      // Execute the module function
　　　　　　　　　　　　　　　　　//ここで引っかかるみたいです。↓
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);


 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
 	}

上記の記述はあまり意味わかってません、、、

application.js


// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import "bootstrap";
import "../stylesheets/application";

import "jquery";
import "scripts/start.js";

Rails.start()
Turbolinks.start()
ActiveStorage.start()

bootstrap.js

	// Load entry module and return exports
 	return __webpack_require__(__webpack_require__.s = "./app/javascript/packs/application.js");

エラー関連のファイルは以上になります。

試した事

nullのプロパティーに"textContent"は設定できない的なエラーだと思いますが、
railsのjsファイルではなく、コンソール上で同じ記述をコピペしたら思った通りの動きをしました。

なので、反映がされないわけでは無さそうです。

bootstrapで使用しているjsとstart.jsの間で何か問題があるのか？とか思いましたが、改善の仕方がわかりません。。

ご教授の程よろしくお願い致します。

追記

解決したわけではないのですが、表示がされるようになりました。

試した事としては
純粋に使用したいhtml.erbの最後にを追記しただけなのです。

ただ、application.jsにimport "scrpts/start.js"も記述してあるので重複してしまうのではないかと思いましたがエラーは出ませんでした。

ただコンソール上ではやはりエラーが出てしまいます。。。

Uncaught Error: Cannot find module 'scripts/start.js'
    at webpackMissingModule (application.js:1:1)
    at Module../app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

Are you sure you want to delete the question?