環境

react: 16.13.1
webpack: 4.42.0
dotenv: 8.2.0

webpack設定ファイル内でのdotenvをいい感じに設定する

参考までにpackage.jsonのscriptを置いておきます。

package.json

  "scripts": {
    "start": "webpack-dev-server --hot --inline --config webpack.development.js",
    "build": "webpack --config webpack.production.js",

こんな感じで、開発環境と本番環境でwebpackの設定ファイルを分けていました。参考: https://webpack.js.org/guides/production/

で、開発環境だと.envの内容が読めているのに、本番ではNetlifyのGUIで設定した環境変数が読めてなくて困ってました。というのも、Dotenvは.envを探しにいくけど、.envはgitで管理しないので本番に上がらず…という次第ですね。

設定をこんな感じに変えたら読めました。

webpack.production.js

const Dotenv = require('dotenv-webpack');

module.exports = {
  mode: 'production',

略

  plugins: [
    new Dotenv({
      systemvars: true
    })

systemvars: trueが肝です。

systemvarsの他にもオプションがありました。とかとか、Dotenvについての詳細はこちら。
https://www.npmjs.com/package/dotenv-webpack#properties

はじめに

progateが終わり、
Reactチュートリアルを進めようとしましたが、
理解できず諦めました。
先週の土日は勉強より、今後どうしていくかに時間を費やしました。

得られた事

• 質問できる方を見つけた
• 今後の方針を決めた(UdemyとYoutubeでの学習)
• 環境構築

今日より勉強再開していきます。

propsとstate

import React from "react";
import {render} from "react-dom"

class Human extends React.Component{ {/*Humanのクラスを作る*/}
  constructor(props){　 {/*引数にpropsを取る 引数なので与える側と受け取る側がいる*/}
    super(props);
    this.state={name:"masa"};　 {/*state:状態を示す とりあえず定数と思っておこう*/}
  }
  render(){
  return( 　 {/*下記をHumanに返す*/}
    <h2>
     {this.state.name},　 {/*stateは内部に持っている値*/}
     {this.props.age}　　 {/*propsは外部に持っている値*/}
    </h2>);
}
}

render(<Human age="30"/>,document.getElementById("root"));　 {/*Humanのageを決めている*/}

  const copyText = (): void => {
    navigator.clipboard.writeText(hoge);
  };

          <Button
            onClick={(): void => copyText()}
            value='コピー'
          />

備考

navigator.clipboard.writeText(hoge); のしたでAlertとかするとコピーできなくなる

npm install -g create-react-app

でインストール

npx create-react-app プロジェクト名 

でフォルダ作成

cd プロジェクト名

で移動して

yarn start

or

npm start

でlocalhost起動

はじめに

react-router-hash-linkを使ってreactアプリを作っている時につまずいた備忘録です。

コード

React.js

import React, { Component } from 'react';
import { HashLink } from 'react-router-hash-link';

export default function hoge() {
    return (
        <HashLink to="./hoge#hoge" smooth>
            hoge
        </HashLink>
    )
}

エラー

console.log

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
    at invariant (tiny-invariant.esm.js:10)
    at Link.js:84
    at updateContextConsumer (react-dom.development.js:18304)
    at beginWork (react-dom.development.js:18661)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:141)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

発生条件と解決方法

どうもstorybookはreact-routerに依存したサードパーティのコンポーネントを追加することを予期していないようで、対象コンポーネントをreact-router-domの<MemoryRouter/>で囲ってあげれば対応できるっぽいです。
また同様のことがreact-reduxの<Provider/>の外でconnectやuseSelecterを使った場合などにも生じるようです。

ただ今回は別にstorybookを使っているわけでもないのでとりあえず該当のコードを<Memoryrouter/>で囲うことで解決しました。

React.js

import React, { Component } from 'react';
import { MemoryRouter} from 'react-router-dom';
import { HashLink } from 'react-router-hash-link';

export default function hoge() {
    return (
        <MemoryRouter>
            <HashLink to="./hoge#hoge" smooth>
                hoge
            </HashLink>
        <MemoryRouter>
    )
}

storybookに追加する際のエラーでもこれと同様に<MemoryRouter/>で囲う他、addDecolatorを用いる方法もあるようです。以下の記事を参照してみてください。

参考

https://github.com/storybookjs/storybook/issues/8892
https://qiita.com/daikiojm/items/da3299d7b90d38194d85