I built the NPM package based on components written in React and Typescript.
Export that package as npm
Install package into another React with TS repo
Result: Error appear:
Failed to compile.
./node_modules/@nikolatrajkovic123/ec-general-section-form/HubSectionPack.tsx 10:5 Module parse failed: Unexpected token (10:5) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | import './package-styles.scss'; |
type HubSectionPackProps = { | sectionName: SectionName; | // eslint-disable-next-line
Babel
{
"presets": ["@babel/preset-env", "@babel/preset-react", "env", "react"],
"plugins": ["transform-class-properties"]
}
Webpack:
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/index.tsx',
},
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides',
),
},
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss'],
},
plugins: [new webpack.CleanPlugin()],
output: {
filename: '[name].[contenthash].js',
path: path.join(__dirname, 'dist'),
},
};
Package.json of the package:
{
"name": "@nikolatrajkovic123/hub-section-form",
"version": "1.3.8",
"description": "Enrollment / Hub section form",
"main": "./index.ts",
"module": "./dist/index.es.js",
"types": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/Bestowinc/enrollment-client.git"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"author": "Direct Team",
"license": "MIT",
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@bestowinc/bestow-logger": "1.0.26",
"@bestowinc/enroll-sdk-core": "^0.9.40",
"@bestowinc/kindred-ds": "^0.6.2",
"@hookform/resolvers": "^2.7.1",
"@sentry/minimal": "^6.14.1",
"@sentry/react": "^6.3.6",
"@sentry/tracing": "^6.3.6",
"@tailwindcss/postcss7-compat": "^2.0.2",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^12.1.2",
"@tippyjs/react": "^4.2.5",
"@types/react-slider": "^1.3.1",
"@types/uuid": "^8.3.1",
"@xstate/inspect": "^0.4.1",
"@xstate/react": "^1.3.1",
"auth0-js": "^9.16.4",
"autoprefixer": "^9",
"cleave.js": "^1.6.0",
"fast-glob": "^3.2.7",
"file-loader": "^6.2.0",
"ismobilejs": "^1.1.1",
"jest": "^26.6.3",
"jwt-decode": "^3.1.2",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"lodash.noop": "^3.0.1",
"lodash.unset": "^4.5.2",
"path": "^0.12.7",
"postcss": "^8.3.11",
"postcss-loader": "^4.2.0",
"postcss-scss": "^3.0.4",
"react-hook-form": "^7.15.3",
"react-router-dom": "^5.2.0",
"react-slider": "^1.3.1",
"sass": "^1.32.7",
"styled-components": "^5.3.2",
"styled-system": "^5.1.5",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"tippy.js": "^6.3.1",
"tsconfig": "^7.0.0",
"typescript": "^4.4.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"xstate": "^4.17.0",
"yup": "^0.32.9"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.16.4",
"@babel/preset-flow": "^7.16.0",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.16.0",
"@bestowinc/xray-test-util": "^1.1.4",
"@craco/craco": "^6.1.2",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.1.1",
"@rollup/plugin-replace": "^3.0.0",
"@rollup/plugin-url": "^6.1.0",
"@tailwindcss/postcss7-compat": "^2.0.2",
"@types/auth0-js": "^9.14.2",
"@types/chance": "^1.1.1",
"@types/cleave.js": "^1.4.4",
"@types/history": "4.7.9",
"@types/jest": "^26.0.19",
"@types/lodash.get": "^4.4.6",
"@types/lodash.merge": "^4.6.6",
"@types/lodash.noop": "^3.0.6",
"@types/lodash.pick": "^4.4.6",
"@types/node": "^12.19.9",
"@types/react": "^16.14.2",
"@types/react-dom": "^17.0.7",
"@types/react-router-dom": "^5.1.7",
"@types/react-slider": "^1.3.1",
"@types/segment-analytics": "^0.0.34",
"@types/styled-components": "^5.1.15",
"@types/styled-system": "^5.1.13",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^4.15.0",
"@typescript-eslint/parser": "^4.15.0",
"babel-loader": "8.1.0",
"babel-plugin-styled-components": "^1.13.3",
"chance": "^1.1.7",
"circle-github-bot": "^2.1.0",
"css-loader": "^5.0.2",
"cypress": "9.0.0",
"cypress-terminal-report": "^3.3.4",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"firebase-tools": "^9.10.2",
"husky": "^6.0.0",
"jsonwebtoken": "^8.5.1",
"luxon": "^1.26.0",
"mini-css-extract-plugin": "^1.3.6",
"neat-csv": "^6.0.1",
"pdf-parse": "^1.1.1",
"prettier": "2.2.1",
"progress-bar-webpack-plugin": "^2.1.0",
"react-scripts": "4.0.1",
"rollup": "^2.38.4",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^3.0.1",
"rollup-plugin-url-resolve": "^0.2.0",
"sass-loader": "10.1.1",
"sinon": "^9.2.4",
"source-map-explorer": "^2.5.2",
"style-loader": "^2.0.0",
"typescript": "4.2.2"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"resolutions": {
"tslib": "2.3.1"
},
"external": [
"react",
"react-dom"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "rollup -c --watch",
"build": "rollup -c"
},
"bugs": {
"url": "https://github.com/issues"
},
"homepage": "https://github.com/readme"
}