Webpack / Typescript / Redux runtime error when using imported value

[NiloCK]

Is this a bug report?

Yes (at least, as far as I can tell).

Can you also reproduce the problem with npm 4.x?

Reproduced w/ npm 3.10.8, npm 4.6.1, yarn 1.3.2

Environment

1. node -v: 8.9.1
2. npm -v: 3.10.8, 4.6.1
3. yarn --version (if you use Yarn): 1.3.2
4. npm ls react-scripts (if you haven’t ejected): npm ERR! code 1 - should be the latest react-scripts-ts version. Project was started a few days ago.

Then, specify:

1. Operating system: Windows 10
2. Browser and version (if relevant): Different runtime errors in Chrome and FF:

Chrome 63:

Uncaught TypeError: Cannot read property 'loginModal' of undefined at modal (loginModal.ts:9) at combineReducers.js:40 at Array.forEach () at assertReducerShape (combineReducers.js:38) at combineReducers (combineReducers.js:94) at Object../src/redux/reducers/index.ts (index.ts:7) at webpack_require (bootstrap 15fad3226d544a213c70:669) at fn (bootstrap 15fad3226d544a213c70:87) at Object../src/redux/store.ts (store.ts:1) at webpack_require (bootstrap 15fad3226d544a213c70:669) at fn (bootstrap 15fad3226d544a213c70:87) at Object../src/index.tsx (index.tsx:1) at webpack_require (bootstrap 15fad3226d544a213c70:669) at fn (bootstrap 15fad3226d544a213c70:87) at Object.0 (registerServiceWorker.ts:114) at webpack_require (bootstrap 15fad3226d544a213c70:669) at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 15fad3226d544a213c70:715) at bootstrap 15fad3226d544a213c70:715

Firefox 57:

TypeError: WEBPACK_IMPORTED_MODULE_1__store.a is undefined [Learn More] loginModal.ts:9 modal loginModal.ts:9 assertReducerShape/< combineReducers.js:40 forEach self-hosted:273:13 assertReducerShape combineReducers.js:38 combineReducers combineReducers.js:94 ./src/redux/reducers/index.ts index.ts:7 webpack_require bootstrap%2015fad3226d544a213c70:669 fn bootstrap%2015fad3226d544a213c70:87 ./src/redux/store.ts store.ts:1 webpack_require bootstrap%2015fad3226d544a213c70:669 fn bootstrap%2015fad3226d544a213c70:87 ./src/index.tsx index.tsx:1 webpack_require bootstrap%2015fad3226d544a213c70:669 fn bootstrap%2015fad3226d544a213c70:87 [0] http://localhost:3000/static/js/bundle.js:59108:18 webpack_require bootstrap%2015fad3226d544a213c70:669 bootstrap%2015fad3226d544a213c70:715 http://localhost:3000/static/js/bundle.js:1:11

Steps to Reproduce

(Write your steps here:)

1. The build (yarn start) succeeds when I use an imported rootReducer
2. ...But the page crashes in the browser, with different errors displayed in Chrome and FF.

Expected Behavior

Project should build / run with imported rootReducer

Actual Behavior

Build fails when attempting to use createStore(importedRootReducer, initialState) instead of createStore(locallyDefinedRootReducer, initialState).

See the line of code in question here.

Reproducible Demo

https://github.com/NiloCK/knowsy/tree/20f651e67e1f3b27895c632fb9b434745763c118

To reproduce:

• clone the repo and run npm install / yarn install.
• navigate to ./src/redux/store.ts
• observe that the project builds and runs when line 30 is active, but not when line 29 is active
• observe ./src/redux/reducers/index.ts and compare with definition of localRootReducer in store.ts.

[JaffParker]

It's been awhile this issue is active, too bad there's no solution... I'm experiencing something sort of similar. I have some code that I share between projects, it lays outside the root project directory. To make it available inside my currect project I use npm link. That creates a symlink to the shared code inside node_modules. Here's how I import it:

import { connect } from 'react-redux'
import { Header, HeaderStateProps } from './Header'
import { AuthFilters } from 'shared/Functions/AuthFilters' // here's the import
import { AppState } from '../../redux/root'

export const HeaderContainer =
connect<HeaderStateProps>(
  (state: AppState) => ({
    authFilters: new AuthFilters(state.auth) // here's the usage
  })
)(Header)

That compiles fine, but I get an error at runtime:

TypeError: WEBPACK_IMPORTED_MODULE_2_shared_Functions_AuthFilters.AuthFilters is not a constructor

When I try to console.log(AuthFilters) it's undefined, and here's how the bundled file appears to look like:

module.exports = __webpack_require__.p + "static/media/AuthFilters.bb77a18e.ts";

So instead of the actual code, it compiles into a reference to the file that isn't present in the bundle... I Googled the error and I found that this could be affected by the --outFile option of the TS compiler, but I cannot find where the compiler options are set (except in tsconfig.js, but there's no such option).

[DorianGrey]

Not sure about the original issue, been a while...

However, regarding the issue you mentioned... The reason is quite simple - by default, webpack resolves symlinks: https://webpack.js.org/configuration/resolve/#resolve-symlinks The resolved symlink, not the symlink itself is used when matching against the include configuration. In your case, the resolved symlink will reference a file outside of the configured src directory, which means that it will fall back to the file-loader, thus being referenced as a static file asset.

[JaffParker]

Thanks, that makes sense. However, I tried physically moving my shared folder into the src folder and it didn't help. Only after I extracted the subfolders from shared directly into src did it include that class in the bundle...