Module Not Found: `@types/reactstrap` and `bootstrap`

Prerequisites

• Using yarn
• Using node 10.x
• Using an up-to-date master branch
• Using latest version of devtools. See wiki for howto update
• Link to stacktrace in a Gist (for bugs)
• For issue in production release, devtools output of DEBUG_PROD=true yarn build && yarn start
• Tried solutions mentioned in #400

Expected Behavior

I should be able to install arbitrary third-party dependencies for usage

Current Behavior

Errors out and returns this output

╭─lknecht@愛と支えボックス ~/Repositories/electron_debugging/faust_desktop_application ‹research/junk_testing›
╰─$ yarn
yarn install v1.17.3
$ node ./internals/scripts/CheckYarn.js
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > bootstrap@4.4.1" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.4.1" has unmet peer dependency "popper.js@^1.16.0".
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.0.1" has incorrect peer dependency "eslint-plugin-react-hooks@^1.7.0".
[4/4] 🔨  Building fresh packages...
$ node -r @babel/register internals/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn build-dll && opencollective-postinstall
  • electron-builder  version=22.3.6
  • loaded configuration  file=package.json ("build" field)
  • installing production dependencies  platform=darwin arch=x64 appDir=/Users/lknecht/Repositories/electron_debugging/faust_desktop_application/app
yarn run v1.17.3
$ cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors
Hash: b8d90e8ea3152ef907e5
Version: webpack 4.41.5
Time: 2997ms
Built at: 03/13/2020 4:16:41 PM
              Asset      Size    Chunks             Chunk Names
renderer.dev.dll.js  5.42 MiB  renderer  [emitted]  renderer
Entrypoint renderer = renderer.dev.dll.js
[0] dll renderer 12 bytes {renderer} [built]
[./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {renderer} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {renderer} [built]
[child_process] external "child_process" 42 bytes {renderer} [built]
[crypto] external "crypto" 42 bytes {renderer} [built]
[electron] external "electron" 42 bytes {renderer} [built]
[events] external "events" 42 bytes {renderer} [built]
[fs] external "fs" 42 bytes {renderer} [built]
[http] external "http" 42 bytes {renderer} [built]
[https] external "https" 42 bytes {renderer} [built]
[module] external "module" 42 bytes {renderer} [built]
[os] external "os" 42 bytes {renderer} [built]
[path] external "path" 42 bytes {renderer} [built]
[url] external "url" 42 bytes {renderer} [built]
[util] external "util" 42 bytes {renderer} [built]
    + 930 hidden modules

WARNING in ./node_modules/electron-debug/index.js 96:45-58
Critical dependency: the request of a dependency is an expression
 @ dll renderer

WARNING in ./node_modules/electron-debug/index.js 97:61-74
Critical dependency: the request of a dependency is an expression
 @ dll renderer

ERROR in dll renderer
Module not found: Error: Can't resolve '@types/reactstrap' in '/Users/lknecht/Repositories/electron_debugging/faust_desktop_application'
 @ dll renderer renderer[2]

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in '/Users/lknecht/Repositories/electron_debugging/faust_desktop_application/node_modules/bootstrap/dist/js'
 @ ./node_modules/bootstrap/dist/js/bootstrap.js 7:82-99
 @ dll renderer
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Possible Solution

Looking for guidance to know what I’m doing wrong. I have a strong React skill set (aka advanced), but I do not know webpack or how these are being bundled.

Steps to Reproduce (for bugs)

1. git clone https://github.com/loganknecht/electron_debugging.git
2. git checkout research/junk_testing
3. cd faust_desktop_application
4. yarn

Prior to this all I did was

• yarn add reactstrap
• yarn add @types/reactstrap
• yarn add bootstrap

Context

This blocks me from using reactstrap and boot strap reliably for builds I believe?

Your Environment

• Node version : v13.6.0
• Version or Branch used : master
• Operating System and version : Mac OSX 10.14.6
• Link to your project : https://github.com/loganknecht/electron_debugging/tree/research/junk_testing

Gratitude

Thank you for making this! I really really enjoy having a boiler plate to work from with respect to the tooling I’m used to. I’m definitely trying to follow your guidance of using this as inspiration, but my lack of webpack skills is what makes that hard. So this is, again, something I really appreciate! Thank you!

[loganknecht]

The solution for this was to move the @types/reactstrap dependency from the dependencies section in my package.json to the devDependencies section.

[kuabhish]

it worked in Ubuntu, not in windows … 😦