I have upgraded my CRA project to use react-scripts 3.2.0
When I run npm run build I get the "Creating an optimized production build..." message, but then nothing happens, its just stuck forever.
Environment:
node: v12.13.1
npm: 6.12.1
Project details:
typescript, scss and scss modules
package.json
"dependencies": {
"#types/jest": "^24.0.11",
"#types/node": "^11.13.4",
"#types/react": "^16.8.13",
"#types/react-dom": "16.8.4",
"classnames": "^2.2.5",
"mobx": "^3.6.2",
"mobx-react": "^4.4.3",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-scripts": "^3.2.0",
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^2.6.1",
"#typescript-eslint/parser": "^2.6.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"husky": "^3.0.9",
"lint-staged": "^9.4.2",
"prettier": "^1.19.1",
"typescript": "^3.2.4"
},
tsconfig.json
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es2016", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "preserve",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": false,
"noImplicitAny": false,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["src"],
"types": ["react"]
}
This is most probably because of shortage of RAM. Build command requires much more RAM than you'd expect.
Related
i am creating a vue component
but i am getting the following error
Type annotations can only be used in TypeScript files.
if i remove the type clause i then get
Missing return type on function.
the component looks like:
<template>
<pre>Market:{{ market }}</pre>
</template>
<script>
import Market from "./Market";
export default {
name: Market,
components: {},
data() { //<--- issue is reported here
return {
market: new Market(),
};
},
};
</script>
i'm guessing i have a conflict in prettier and eslints config so that one is treating vue as TS compatableand the other isn't
i've tried various tweaks and changes but nothing so far has made any diference so can any one point me to the correct config to resolve this?
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
babel.config.js
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
};
settings,json
{
"editor.insertSpaces": false,
"editor.minimap.enabled": false,
"files.eol": "\n",
"workbench.sideBar.location": "right",
"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"launch": {
"configurations": [],
"compounds": []
},
"debug.javascript.usePreview": false,
"window.zoomLevel": 3,
"eslint.format.enable": true
}
packange.json
{
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"typescript": "~4.1.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended",
"#vue/prettier",
"#vue/prettier/#typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I already had the same issue, fix it with:
<script lang="ts">
...
</script>
let me know if it works for you
When I save the project into VSCode I'm getting wrong break like into html tags, how to solve it? The error is explaned into the code / images down.
That is the non formated html.
<div class="a" :class="3" :data-option="2" :id="1" :title="'a'">Abcatece</div>
After run format getting that wrong formated Html Tags.
<div class="a" :class="3" :data-option="2" :id="1" :title="'a'"
>
Abcatece
</div
>
The formated html need to be in that way.
<div class="a" :class="3" :data-option="2" :id="1" :title="'a'">
Some text here
</div>
That is my configurations package.json and .prettierrc.js
Package.json
"name": "project-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#coreui/coreui": "~3.0.0-beta.4",
"#coreui/icons": "^1.0.1",
"#coreui/icons-vue": "^1.3.1",
"#coreui/utils": "^1.2.2",
"#coreui/vue": "^3.0.0-beta.11",
"#fortawesome/fontawesome-free": "^5.13.0",
"#joeattardi/emoji-button": "^2.12.1",
"#microsoft/signalr": "3.1.3",
"#toast-ui/editor": "^2.0.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.9.0",
"highcharts": "^8.0.4",
"highcharts-vue": "^1.3.5",
"mic-recorder-to-mp3": "^2.2.1",
"uuid": "^7.0.2",
"vue": "^2.6.11",
"vue-i18n": "8.16.0",
"vue-notification": "1.3.20",
"vue-router": "^3.1.6",
"vue-select": "^3.9.5",
"vuex": "^3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.3",
"#vue/cli-plugin-eslint": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"babel-eslint": "^10.1.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"core-js": "^3.6.4",
"eslint": "^6.8.0",
"prettier": "^2.0.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"sass-loader": "^8.0.2",
"node-sass": "^4.13.1"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"#vue/prettier",
"plugin:prettier/recommended",
"plugin:vue/recommended"
],
"rules": {
"no-unused-vars": [
"warn"
],
"vue/component-tags-order": [
"off",
{
"order": [
"template",
"script",
"style"
]
}
],
"vue/singleline-html-element-content-newline": [
"off",
{
"ignoreWhenNoAttributes": true,
"ignoreWhenEmpty": true
}
],
"vue/html-indent": "off",
"vue/html-self-closing": [
"warn",
{
"html": {
"normal": "any",
"void": "any",
"component": "any"
}
}
],
"vue/attribute-hyphenation": [
"off",
{
"ignore": []
}
],
"max-len": [
"warn",
{
"code": 120,
"ignoreComments": true
}
],
"vue/max-attributes-per-line": [
"warn",
{
"singleline": 4,
"multiline": {
"max": 1,
"allowFirstLine": true
}
}
]
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
.prettierrc.js
module.exports = {
tabWidth: 2,
tabs: false,
semi: true,
singleQuote: false,
quoteProps: "as-needed",
trailingComma: "none",
bracketSpacing: true,
jsxBracketSameLine: true,
arrowParens: "always",
endOfLine: "lf",
htmlWhitespaceSensitivity: "strict"
};
I'm working vue project. I was build it via vue-cli(Vue CLI v3.0.0-rc.3). I want obfuscate javascript files and css class names. When I was build my project I got an error:
Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/lib/index.js): Syntax Error
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"target": "es5",
"module": "esnext",
"strict": true,
"strictNullChecks": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"sourceMap": false,
"baseUrl": "./",
"types": [
"node",
"jest"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": ["es2016", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
"src/**/*.vue",
"tests/**/*.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
vue.config.js
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
devServer: {
host: '0.0.0.0',
port: 80,
},
configureWebpack: {
plugins: [
new JavaScriptObfuscator ({
rotateUnicodeArray: true
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
};
package.json
{
"name": "tetris",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"animejs": "^2.2.0",
"axios": "^0.18.0",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.5.16",
"vue-property-decorator": "^6.1.0",
"vue-router": "^3.0.1",
"vue-status-indicator": "^1.1.0",
"vuetify": "^1.0.19",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#types/animejs": "^2.0.0",
"#types/jest": "^22.0.1",
"#vue/cli-plugin-babel": "^3.0.0-beta.6",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-plugin-typescript": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"#vue/eslint-config-airbnb": "^3.0.0-rc.3",
"#vue/eslint-config-prettier": "^3.0.0-beta.6",
"#vue/eslint-config-typescript": "^3.0.0-rc.3",
"babel-core": "^7.0.0-0",
"babel-preset-vue": "^2.0.1",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"ts-jest": "^22.0.1",
"vue-template-compiler": "^2.5.16",
"uglifyjs-webpack-plugin": "latest",
"webpack-obfuscator": "latest"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I have been happily running tests on a Protractor/Jasmine2 framework. Now, I've started a new project and used the same framework - however, when I tried to run the first spec, I received a 'Spec not found' message.
I have tried all sorts of things....explicit file locations, having spec.js in the root of the project, pushing to BitBucket, deleting the project off my machine and re-cloning. Running on VS Code and Atom makes no difference.
I've stripped the spec.js to something so simple in case it something there but I'm blowed if I can spot anything! Please see conf.js, spec.js and Package.json. Sorry for all of the // in conf.js - kept on stripping things out!!
Hoping for some eagle-eyed person...!! Thanks
PACKAGE.json
{
"name": "jl_autotests",
"version": "1.0.0",
"description": "Autotests",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git#bitbucket.org/davred61/jl_autotests.git"
},
"keywords": [
"Cucumber",
"gherkin",
"cuke",
"protractor",
"angular",
"selenium",
"endtoend",
"report",
"e2e",
"javascript"
],
"author": "D Redmayne",
"license": "ISC",
"homepage": "https://bitbucket.org/davred61/jl_autotests#readme",
"dependencies": {
"Express": "^3.0.1",
"angular": "^1.6.6",
"angularjs": "0.0.1",
"cucumber": "^3.1.0",
"glob": "^7.1.2",
"gulp": "^3.9.1",
"lodash": "^4.17.4",
"material-design-lite": "^1.3.0",
"moment": "^2.19.2",
"pretty": "^2.0.0",
"protractor": "^5.2.0",
"protractor-cucumber-framework": "^4.1.1",
"protractor-image-comparison": "^1.3.0"
},
"devDependencies": {
"chai": "^4.1.2",
"express": "^4.16.2",
"gulp-protractor": "^4.1.0",
"jasmine-reporters": "^2.2.1",
"jasmine-spec-reporter": "^4.2.1",
"protractor-jasmine2-html-reporter": "0.0.7",
"protractor-jasmine2-screenshot-reporter": "^0.5.0",
"restify": "^6.3.2"
}
}
Conf.js
//var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
exports.config = {
//seleniumAddress: 'http://localhost:444/wd/hub',
//directConnect: true,
capabilities: {
cssSelectorsEnabled: true,
'browserName': 'chrome'
},
specs:['spec.js'],
allScriptsTimeout: 60000,
getPageTimetout: 30000,
framework: 'jasmine2',
//onPrepare: function() {
//jasmine.getEnv().addReporter(
//new Jasmine2HtmlReporter({
//takeScreenshots: true,
//savePath: './Reports',
//fileName: 'HomeProfile'
//})
//)
//var SpecReporter = require ( 'jasmine-spec-reporter').SpecReporter;
//jasmine.getEnv().addReporter( new SpecReporter( {
//displayStacktrace: true,
//displayFailureSummary: true,
//displayPendingSummary: true,
//displaySuccessfulSpec: true,
//displayFailedSpec: true,
//displaySpecDuration: false,
//displaySuiteNumber: false,
//colors: {
//success: 'green',
//failure: 'red',
//pending: 'yellow'
// },
//customProcessors: []
//} ));
//}
};
spec.js
browser.get('https://mwac-johnlewis-dev.digitalbridge.eu/landing');
browser.sleep(10000);
I am using the Angular 4 CLI (v.1.0.0) and to handle testing I created some mocks that use jasmine to create a spy. In the IDE everything looks okay, however in the terminal I am getting and error that says "Cannot find name 'jasmine'".
At first I thought the issue was that jasmine wasn't added to the typings but I can see that package.json includes the import for the jasmine type def so I'm not sure what is missing.
mocks.ts
export class MockAuthService {
public login: Function = jasmine.createSpy('login');
}
export class MockHttpService {
public delete: Function = jasmine.createSpy('delete');
public get: Function = jasmine.createSpy('get');
public post: Function = jasmine.createSpy('post');
public put: Function = jasmine.createSpy('put');
}
running ng serve returns the following error messages in the terminal.
ERROR in C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts
(2,23): Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (6,24):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (7,21):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (8,22):
Cannot find name 'jasmine'.
C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (9,21):
Cannot find name 'jasmine'.
webpack: Failed to compile.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
package.json
{
"name": "prod",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.2",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/flex-layout": "^2.0.0-beta.8",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/material": "^2.0.0-beta.3",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.0",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
You are getting the error because TypeScript is trying to include the mock in the app build, and the app (rightly) doesn't know about Jasmine.
Exclude the mock from your app compilation by adding it to the exclude array in tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"**/*.mock.ts"
]
}
I am not sure if you should be creating jasmine spys that way, but regardless:
The issue is with your file name
notice: tsconfig.spec.json has: "include": ["**/*.spec.ts","**/*.d.ts"]
and your file name is mocks.ts.
either change the file name to mocks.spec.ts
or add "**/*.mock.ts" and rename to something like service.mock.ts
Hope this helps.