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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

11921閲覧

React.jsでModule not found: Can't resolveと表示されてしまいます

React

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2020/08/29 20:50

編集2020/09/05 01:14

前提・実現したいこと

AI音声アランのニュースアプリを作っているのですが、エラーが発生してしまいました。
完成品ではこのような画面が表示されますが、自分の方ではエラーメッセージが表示されてしまします。
完成品

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

イメージ説明

App.js

import React, { useState, useEffect } from 'react'; import { Typography } from '@material-ui/core'; import wordsToNumbers from 'words-to-numbers'; import alanBtn from '@alan-ai/alan-sdk-web'; import logo from './images/logo.png'; import { NewsCards, Modal } from './components'; import useStyles from './styles'; const App = () => { const [activeArticle, setActiveArticle] = useState(0); const [newsArticles, setNewsArticles] = useState([]); const [isOpen, setIsOpen] = useState(false); const classes = useStyles(); useEffect(() => { alanBtn({ key: '44c4d84f0650e0b9a6752e3e5d9862462e956eca572e1d8b807a3e2338fdd0dc/stage', onCommand: ({ command, articles, number }) => { if (command === 'newHeadlines') { setNewsArticles(articles); setActiveArticle(-1); } else if (command === 'instructions') { setIsOpen(true); } else if (command === 'highlight') { setActiveArticle((prevActiveArticle) => prevActiveArticle + 1); } else if (command === 'open') { const parsedNumber = number.length > 2 ? wordsToNumbers((number), { fuzzy: true }) : number; const article = articles[parsedNumber - 1]; if (parsedNumber > 20) { alanBtn().playText('Please try that again...'); } else if (article) { window.open(article.url, '_blank'); alanBtn().playText('Opening...'); } else { alanBtn().playText('Please try that again...'); } } }, }); }, []); return ( <div> <div className={classes.logoContainer}> {newsArticles.length ? ( <div className={classes.infoContainer}> <div className={classes.card}><Typography variant="h5" component="h2">Try saying: <br /><br />Open article number [4]</Typography></div> <div className={classes.card}><Typography variant="h5" component="h2">Try saying: <br /><br />Go back</Typography></div> </div> ) : null} <img src="https://alan.app/voice/images/previews/preview.jpg" className={classes.alanLogo} alt="logo" /> </div> <NewsCards articles={newsArticles} activeArticle={activeArticle} /> <Modal isOpen={isOpen} setIsOpen={setIsOpen} /> {!newsArticles.length ? ( <div className={classes.footer}> <Typography variant="body1" component="h2"> Created by <a className={classes.link} href="https://www.linkedin.com/in/adrian-hajdin/"> Adrian Hajdin</a> - <a className={classes.link} href="http://youtube.com/javascriptmastery"> JavaScript Mastery</a> </Typography> <img className={classes.image} src={logo} height="50px" alt="JSMastery logo" /> </div> ) : null} </div> ); }; export default App;

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

package.json

{ "name": "alan_al_news_application", "version": "0.1.0", "private": true, "dependencies": { "@alan-ai/alan-sdk-web": "^1.3.1", "@material-ui/core": "^4.11.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/react-dom": "^16.9.8", "classnames": "^2.2.6", "ejs": "^3.1.5", "module": "^1.2.5", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "words-to-numbers": "^1.5.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/react": "^16.9.48" } }

補足情報(OS/GitHub/学習動画)

OS Windows10
GitHub
学習動画

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

エラー内容的には、srcにcomponentsディレクトリがないというエラーっぽいですが、
誤字などないでしょうか。

投稿2020/09/10 07:09

hayato7

総合スコア1135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

React

2020/09/18 09:02

ありがとうございます!誤字でした????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問