Blank page with npm start #9152
Unanswered
sunilsharma2214
asked this question in
Q&A
Replies: 1 comment
-
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi All, I am working on a datepicker component package using npm publish, somehow it working as expected and I am able to use this package in other applications too. but, when I am doing npm start on datepicker CRA application, I am getting a blank page without any console error.
package.json
{
"name": "Datepicker",
"version": "0.3.2",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"dependencies": {
"classnames": "2.2.5",
"react-scripts": "3.4.0",
"axios": "^0.18.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"typescript": "^3.7.5"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src//*.{js,jsx,tsx,}": [
"npm run lint:ts",
"git add"
]
},
"scripts": {
"start": "react-scripts start",
"build": "npm run build:lib",
"build:lib": "babel-node scripts/build.js",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint:ts": "eslint src//.{js,ts,jsx} --fix",
"lint:css": "stylelint src/**/.css --fix"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.30",
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"@types/classnames": "2.2.3",
"stylelint": "13.3.0",
"stylelint-config-css-modules": "^2.2.0",
"stylelint-config-standard": "^20.0.0",
"tslint": "^6.1.1",
"prettier": "^2.0.2",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"husky": "^4.2.3",
"lint-staged": "^9.2.5",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"babel-cli": "6.26.0",
"babel-preset-env": "^1.7.0",
"bluebird": "3.5.1",
"fs-extra": "^7.0.0",
"glob": "^7.1.2",
"typescript": "^3.7.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"core-js": "^3.6.4",
"@types/core-js": "^2.5.3"
},
"author": "ABC",
"license": "UNLICENSED",
"repository": {
"type": "git",
"url": ""
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src/",
"experimentalDecorators": true,
"module": "esnext",
"target": "es5",
"lib": [
"es2017",
"dom"
],
"strictPropertyInitialization": false,
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": false,
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"downlevelIteration": true
},
"exclude": [
"node_modules",
"dist",
"scripts",
"webpack",
"jest",
"src/setupTests.ts",
"src/index.tsx",
],
"include": [
"src"
]
}
tsconfig-build.json - used by build.js(npm build)
{
"compilerOptions": {
"baseUrl": ".",
"target": "es5",
"lib": [
"es2017",
"dom"
],
"declaration": true,
"sourceMap": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
},
"exclude": [
"node_modules",
"dist",
"scripts",
"webpack",
"jest",
"src/setupTests.ts",
"src/index.tsx",
]
}
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import Datepicker from './Datepicker'
ReactDOM.render(, rootHTMLElement);
Beta Was this translation helpful? Give feedback.
All reactions