I have an issue with an NPM Build Error in ReactJS. I checked the index.html file in the build folder and this is what it has. I have uploaded my build folder to AWS S3 for a static site but I have this issue. Is my index.html file supposed to have this code or am I supposed to have something else?
Html Webpack Plugin:
Error: Parse Error: <src="components/app.js" />
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.83185361.js">
</script>
</body>
</html>
- htmlparser.js:235 new HTMLParser
[reactProject]/[html-minifier]/src/htmlparser.js:235:13
- htmlminifier.js:944 minify
[reactProject]/[html-minifier]/src/htmlminifier.js:944:3
- htmlminifier.js:1297 exports.minify
[reactProject]/[html-minifier]/src/htmlminifier.js:1297:10
- index.js:296
[reactProject]/[html-webpack-plugin]/index.js:296:16
- util.js:16 tryCatcher
[reactProject]/[bluebird]/js/release/util.js:16:23
- promise.js:512 Promise._settlePromiseFromHandler
[reactProject]/[bluebird]/js/release/promise.js:512:31
- promise.js:569 Promise._settlePromise
[reactProject]/[bluebird]/js/release/promise.js:569:18
- promise.js:614 Promise._settlePromise0
[reactProject]/[bluebird]/js/release/promise.js:614:10
- promise.js:693 Promise._settlePromises
[reactProject]/[bluebird]/js/release/promise.js:693:18
- async.js:133 Async._drainQueue
[reactProject]/[bluebird]/js/release/async.js:133:16
- async.js:143 Async._drainQueues
[reactProject]/[bluebird]/js/release/async.js:143:10
- async.js:17 Immediate.Async.drainQueues
[reactProject]/[bluebird]/js/release/async.js:17:14
</pre>
Package.json file
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/facebook": {
"target": "http://localhost:5000"
},
"/api/*": {
"target": "http://localhost:5000"
} }, "dependencies": {
"axios": "^0.18.0",
"express": "^4.16.3",
"imgix.js": "^3.3.2",
"informed": "^1.7.4",
"init": "^0.1.2",
"lodash": "^4.17.10",
"namor": "^1.0.1",
"nodejs": "0.0.0",
"react": "^16.2.0",
"react-ga": "^2.5.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.17",
"react-table": "^6.8.0",
"react-validation": "^3.0.7",
"redux": "^4.0.0",
"redux-form": "^7.4.2",
"redux-thunk": "^2.3.0",
"semantic-ui": "^2.2.13",
"slick-carousel": "^1.8.1" }, "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": " react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"webpack": "webpack --mode production" }, "devDependencies": {
"prettier": "1.13.4",
"webpack-cli": "^3.1.0" }
Related
I'm using karma with jasmine and followed online guide by installing using
npm install --save-dev karma
and other necessities.
This is my karma config file.
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-junit-reporter'),
"karma-chrome-launcher",
"karma-jasmine-html-reporter",
],
files: [
{ pattern: 'src/app/app.component.spec.ts', included: false,type :'js' },
// 'src/**/*.spec.ts',
// 'src/**/*.js'
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// list of files / patterns to exclude
exclude: [
],
junitReporter: {
outputDir: '.',
outputFile: 'unit-test-result.xml',
useBrowserName: false
},
reporters: ['progress', 'kjhtml', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
Some unit test cases are written in src/app/app.component.spec.ts file.
Junit Reporter is not writing the test cases in "unit-test-result.xml" file.
When I run "ng test" command the output comes as below
https://stackoverflowteams.com/c/neha/images/s/71deb22e-bb5f-44a2-84f2-5b4247db87c3.png
Now when I run "Karma Start" command , output comes as below
https://stackoverflowteams.com/c/neha/images/s/019ecb01-71ee-4c67-bbbf-02a2f1a1d581.png
No error shown in debug log, it shows statement as below
Chrome 109.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
and my "unit-test-result.xml" file generated with no test cases in it.
https://stackoverflowteams.com/c/neha/images/s/fe7a2dc7-7cd7-44c6-b7f3-c0eedf066e7c.png
Expected Output : I want my unit-test-result.xml to show 4 unit test cases.
my package.json is as below
{
"name": "angulat-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test --watch=false"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^15.1.2",
"#angular/animations": "^15.1.0",
"#angular/common": "^15.1.0",
"#angular/compiler": "^15.1.0",
"#angular/core": "^15.1.0",
"#angular/forms": "^15.1.0",
"#angular/platform-browser": "^15.1.0",
"#angular/platform-browser-dynamic": "^15.1.0",
"#angular/router": "^15.1.0",
"karma-junit-reporter": "^2.0.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"#angular/cli": "~15.1.2",
"#angular/compiler-cli": "^15.1.0",
"#types/jasmine": "~4.3.0",
"#types/node": "^18.11.18",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"karma-typescript-preprocessor": "^0.4.0",
"typescript": "~4.9.4"
}
}
My tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"include": [
"src/app/app.component.spec.ts"
]
}
I am new to angular, any help would be highly appreciated.
Let me know if any more information is required.
hi i will try to learn gulp but at start i have an error in my simple hello world. can anybody help me?
my gulp version is:
CLI version 3.9.0
Local version 4.0.2
my .babelrc file :
{
"presets": [ "#babel/preset-env" ]
}
my gulpfile.babel.js file :
export const hello = (done) => {
console.log('hello');
done();
}
my package.json file :
"name": "meatheme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"start": "gulp",
"build": "gulp build --prod",
"bundle": "gulp bundle --prod"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/register": "^7.12.1",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.13",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-wp-pot": "^2.5.0",
"gulp-zip": "^5.0.2",
"sass": "^1.43.4",
"vinyl-named": "^1.1.0",
"webpack-stream": "^5.2.1",
"yargs": "^15.4.1"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"jquery": "^3.5.1",
"normalize.css": "^8.0.1",
"slick-carousel": "^1.8.1"
}
}
and when i run gulp hello is see this in terminal.
[16:47:07] Failed to load external module babel-core/register
[16:47:07] Failed to load external module babel/register
/home/mehdi/Work/Meacodes/Mea template/mea0.1/gulpfile.babel.js:16
import gulp from 'gulp';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.execute (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
at module. Exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)
do you know where is my issue?
I was advised to write "type": "module" to file package.json to the very end of the file
since node otherwise does not consider js files as ES modules, outside of which you still cannot use the import statement)
(in the browser we do modules through the type attribute of the script tag)
I am learning MERN application development. I got a incomplete MERN application and trying to run the application. My package.json file is like below.
package.json
{
"name": "machine-shop",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "node ace build --production",
"start": "node server.js",
"dev": "node ace serve --watch",
"lint": "eslint . --ext=.ts",
"format": "prettier --write ."
},
"devDependencies": {
"#adonisjs/assembler": "^5.0.0",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"#symfony/webpack-encore": "^1.4.0",
"#types/node": "^16.3.3",
"adonis-preset-ts": "^2.1.0",
"autoprefixer": "^10.2.6",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-adonis": "^1.3.1",
"eslint-plugin-prettier": "^3.4.0",
"node-pre-gyp": "^0.17.0",
"pino-pretty": "^5.0.1",
"postcss": "^8.3.0",
"postcss-loader": "^5.3.0",
"prettier": "^2.3.0",
"sass": "^1.34.0",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.1.2",
"typescript": "~4.2",
"youch": "^2.2.2",
"youch-terminal": "^1.1.1"
},
"dependencies": {
"-": "^0.0.1",
"#adonisjs/auth": "^8.0.4",
"#adonisjs/core": "^5.1.0",
"#adonisjs/lucid": "^14.1.0",
"#adonisjs/repl": "^3.0.0",
"#adonisjs/session": "^6.0.0",
"#adonisjs/shield": "^7.0.0",
"#adonisjs/view": "^6.0.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^28.0.0",
"#ckeditor/ckeditor5-react": "^3.0.2",
"#date-io/date-fns": "2.6.1",
"#formatjs/intl-pluralrules": "1.3.5",
"#fortawesome/fontawesome-free": "5.13.0",
"#manaflair/redux-batch": "1.0.0",
"#material-ui/core": "4.9.14",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.53",
"#material-ui/pickers": "3.2.10",
"#material-ui/styles": "4.9.14",
"#reduxjs/toolkit": "^1.6.1",
"#tanem/svg-injector": "8.0.50",
"apexcharts": "^3.27.2",
"axios": "^0.21.1",
"axios-mock-adapter": "1.18.1",
"bootstrap": "4.6.0",
"camelcase": "^5.2.0",
"clipboard-copy": "3.1.0",
"clsx": "1.1.0",
"cp-cli": "2.0.0",
"css-mediaquery": "^0.1.2",
"date-fns": "2.8.1",
"dotenv": "^10.0.0",
"dotenv-expand": "5.1.0",
"downshift": "3.4.2",
"fg-loadcss": "^3.1.0",
"force": "^0.0.3",
"formik": "2.1.4",
"holderjs": "^2.9.9",
"json2mq": "^0.2.0",
"luxon": "^1.27.0",
"material-ui-popup-state": "^1.8.3",
"mysql": "^2.18.1",
"object-path": "^0.11.5",
"phc-argon2": "^1.1.1",
"phc-bcrypt": "^1.0.7",
"prop-types": "^15.7.2",
"proxy-addr": "^2.0.7",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.4",
"react-bootstrap": "1.0.1",
"react-bootstrap-table-next": "4.0.2",
"react-bootstrap-table2-paginator": "2.1.2",
"react-datepicker": "2.16.0",
"react-dev-utils": "^9.1.0",
"react-dom": "^17.0.2",
"react-draggable": "4.4.2",
"react-dropzone": "^11.3.4",
"react-inlinesvg": "1.2.0",
"react-intl": "3.6.2",
"react-is": "16.13.1",
"react-perfect-scrollbar": "1.5.8",
"react-portal": "4.2.0",
"react-redux": "7.1.3",
"react-router-dom": "^5.2.0",
"react-select": "3.1.0",
"react-slick": "^0.28.1",
"react-swipeable-views": "0.13.9",
"react-syntax-highlighter": "12.2.1",
"react-tinder-card": "^1.4.0",
"react-window": "1.8.5",
"redux": "4.0.5",
"redux-persist": "6.0.0",
"redux-saga": "1.1.3",
"reflect-metadata": "^0.1.13",
"socicon": "3.0.5",
"source-map-support": "^0.5.19",
"sweetalert2": "^11.0.11",
"yup": "^0.32.9"
}
}
My server.js file is like below
server.js
import 'reflect-metadata';
import sourceMapSupport from 'source-map-support';
import { Ignitor } from '#adonisjs/core/build/standalone';
sourceMapSupport.install({ handleUncaughtExceptions: false })
new Ignitor(__dirname).httpServer().start()
I am trying to run the application using npm start command. But I am getting below error.
file:///home/foysal/Music/machineshop/server.js:20
new Ignitor(__dirname).httpServer().start()
^
ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/foysal/Music/machineshop/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///home/foysal/Music/machineshop/server.js:20:13
What is the meaning of this code new Ignitor(__dirname).httpServer().start() ? Is it correct code ?
Previously I worked in another MERN application. server.js file of that project is not similar like server.js file of this project.
Am I doing anything wrong ?
Could any one help me to run the application ?
You have mixed up client and server. Usually you keep them separated when you work on stacks like that - in separate repositories or at least in separate directories. You have 2 ways as I see:
Separate client and server dependencies
Use Adonis to serve the React app
I would take the first path for better maintainability. If that seems too complicated, you can take the later one for now and keep working on separation down the road. For that you may wanna look into this document.
I have an application with SailsJs over NodeJs on Heroku and I can't run babeljs on. It runs ok on my localhost, but I always get the error:
Error: Couldn't find preset "env" relative to directory "/app"
The Heroku persists in look for itens at /app folder. This project does not have one /app folder
My app folders structure is:
app_name
- api
- assets
- config
- tasks
- views
I follow the documentation of http://babeljs.io to my .babelrc
.babelrc
now:
{
"presets": ["react", "env", "stage-1"],
"plugins": ["transform-class-properties"]
}
Already tried:
{
"presets": ["react", "es2015", "stage-1"],
"plugins": ["transform-class-properties"]
}
When I set the .babelrc to use es2015 I get the error:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
I already installed the dependencies
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel --save-dev
My package.json
{
"name": "redux-cardeck",
"private": true,
"version": "0.0.1",
"engines": {
"node": "6.11.4"
},
"description": "a Sails-Redux application for multi-player online card game",
"keywords": [
"sailsjs",
"redux",
"es2015",
"webpack"
],
"dependencies": {
"axios": "^0.13.1",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-polyfill": "^6.7.2",
"babel-preset-stage-1": "^6.13.0",
"connect-mongo": "0.8.2",
"css-loader": "^0.23.1",
"ejs": "2.3.4",
"file-loader": "^0.8.5",
"grunt": "0.4.5",
"grunt-babel": "^6.0.0",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-coffee": "0.13.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.5.0",
"grunt-contrib-cssmin": "0.9.0",
"grunt-contrib-jst": "0.6.0",
"grunt-contrib-less": "1.1.0",
"grunt-contrib-uglify": "0.7.0",
"grunt-contrib-watch": "0.5.3",
"grunt-sails-linker": "~0.10.1",
"grunt-sync": "0.2.4",
"include-all": "~0.1.6",
"node-sass": "^3.8.0",
"postcss-modules-extract-imports": "^1.0.0",
"postcss-modules-scope": "^1.0.0",
"rc": "1.0.1",
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-redux": "^4.4.8",
"react-router": "^2.6.1",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.7.2",
"redux-form": "^5.3.2",
"redux-optimist": "0.0.2",
"redux-optimistic-ui": "^0.3.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"redux-undo": "^0.6.1",
"sails": "~0.12.1",
"sails-disk": "~0.10.9",
"sails-hook-babel": "^6.0.1",
"sails-mongo": "^0.12.2",
"sails-postgresql": "^0.11.4",
"sails-service-mailer": "^3.2.1",
"sails-webpack": "^1.0.13",
"sass": "^0.5.0",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"unexpected-react": "^1.0.0",
"updeep": "^0.16.1",
"url-loader": "^0.5.7"
},
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/vanphuong12a2/redux-cardeck.git"
},
"author": "phuong",
"license": "",
"devDependencies": {
"axios-mock-adapter": "^1.6.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.7.2",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-modules-require-hook": "^4.0.0",
"jsdom": "^8.1.0",
"react-tools": "^0.13.3",
"redux-devtools": "^3.4.0",
"redux-logger": "^2.6.1",
"source-map": "^0.5.3",
"unexpected": "^10.10.8",
"webpack-dev-server": "^1.14.1"
}
}
Someone already used BabelJs on Heroku before? I can't understand why it cant find babeljs at the package.json. I set the local of babel on heroku as
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
I think it could be a problem with the relative structure of heroku or the fact I do not have a folder with name app
Thanks if someone can help me with this.
By default Heroku doesn't install the dependencies listed on "devDependencies" in your package.json.
You can either move your presets to "dependencies" or follow the steps here to alter this behavior.
{
"name": "react-redux-starter-kit",
"version": "1.0.0",
"description": "This would be the starter kit for react projects.",
"main": "index.html",
"scripts": {
"start": "rm -rf build/ && rm -rf dist/ && webpack && webpack-dev-server --progress --colors",
"build": "rm -rf build/ && rm -rf dist/ && NODE_ENV=production webpack --config ./webpack.production.config.babel.js --progress"
},
"repository": {
"type": "git",
"url": "git+https://rahulshettyprdxn#bitbucket.org/rahulshettyprdxn/react-devops.git"
},
"keywords": [
"react",
"webpack",
"react-native"
],
"author": "Rahul Shetty",
"license": "MIT",
"homepage": "https://bitbucket.org/rahulshettyprdxn/react-devops#readme",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015-without-strict": "0.0.2",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"eslint": "^2.2.0",
"eslint-plugin-react": "^4.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.9.0",
"image-webpack-loader": "^1.6.3",
"node-sass": "^3.4.2",
"react-css-modules": "^3.7.5",
"react-transform-hmr": "^1.0.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"bootstrap": "^3.3.6",
"react": "^0.14.7",
"react-bootstrap": "^0.28.3",
"react-dom": "^0.14.7"
}
}
Below is the error that I am receiving:
Parsing error: Unexpected token at line 2 col 8 in Atom editor.
Note that I'm currently getting this error on Windows 10.
ESLint Version:
"eslint": "^2.2.0",
"eslint-plugin-react": "^4.1.0"
I have installed linter-eslint in my Atom editor and Global npm ESLint setting is off.
I am quite confused as the error message is not that descriptive. This in no way is hampering my project but I am quite inquisitive as to why I am getting this error in my editor.
ESLint is for validating JavaScript, not JSON.
From the website:
ESLint
The pluggable linting utility for JavaScript and JSX
[emphasis mine]
(You can try your code on the online demo here, and you get the same error)
If you want to use ESLint on a JSON file, you could use a package like eslint-plugin-json.