ts-loader does not exist
Opened this issue · 2 comments
Current behavior
After a fresh install, and following th tutorial, running the npx cypress open-ct
results in a big error, and even though I can see the test cases, clicking on them won't run them.
log:
npx cypress open-ct
libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
ℹ 「wds」: Project is running at http://localhost:36041/webpack-dev-server/
ℹ 「wds」: webpack output is served from /__cypress/src
ℹ 「wds」: Content not from webpack is served from <project root>
✖ 「wdm」: asset main.js 8.2 KiB [emitted] (name: main)
asset index.html 339 bytes [emitted]
./node_modules/@cypress/webpack-dev-server/dist/browser.js 89 bytes [built] [code generated]
./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js 872 bytes [built] [code generated]
./node_modules/@cypress/webpack-dev-server/dist/aut-runner.js 483 bytes [built] [code generated]
WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./node_modules/@cypress/webpack-dev-server/dist/browser.js (./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js) 2:30-110
Module not found: Error: Can't resolve 'ts-loader' in '<project root>'
resolve 'ts-loader' in '<project root>'
Parsed request is a module
using description file: <project root>/package.json (relative path: .)
resolve as module
looking for modules in <project root>/node_modules
single file module
using description file: <project root>/package.json (relative path: ./node_modules/ts-loader)
no extension
<project root>/node_modules/ts-loader doesn't exist
.js
<project root>/node_modules/ts-loader.js doesn't exist
<project root>/node_modules/ts-loader doesn't exist
<deleted local file folder scan data from here in the log>
@ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41
ERROR in ./node_modules/@cypress/webpack-dev-server/dist/browser.js (./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js) 5:16-138
Module not found: Error: Can't resolve 'ts-loader' in '<project root>'
resolve 'ts-loader' in '<project root>'
Parsed request is a module
using description file: <project root>/package.json (relative path: .)
resolve as module
looking for modules in <project root>/node_modules
single file module
using description file: <project root>/package.json (relative path: ./node_modules/ts-loader)
no extension
<project root>/node_modules/ts-loader doesn't exist
.js
<project root>/node_modules/ts-loader.js doesn't exist
<project root>/node_modules/ts-loader doesn't exist
<deleted local file folder scan data from here in the log>
@ ./node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41
webpack 5.44.0 compiled with 2 errors and 2 warnings in 297 ms
ℹ 「wdm」: Failed to compile.
GET /__/ 200 4.253 ms - -
GET /__cypress/runner/cypress_runner.css 200 4.484 ms - -
GET /__cypress/runner/cypress_runner.js 200 2.149 ms - -
GET /chrome-variations/seed?osname=linux&channel=stable&milestone=92 304 571.657 ms - -
POST /ListAccounts?gpsia=1&source=ChromiumBrowser&json=standard 200 741.219 ms - -
GET /__cypress/runner/fonts/mulish-latin-400-normal.woff2 200 2.145 ms - 31176
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 1.833 ms - 76120
GET /__cypress/runner/fonts/open-sans-latin-400-normal.woff2 200 2.429 ms - 14380
GET /__cypress/runner/fonts/mulish-latin-500-normal.woff2 200 2.448 ms - 31176
GET /v1/pages/ChRDaHJvbWUvOTIuMC40NTE1LjEwNxIeCcfYYc5uai7PEgUN3pTIUBIFDS-IPoISBQ2RYZVO?alt=proto 200 589.495 ms - -
GET /__cypress/iframes/<project root>/tests/unit/app.component.cy-spec.ts 200 6.452 ms - 339
GET /__cypress/iframes/<project root>/tests/unit/app.component.cy-spec.ts 304 4.231 ms - -
GET /__cypress/src/main.js 200 2.066 ms - -
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 0.586 ms - 13600
GET /__cypress/runner/fonts/mulish-latin-700-normal.woff2 200 0.474 ms - 31176
BROWSER EXITED SAFELY
COMPONENT TESTING STOPPED
Versions
Angular CLI: 12.1.3
Node: 16.3.0 (Unsupported)
Package Manager: npm 7.20.1
OS: linux x64
Angular: 12.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1201.3
@angular-devkit/build-angular 12.1.3
@angular-devkit/core 12.1.3
@angular-devkit/schematics 12.1.3
@schematics/angular 12.1.3
rxjs 6.6.7
typescript 4.3.5
Manually installing
npm i -D ts-loader
and npm i -D angular2-template-loader
seems to solve the immediate issue with the error message.
However, my tests now produce "Expected 'styles' to be an array of strings."
I have tried to fix the issue by my webpack
knowledge is quite short.
changed
{
test: /(\.scss|\.sass)$/,
exclude: [/node_modules/, /\.global\.scss$/],
use: ['raw-loader', 'sass-loader'],
},
to
{
test: /(\.scss|\.sass)$/,
exclude: [/node_modules/, /\.global\.scss$/],
use: ['to-string-loader', 'css-loader', 'sass-loader']
},
But now I have other errors ("The template specified for component AppComponent is not a string") so I gave up for now :(
My testfile is the same from the tutorial:
import { initEnv, mount } from 'cypress-angular-unit-test';
import { AppComponent } from '../../src/app/app.component';
describe('AppComponent', () => {
it('shows the input', () => {
// Init Angular stuff
cy.log("start")
initEnv(AppComponent);
cy.log("1")
// You can also :
// initEnv({declarations: [AppComponent]});
// initEnv({imports: [MyModule]});
// component + any inputs object
mount(AppComponent, { title: 'World' });
// use any Cypress command afterwards
cy.contains('Welcome to World!');
});
});
Hi @KissBalazs,
Keep raw-loader, you need to install v1 : "raw-loader": "1.0.0"
I will improve ReadMe, thanks for your feedback !