jsファイルにimport文を書いたら「モジュールの宣言ファイルが見つかりませんでした」と叱られた。

Question

簡単なDappsを作成しています。フロントサイドにreactを使っていますが、import文で詰まっています。
エラー文は以下の通りでimport truffleContract from 'truffle-contract'に
「モジュールの宣言ファイルが見つかりません /path/truffle-contract/index.js は暗黙的に'any'型になります」
と注意が出ます。そのためtruffle-contractが読み込めずdeployedメソッドが効かないのだと思われます。

TypeError: truffle_contract__WEBPACK_IMPORTED_MODULE_4___default.a.deployed is not a function
    at App.componentDidMount (App.js:30)

import React from 'react';
import './App.css';
import MarriageCertification from './contracts/MarriageCertification.json';
import getweb3 from './getWeb3';
import truffleContract from　'truffle-contract';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      web3: null,
      accounts: null,
      contract: null,
      list: [],
      husbandName: "",
      husbandAge: "",
      wifeName: "",
      wifeAge: "",
      swearWord: "",
    }
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount = async() => {
    try {
      const web3 = await getweb3();
      const accounts = await web3.eth.getAccounts();
      const contract = truffleContract(MarriageCertification);
      contract.setProvider(web3.currentProvider);
      const instance = await truffleContract.deployed();

      this.setState({
        web3, accounts, contract: instance
      });
      console.log(this.state.accounts);
      console.log(this.state.web3);
      console.log(this.state.contract);
    } catch (e) {
        console.log(e);
    }
  }
  //以下省略

###やってみたこと
require文に変えてみる
const truffleContract = require('truffle-contract');
require文に「モジュールの宣言ファイルが見つかりません」が出るようになった。

truffle-contractのアンインストール、再度インストール
npm uninstall truffle-contract --save
npm install truffle-contract
変わらず「モジュールの宣言ファイルが見つかりません」が出続ける。

truffle-contract/index.jsにexportする文が書かれていないのか？とも考えましたが、
module.exports = contract;
とちゃんと書かれていました。

「モジュールの宣言ファイルが見つかりません」で検索しても検索数が少なく、解決策が見つからず困っています。
手がかりになることがありましたらお知恵を拝借させてください。
よろしくお願いします。

Answer 1

すいません。TSではなくJSの話でしたね。
削除はできないようなので、とりあえず斜線を入れておきます

確証が持てなくて申し訳ないですが、「モジュールの宣言ファイルが見つかりませんでした」はTypeScriptの型定義ファイルが見つからなかったときに出るエラーな気がします。（日本語でこのメッセージを見たことがないのでわからないですが）

TS.configの設定でnoImplicitAnyをfalseにしてしまえば、とりあえずany型で取り込むことはできると思うので、それで使えないでしょうか？

それか一応、誰かが作った型定義ファイルは以下に落ちてるみたいなので、これを使ってみても良いかもしれません。
https://www.npmjs.com/package/@machinomy/types-truffle-contract

Comments

[hokosugi]

ご回答ありがとうございます。
まだまだ初心者でTSとJSの区別もついていません。ご意見を伺いエラー表示に"TS(7016)"があることに気付き検索するとVSCodeの問題だとするページを見つけたのでatomで開き直して保存したらエラーなくreactが動いてくれました。
https://stackoverflow.com/questions/51069070/removing-ts-errors-from-js-files-in-vs-code
その後VSCodeに戻っても「モジュールの宣言ファイルが見つかりません」、"TS(7016)"は消えはせず、それでいてエラーにならないのは私の理解を超越していてどうにもなりません。しかし解決したので良しとします。ご協力ありがとうございました。

Answer 2

exportされたものと違う名前のものをimportしようとしているだけでは？
これ見る限りだと

import contract from 'truffle-contract'

でcontractをimportして使うっぽいように見えるんですが。

Comments

[hokosugi]

ご回答ありがとうございます。
試しに変数名を'contract'に変更してみましたが変化なく、「モジュールの宣言ファイルが見つかりません」となります。リンクしていただいたドキュメントを再度熟読してみてヒントを得たいと思います。