I'm new on reactjs.
I developed a project and I would like use my common project on my new project as a npm package.
Now,
I could install package from git repo but when I import css files in any component, its ok, it works but when I want import and use a component from my common project it doesn't transpiled from react-script I guess...
Do I have to use webpack ? (because I don't want use it) How can i fix my error without webpack? If webpack is must what can I provide for?
My New Project package.json:
{
"name": "react-sample",
"version": "0.1.0",
"private": true,
"dependencies": {
"node-sass": "^4.12.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1",
"acshb-react-common": "git+https://<my-username>:<my-token>@github.com/<my-username>/<my-repo>.git#master"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
My Common Project package.json:
{
"name": "<my-common-project-nam>",
"version": "1.0.0",
"private": false,
"author": "<my-name>",
"repository": {
"type": "git",
"url": "<common-project-repo-url>"
},
"dependencies": {
"animate.css": "^3.7.2",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"echarts": "^4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-bootstrap-table-next": "^3.1.8",
"react-bootstrap-table2-overlay": "^2.0.0",
"react-bootstrap-table2-paginator": "^2.0.8",
"react-bootstrap-table2-toolkit": "^2.0.1",
"react-cookie": "^4.0.1",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-number-format": "^4.2.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-toastify": "^5.3.2",
"react-toggle-button": "^2.2.0",
"react-tooltip": "^3.10.0",
"react-widgets": "^4.4.11",
"react-widgets-moment": "^4.0.27",
"redux": "^4.0.4",
"redux-form": "^8.2.6",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"publish:npmWin": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/ --out-dir dist --copy-files",
"publish:npmLnx": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/ --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "dist/index.js",
"module": "dist/index.js",
"babel": {
"presets": [
"react",
"env",
"stage-2"
]
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@storybook/addon-actions": "^5.1.11",
"@storybook/addon-knobs": "^5.1.11",
"@storybook/addon-links": "^5.1.11",
"@storybook/addons": "^5.1.11",
"@storybook/react": "^5.1.11",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"redux-devtools-extension": "^2.13.8"
}
}
Error message is:
./node_modules/acshb-react-common/src/components/button.js SyntaxError: C:\workspace\react-sample\node_modules\acshb-react-common\src\components\button.js: Unexpected token (12:6) if (props.loading) { return (
