TLDR:
The version of TS that gets installed with testcafe is version 3.5.3. However, in order to use import Type syntax, which is used by various libraries, such as jest/create-react-app, etc, we need to be on TS version 3.8 at minimum.
When I try to run a TS file with testcafe, the error I get is the following:
$ ./scripts/test_smoke.sh --debug-on-fail test.ts
Hash: 43a08709b49b552d25bc
Version: webpack 4.41.5
Time: 2113ms
Built at: 09/07/2020 1:26:25 PM
Asset Size Chunks Chunk Names
index.js 1.92 MiB main [emitted] main
Entrypoint main = index.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./test/smoke/polly/index.js] 3.79 KiB {main} [built]
+ 4 hidden modules
ERROR Cannot prepare tests due to an error.
Error: TypeScript compilation failed.
/Users/jonathan/web/node_modules/#testing-library/dom/node_modules/pretty-format/build/index.d.ts (7, 13): '=' expected.
/Users/jonathan/web/node_modules/#testing-library/dom/node_modules/pretty-format/build/index.d.ts (7, 18): ';' expected.
/Users/jonathan/web/node_modules/#testing-library/dom/node_modules/pretty-format/build/index.d.ts (7, 31): ';' expected.
All of these *.d.ts use the import Type syntax.
Related
I am trying to use splitChunks in Webpack 4, expecting to bundle the modules in node_modules into one bundle that won't be re-compiled each time I make a change to my code.
I added this code in my webpack.config.js:
optimization: {
splitChunks: {
chunks: 'all'
}
},
And I added this line in my index.html:
<script src="./vendors~app.js"></script>
The file 'vendor~app.js' being the new bundle generated.
When I run the webpack-dev-server the first time, it says:
Built at: 2018-09-13 13:32:47
Asset Size Chunks Chunk Names
app.js 3.15 KiB 0 [emitted] app
vendors~app.js 1.91 MiB 1 [emitted] [big] vendors~app
app.js.map 13.7 KiB 0 [emitted] app
vendors~app.js.map 3.98 MiB 1 [emitted] vendors~app
When I make a change to my source code and save, the webpack-dev-server starts compiling as expected and says:
Built at: 2018-09-13 13:33:46
Asset Size Chunks Chunk Names
app.js 3.16 KiB 0 [emitted] app
vendors~app.js 1.91 MiB 1 [emitted] [big] vendors~app
app.js.map 13.7 KiB 0 [emitted] app
vendors~app.js.map 3.98 MiB 1 [emitted] vendors~app
I was expecting the compiler not to re-compile vendors~app.js!
I thought that was the point of using splitChunks? Am I wrong? how can I avoid the compiler to re-compile vendors~app.js?
Thank you very much.
I am using Angular CLI (1.2.6) and Angular(4.3.2) and running following command
ng serve --aot --prod --proxy-config config/proxy.config.json
Or
ng build --aot --prod --proxy-config config/proxy.config.json
If you see below output vendor..bundle.js** showing 4.59 MB But if I open dist folder and check, its showing me 1.47 MB on disk.
So likewise for
vendor.**.bundle.js - showing(4.59 MB), on disk (1.47 MB)
main.**.bundle.js - showing(1.89MB), on disk (870KB)
So want to know, why this has difference ?
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
Hash: c030f10843de67c2fe52
Time: 145608ms
chunk {0} polyfills.cf0c1911723ba2bc9e0d.bundle.js (polyfills) 253 kB {4} [initial] [rendered]
chunk {1} main.56a2048fe2f1df9b3bfb.bundle.js (main) 1.89 MB {3} [initial] [rendered]
chunk {2} styles.dcf18dcb7e819103f605.bundle.css (styles) 228 bytes {4} [initial] [rendered]
chunk {3} vendor.ae04ef2adeac9f77347c.bundle.js (vendor) 4.59 MB [initial] [rendered]
chunk {4} inline.7a0ff2515f1bf65b1641.bundle.js (inline) 0 bytes [entry] [rendered]
The asset size fix was made and is part of release 1.3.0 (currently RC)
Look for this here which will link to this commit
#angular/cli: rewrite stats output to properly show the asset size
I'm trying to configure webpack-dev-server, but keep getting the error
webpack: Failed to compile.
What's strange is that I can successfully compile with just webpack. Here's the output from both:
Webpack-dev-server
> app-react#1.0.0 web-dev E:\App.React
> cross-env NODE_ENV=development webpack-dev-server --progress --colors
[17:42:21] developer mode: enabled
[17:42:21] Beta release: false
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from / 10% building modules 4/7 modules 3 active ...eact\node_modules\strip-ansi\index.js
[at-loader] Using typescript#2.4.1 from typescript and "tsconfig.json" from E:\App.React/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 3 errors Hash: a94bf08b4d38bcd62009
Version: webpack 2.2.1
Time: 5372ms
Asset Size Chunks Chunk Names
bundle.js 1.71 MB 0 [emitted] [big] main
bundle.js.map 2.09 MB 0 [emitted] main
chunk {0} bundle.js, bundle.js.map (main) 1.67 MB [entry] [rendered]
[223] ./~/reactxp/index.js 146 bytes {0} [built]
[239] ./src/ts/index.tsx 248 bytes {0} [built]
[240] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} [built]
[241] ./~/ansi-html/index.js 4.26 kB {0} [built]
[242] ./~/ansi-regex/index.js 135 bytes {0} [built]
[243] ./src/ts/arena/TempTDP.tsx 2.6 kB {0} [built]
[244] ./src/ts/platform/web/PlatformModules.ts 414 bytes {0} [built]
[262] ./~/html-entities/index.js 231 bytes {0} [built]
[564] ./~/strip-ansi/index.js 161 bytes {0} [built]
[566] ./~/url/url.js 23.3 kB {0} [built]
[567] ./~/url/util.js 314 bytes {0} [built]
[571] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[572] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[574] (webpack)/hot/emitter.js 77 bytes {0} [built]
[575] multi (webpack)-dev-server/client?http://localhost:8080 ./src/ts/index.tsx 40 bytes {0} [built]
+ 561 hidden modules
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
webpack: Failed to compile.
Webpack
> app-react#1.0.0 web-watch E:\App.React
> cross-env NODE_ENV=development webpack --progress --colors --watch
[17:46:04] developer mode: enabled
[17:46:04] Beta release: false
0% compiling
Webpack is watching the files…
10% building modules 0/1 modules 1 active ....js!E:\App.React\src\ts\index.tsx
[at-loader] Using typescript#2.4.1 from typescript and "tsconfig.json" from E:\App.React/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 3 errors Hash: c0ddf8dd298d85956a54
Version: webpack 2.2.1
Time: 4495ms
Asset Size Chunks Chunk Names
bundle.js 1.41 MB 0 [emitted] [big] main
bundle.js.map 1.73 MB 0 [emitted] main
[3] ./~/reactxp/dist/common/Interfaces.js 9.04 kB {0} [built]
[5] ./~/react/react.js 56 bytes {0} [built]
[13] ./~/reactxp/dist/common/Types.js 8.78 kB {0} [built]
[14] ./~/reactxp/dist/web/Styles.js 15.3 kB {0} [built]
[119] ./~/reactxp/dist/web/ViewBase.js 8.94 kB {0} [built]
[121] ./~/reactxp/index.js 146 bytes {0} [built]
[198] ./~/reactxp/dist/web/Accessibility.js 1.07 kB {0} [built]
[199] ./~/reactxp/dist/web/Image.js 14.1 kB {0} [built]
[202] ./~/reactxp/dist/web/Text.js 4.71 kB {0} [built]
[203] ./~/reactxp/dist/web/TextInput.js 8.3 kB {0} [built]
[207] ./src/ts/arena/TempTDP.tsx 2.6 kB {0} [built]
[208] ./src/ts/platform/web/PlatformModules.ts 414 bytes {0} [built]
[209] ./src/ts/platform/web/WebLogger.ts 600 bytes {0} [built]
[478] ./~/reactxp/dist/web/ReactXP.js 5.47 kB {0} [built]
[494] ./src/ts/index.tsx 248 bytes {0} [built]
+ 480 hidden modules
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
I'm using webpack#2.2.1 and webpack-dev-server#2.5.1. I have tried other versions but still get the same problem.
Would those errors cause webpack-dev-server to fail, but not webpack?
Here's my webpack.config.js:
const webpackConfig: webpack.Configuration = {
entry: "./src/ts/index.tsx",
output: {
path: __dirname + "/build/web",
filename: "bundle.js"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
alias: {
PlatformModules: path.resolve(
__dirname,
"src/ts/platform/web/PlatformModules"
)
}
},
module: {
loaders: isDev
? [{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }]
: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{
test: /\.tsx?$/,
loader: "webpack-unassert-loader",
enforce: "post"
}
]
}
};
export default webpackConfig;
I also can't seem to find any info online on how to debug these types of issues. Is there no --verbose equivalent?
From your webpack log:
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
You can see that webpack is failing too. Fix these errors and both (webpack and webpack-dev-server) will work.
Hi i'm building an app with gulp build command after a few seconds shows an error "angular is no defined" and several error more, this is the log :
{lamb} gulp build
[23:45:11] Requiring external module babel-register
[23:45:13] Using gulpfile C:\Apps\test\gulpfile.babel.js
[23:45:13] Starting 'lint'...
[23:45:14] Starting 'styles'...
[23:45:15] Starting 'scripts'...
[23:45:15] Starting 'images'...
[23:45:16] Starting 'fonts'...
[23:45:16] Starting 'extras'...
[23:45:16] Finished 'images' after 923 ms
[23:45:16] Finished 'fonts' after 90 ms
[23:45:16]
C:\Apps\test\app\scripts\main.js
3:10 error "angular" is not defined no-undef
5:34 error A space is required after ',' comma-spacing
9:12 error Extra space after key "controller" key-spacing
10:11 error Trailing spaces not allowed no-trailing-spaces
12:11 error Extra space after key "templateUrl" key-spacing
13:12 error Extra space after key "controller" key-spacing
16:10 error Extra space after key "templateUrl" key-spacing
17:12 error Extra space after key "controller" key-spacing
C:\Apps\test\app\scripts\controllers\controllerView.js
2:1 error "angular" is not defined no-undef
✖ 9 problems (9 errors, 0 warnings)
[23:45:16] 'lint' errored after 3.17 s
[23:45:16] ESLintError in plugin 'gulp-eslint'
Message:
Failed with 9 errors
[23:45:16] Finished 'styles' after 2.07 s
[23:45:16] Finished 'extras' after 609 ms
[23:45:16] Finished 'scripts' after 1.53 s
Add this to your .eslintrc file:
{
"globals": {
"angular": true
},
// ...
}
See the accepted answer for this question for more information:
ESLint's "no-undef" rule is calling my use of Underscore an undefined variable
After updating some of the packages, my compilation fails. And the error doesn't seems to be very helpful.
I have no clues where the error is. Already tried removing a lot of things, and the errors persists.
I've pushed the project with the issue here: https://github.com/KadoBOT/reaxor/tree/need-validation
The error appears in two places, in the first line after I npm start and in the last line after the bundle finishes
(...)
[0] multi main 64 bytes {0} [built] [1 error]
[1] (webpack)-dev-server/client?http://localhost:3000 2.67 kB {0} [built]
[2] ./~/url/url.js 22.3 kB {0} [built]
(...)
And:
(...)
ERROR in undefined is not iterable!
# multi main
webpack: bundle is now VALID.
Anyone experienced the same problem after upgrading packages? How do I solve this, since there is no hint, where the issue is?
Just saw this tweet from babel: https://twitter.com/babeljs/status/727301512041512961
Might help you with your problem? I have a team member running into the same issue just now and we are trying that out...