質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Uncaught Error: Cannot find module './styles.css' at webpackMissingModule を直したい

senseIY
senseIY

総合スコア261

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

204閲覧

投稿2022/07/30 10:48

編集2022/07/30 10:49

前提

現在TypeScript とReactで wavesurferを使用しようとしている者です。通常のJavaScriptでは上手く wavesurferを使用出来たのですが、TypeScriptとRecatを使用した状態ではなぜかエラーが出てしまい解決出来なかったので、このサイト
https://www.npmjs.com/package/wavesurfer-react
https://github.com/ShiiRochi/wavesurfer-react
の「wavesurfer-react」というライブラリーを使ってみようと考えました。以下がコードで、見本からコピペし、一部変更しました。また、文字数の関係上一部削除している箇所があります

import React, { useCallback, useEffect, useRef, useState, useMemo } from "react"; import ReactDOM from "react-dom"; import styled from "styled-components"; import { WaveSurfer, WaveForm, Region, Marker } from "wavesurfer-react"; import "./styles.css"; import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min"; import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.min"; import MarkersPlugin from "wavesurfer.js/src/plugin/markers"; const Buttons = styled.div` display: inline-block; `; const Button = styled.button``; /** * @param min * @param max * @returns {*} */ function generateNum(min, max) { return Math.random() * (max - min + 1) + min; } /** * @param distance * @param min * @param max * @returns {([*, *]|[*, *])|*[]} */ function generateTwoNumsWithDistance(distance, min, max) { const num1 = generateNum(min, max); const num2 = generateNum(min, max); // if num2 - num1 < 10 if (num2 - num1 >= 10) { return [num1, num2]; } return generateTwoNumsWithDistance(distance, min, max); } export function WSF() { const [timelineVis, setTimelineVis] = useState(true); const [markers, setMarkers] = useState([ { time: 5.5, label: "V1", color: "#ff990a", draggable: true }, { time: 10, label: "V2", color: "#00ffcc", position: "top" } ]); const plugins = useMemo(() => { return [ { plugin: RegionsPlugin, options: { dragSelection: true } }, timelineVis && { plugin: TimelinePlugin, options: { container: "#timeline" } }, { plugin: MarkersPlugin, options: { markers: [{ draggable: true }] } } ].filter(Boolean); }, [timelineVis]); const toggleTimeline = useCallback(() => { setTimelineVis(!timelineVis); }, [timelineVis]); const [regions, setRegions] = useState([ { id: "region-1", start: 0.5, end: 10, color: "rgba(0, 0, 0, .5)", data: { systemRegionId: 31 } }, { id: "region-2", start: 5, end: 25, color: "rgba(225, 195, 100, .5)", data: { systemRegionId: 32 } }, { id: "region-3", start: 15, end: 35, color: "rgba(25, 95, 195, .5)", data: { systemRegionId: 33 } } ]); // use regions ref to pass it inside useCallback // so it will use always the most fresh version of regions list const regionsRef = useRef(regions); useEffect(() => { regionsRef.current = regions; }, [regions]); const regionCreatedHandler = useCallback( (region) => { console.log("region-created --> region:", region); if (region.data.systemRegionId) return; setRegions([ ...regionsRef.current, { ...region, data: { ...region.data, systemRegionId: -1 } } ]); }, [regionsRef] ); const wavesurferRef = useRef(); const handleWSMount = useCallback( (waveSurfer) => { if (waveSurfer.markers) { waveSurfer.clearMarkers(); } wavesurferRef.current = waveSurfer; if (wavesurferRef.current) { wavesurferRef.current.load("/bensound-ukulele.mp3"); wavesurferRef.current.on("region-created", regionCreatedHandler); wavesurferRef.current.on("ready", () => { console.log("WaveSurfer is ready"); }); wavesurferRef.current.on("region-removed", (region) => { console.log("region-removed --> ", region); }); wavesurferRef.current.on("loading", (data) => { console.log("loading --> ", data); }); if (window) { window.surferidze = wavesurferRef.current; } } }, [regionCreatedHandler] ); const generateRegion = useCallback(() => { if (!wavesurferRef.current) return; const minTimestampInSeconds = 0; const maxTimestampInSeconds = wavesurferRef.current.getDuration(); const distance = generateNum(0, 10); const [min, max] = generateTwoNumsWithDistance( distance, minTimestampInSeconds, maxTimestampInSeconds ); const r = generateNum(0, 255); const g = generateNum(0, 255); const b = generateNum(0, 255); setRegions([ ...regions, { id: `custom-${generateNum(0, 9999)}`, start: min, end: max, color: `rgba(${r}, ${g}, ${b}, 0.5)` } ]); }, [regions, wavesurferRef]); const generateMarker = useCallback(() => { if (!wavesurferRef.current) return; const minTimestampInSeconds = 0; const maxTimestampInSeconds = wavesurferRef.current.getDuration(); const distance = generateNum(0, 10); const [min] = generateTwoNumsWithDistance( distance, minTimestampInSeconds, maxTimestampInSeconds ); const r = generateNum(0, 255); const g = generateNum(0, 255); const b = generateNum(0, 255); setMarkers([ ...markers, { label: `custom-${generateNum(0, 9999)}`, time: min, color: `rgba(${r}, ${g}, ${b}, 0.5)` } ]); }, [markers, wavesurferRef]); const removeLastRegion = useCallback(() => { let nextRegions = [...regions]; nextRegions.pop(); setRegions(nextRegions); }, [regions]); const removeLastMarker = useCallback(() => { let nextMarkers = [...markers]; nextMarkers.pop(); setMarkers(nextMarkers); }, [markers]); const play = useCallback(() => { wavesurferRef.current.playPause(); }, []); const handleRegionUpdate = useCallback((region, smth) => { console.log("region-update-end --> region:", region); console.log(smth); }, []); return ( <div className="App"> <WaveSurfer plugins={plugins} onMount={handleWSMount}> <WaveForm id="waveform" cursorColor="transparent"> {regions.map((regionProps) => ( <Region onUpdateEnd={handleRegionUpdate} key={regionProps.id} {...regionProps} /> ))} {markers.map((marker, index) => { return ( <Marker key={index} {...marker} onClick={(...args) => { console.log("onClick", ...args); }} onDrag={(...args) => { console.log("onDrag", ...args); }} onDrop={(...args) => { console.log("onDrop", ...args); }} /> ); })} </WaveForm> <div id="timeline" /> </WaveSurfer> <Buttons> <Button onClick={generateRegion}>Generate region</Button> <Button onClick={generateMarker}>Generte Marker</Button> <Button onClick={play}>Play / Pause</Button> <Button onClick={removeLastRegion}>Remove last region</Button> <Button onClick={removeLastMarker}>Remove last marker</Button> <Button onClick={shuffleLastMarker}>Shuffle last marker</Button> <Button onClick={toggleTimeline}>Toggle timeline</Button> </Buttons> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

しかし、
作業中に以下のエラーが発生しました。

発生している問題・エラーメッセージ

App.tsx:7 Uncaught Error: Cannot find module './styles.css' at webpackMissingModule (App.tsx:7:1) at ./src/components/wavesurfer.jsx (App.tsx:7:1) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./src/App.tsx (bundle.js:17:80) at options.factory (react refresh:6:1) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./src/index.tsx (wavesurfer.jsx:349:1)

試したことなど

このエラーで検索をかけるといくつか解決策がヒットしました。
https://stackoverflow.com/questions/46880664/webpack-missing-module-error-cannot-find-module
https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10
https://qiita.com/paranishian/items/bb02c91ec1004430e701

しかし、それぞれの記事で行っている操作の意図が分かりませんでした。
自分なりの大雑把な解釈としては、「何かしらの定義ファイル(webpack.confingファイルなど)を作成して、そこにReactがcssを読み込めるようにするコードを書く」と考えました。しかし、これらのサイトで言及されていたファイルがデフォルトで存在しませんでした。なので、/frontend/app/src/webpack.confing.tsのような感じで新しいファイルを作り、

module: { rules: [ { test: /\.css$/, include: path.join(__dirname, 'src/components'), use: [ 'style-loader', { loader: 'typings-for-css-modules-loader', options: { modules: true, namedExport: true } } ] } ] }

このように記述してみましたが、VSCode側でエラーになってしまいます。

未使用のラベル。ts(7028) 'webpack.confing.ts' は、グローバル スクリプト ファイルと見なされるため、'--isolatedModules' でコンパイルすることはできません。import、export、または空の 'export {}' ステートメントを追加して、これをモジュールにしてください。ts(1208)

CSSをインストールすればいいのではないかと考え、ReactにCssを入れてみましたがダメでした。
・環境としては、Docker、バックエンド側(RoR)とフロントエンド(React TypeScript)側に分けている。
・nodeは18系

 そもそもなぜエラーが発生しているのかよく理解できませんでした。ローカルで自分が記述したコードでエラーが発生しているのではなく、ライブラリー側でこのようなエラーが発生しているというようなエラー文なので原因が推測できません。App.tsxはほぼ初期値のままなのでこちらがエラーの原因ではないと思います

### App.tsx import React from 'react'; import logo from './logo.svg'; // import './App.css'; import { WSF } from "./components/wavesurfer"; export function App() { return ( <> <WSF /> <h1>hello world</h1> </> ); } // export default App;

https://codesandbox.io/s/wavesurfer-react-20-gqvb6?file=/src/index.js
コードサンドボックスでは正常に動いています。
何かしらアドバイスがあればよろしくお願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。