npm install errors

[erkieh]

Hi

I am having problems doing a clean npm i. The output is:

C:\n\scalablets>npm i
npm WARN deprecated @types/[email protected]: This is a stub types definition for reselect (https://github.com/rackt/reselect). reselect provides its own type definitions, so you don't need @types/reselect installed!
npm WARN deprecated [email protected]: 💥  preset-latest accomplishes the same task as babel-preset-env. 🙏  Please install it with 'npm install babel-preset-env --save-dev'. '{ "presets": ["latest"] }' to '{ "presets": ["env"] }'. For more info, please check the docs: http://babeljs.io/docs/plugins/preset-env 👌. And let us know how you're liking Babel at @babeljs on 🐦
npm WARN deprecated [email protected]: It is recommended to install Yarn using the native installation method for your environment. See https://yarnpkg.com/en/docs/install
npm WARN deprecated [email protected]: Use mz or fs-extra^3.0 with Promise Support
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g

> [email protected] postinstall C:\n\scalablets\node_modules\spawn-sync
> node postinstall


> [email protected] postinstall C:\n\scalablets
> npm run deploy


> [email protected] predeploy C:\n\scalablets
> rimraf build/public/*.*


> [email protected] deploy C:\n\scalablets
> cross-env NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack.config.prod.js

ts-loader: Using [email protected] and C:\n\scalablets\tsconfig.json
Hash: 105ed5d55fbdf53f9df1
Version: webpack 2.5.1
Time: 25675ms
                                        Asset       Size  Chunks                    Chunk Names
               vendor.5f7a6433563bd674a292.js     789 kB       0  [emitted]  [big]  vendor
                 main.b216aee430e2edbf77e4.js    2.07 MB       1  [emitted]  [big]  main
    main.02949039b690e54acd3a2459059d0422.css    11.4 kB       1  [emitted]         main
             main.b216aee430e2edbf77e4.js.map    2.44 MB       1  [emitted]         main
main.02949039b690e54acd3a2459059d0422.css.map  118 bytes       1  [emitted]         main
                                manifest.json  285 bytes          [emitted]
  [11] ./~/styled-components/dist/styled-components.es.js 251 kB {0} {1} [built]
  [63] ./~/redux/es/index.js 1.08 kB {0} {1} [built]
 [139] ./~/apollo-client/index.js 1.26 kB {0} {1} [built]
 [140] ./~/react-router/es/index.js 1.46 kB {0} {1} [built]
 [216] ./~/graphql-tag/index.js 4.66 kB {0} {1} [built]
 [217] ./~/react-router-redux/lib/index.js 1.97 kB {0} {1} [built]
 [258] ./~/axios/index.js 40 bytes {0} {1} [built]
 [259] ./~/react-apollo/lib/browser.js 650 bytes {0} {1} [built]
 [260] ./~/react-dom/index.js 59 bytes {0} {1} [built]
 [261] ./~/react-markdown/src/react-markdown.js 2.15 kB {0} {1} [built]
 [262] ./~/react-redux/es/index.js 230 bytes {0} [built]
 [263] ./~/redux-logic/build-es/index.js 245 bytes {0} {1} [built]
 [569] ./~/rxjs/Rx.js 9.65 kB {0} [built]
[1007] multi ./src/client/index.tsx 28 bytes {1} [built]
[1008] multi react react-dom styled-components react-redux react-router react-router-redux react-markdown redux-connect redux rxjs axios redux-logic react-apollo graphql-tag apollo-client 196 bytes {0} [built]
    + 997 hidden modules

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(45,5): error TS2403: Subsequent variable declarations must have the same type.  Variable 'referrerPolicy' must be of type 'ReferrerPolicy', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(46,5): error TS2403: Subsequent variable declarations must have the same type.  Variable 'mode' must be of type 'RequestMode', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(47,5): error TS2403: Subsequent variable declarations must have the same type.  Variable 'credentials' must be of type 'RequestCredentials', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(48,5): error TS2403: Subsequent variable declarations must have the same type.  Variable 'cache' must be of type 'RequestCache', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(49,5): error TS2403: Subsequent variable declarations must have the same type.  Variable 'redirect' must be of type 'RequestRedirect', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(56,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'cache' must be of type 'RequestCache', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(57,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'credentials' must be of type 'RequestCredentials', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(58,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'destination' must be of type 'RequestDestination', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(63,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'mode' must be of type 'RequestMode', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(64,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'redirect' must be of type 'RequestRedirect', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(66,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'referrerPolicy' must be of type 'ReferrerPolicy', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(67,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'type' must be of type 'RequestType', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(94,14): error TS2403: Subsequent variable declarations must have the same type.  Variable 'type' must be of type 'ResponseType', but here has type 'string'.

ERROR in C:\n\scalablets\node_modules\openui\dist\SvgIcon\types.d.ts
(2,35): error TS2314: Generic type 'SVGProps<T>' requires 1 type argument(s).

ERROR in main.b216aee430e2edbf77e4.js from UglifyJs
Name expected [main.b216aee430e2edbf77e4.js:42736,8]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 1.46 kB {0} [built]
       [1] ./~/css-loader!./~/postcss-loader!./~/github-markdown-css/github-markdown.css 11.5 kB {0} [built]

I got rid of the TS errors by forcing Typescript version 2.2.2 instead of the 2.3.
The SVGProps error seems to be related to the react typings version. Newer versions have the type argument. I have added SVGElement in my version.

The error:
ERROR in main.b216aee430e2edbf77e4.js from UglifyJs
Name expected [main.b216aee430e2edbf77e4.js:42736,8]

seems to come from the second line in the following piece of code:

function Box(_a) {
    var { children } = _a, rest = __rest(_a, ["children"]);
    return (React.createElement(styles_1.default, Object.assign({}, rest), children || null));
}

Tried "fixing" that also, but then I get

ERROR in main.2f6426b039edcbfeac87.js from UglifyJs
Unexpected character '`' [main.2f6426b039edcbfeac87.js:42558,44]

From:

exports.BoxStyles = styled_components_1.css `
  display: flex;
  background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
  justify-content: ${({ justifyContent }) => justifyContent || 'flex-start'};
  align-items: ${({ alignItems }) => alignItems || 'flex-start'};
  flex-direction: ${({ flexDirection }) => flexDirection || 'column'};
  flex-wrap: ${({ flexWrap, reverse }) => styleUtils_1.calculateFlexWrap(flexWrap, reverse)};
  padding: ${({ pad }) => styleUtils_1.sizeToString(pad)};
  margin: ${({ margin }) => styleUtils_1.sizeToString(margin)};
  width: ${({ boxSize }) => styleUtils_1.boxSizeToStyle(boxSize).width};
  height: ${({ boxSize }) => styleUtils_1.boxSizeToStyle(boxSize).height};
  flex-basis: auto;
  min-height: ${({ full }) => styleUtils_1.calculateFullStyle(full, 'vh')};
  min-width: ${({ full }) => styleUtils_1.calculateFullStyle(full, 'vw')};
  cursor: ${({ selectable }) => selectable ? 'pointer' : 'inherit'};
`;

[erkieh]

Does HMR work?

When running with npm run start
I tried changing the landing presentation

I get the following in my browser console, but nothing happens visually.

[HMR] bundle rebuilding
client.js:207 [HMR] bundle rebuilt in 799ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:100 [HMR] Updated modules:
process-update.js:102 [HMR]  - ./src/client/features/Landing/index.tsx
process-update.js:102 [HMR]  - ./src/client/features/Landing/presentation.tsx
process-update.js:107 [HMR] App is up to date.

[RyanCCollins]

Hey @erkieh,

My recommendation is to start fresh and instead of using npm use yarn. Npm on its own is unpredictable. It's not only possibly, but highly likely that the packages installed on your computer are completely different than mine. This is where Yarn comes in, offering a deterministic approach. When you clone the repo and use yarn to install, it's guaranteed that your packages will look exactly the same as mine.

As far as the Hot Module Reloading, I have not noticed any difficulties yet, but I will keep a look out for it. I'm happy to accept PRs if you make any improvements.

Lastly, please keep in mind that this repo is still in active development. We have a disclaimer on the top of the readme to show that we don't think this code is ready for a production app yet. Please keep this in mind.

[erkieh]

@RyanCCollins Started clean with yarn. I still get:

ERROR in main.051e142840bce3bc6c10.js from UglifyJs
SyntaxError: Name expected [main.051e142840bce3bc6c10.js:41129,8]

I am not sure if it even should work. If I undestand correctly, then the used uglify version does not support es6 destructuring and Template literals.

I get the an error in the same place with IE11, since it does not support es6
SCRIPT1010: Expected identifier

The HMR thing is strange, since the hot middleware code seems to run and get the updated definiton, but no refresh is done.

[cedmax]

@RyanCCollins It looks like you have the same problem on travis
https://travis-ci.org/scalable-react/scalable-react-typescript-boilerplate/builds

it was introduced with this merge dec19f2, apparently

[marcindobry]

Bump, same issue :/

[deanshelton913]

same issue

[ShinaZin]

same problem, looking for alternatives