I've got a NextJS site running TypeScript and a component of it in a separate repo installed using npm, but when I try and use the component in the site it shows the following message:
error - ./node_modules/promotion-spot/dist/PromotionSpot/Conditional/index.jsx
Module parse failed: Unexpected token (11:8)
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
The component works fine when it isn't in a separate npm dependency but, when it is, NextJS won't load it properly. The component is compiled into JavaScript with .d.ts files and I saw that react-chrono does something similar and that works in the site fine.
The component's source code is at https://github.com/Relucent-Software/promotion-spot.
Here's the package.json file for the NextJS site too:
{
"name": "thederbyinn.co.uk",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "npm-run-all test:*",
"test:eslint": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx src/**/*"
},
"dependencies": {
"@types/react-gtm-module": "^2.0.1",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"formik": "^2.2.9",
"libphonenumber-js": "^1.9.53",
"lodash.get": "^4.4.2",
"luxon": "^2.4.0",
"next": "^12.1.6",
"next-seo": "^4.29.0",
"promotion-spot": "github:Relucent-Software/promotion-spot",
"query-string": "^7.1.1",
"react": "17.0.2",
"react-chrono": "^1.15.0",
"react-dom": "17.0.2",
"react-gtm-module": "^2.0.11",
"react-icons": "^4.3.1",
"react-masonry-css": "^1.0.16",
"sass": "^1.51.0",
"schema-dts": "^1.1.0",
"swiper": "^7.4.1",
"tailwindcss": "^2.2.19",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@babel/core": "^7.17.10",
"@types/lodash.get": "^4.4.7",
"@types/lodash.has": "^4.5.7",
"@types/luxon": "^2.3.2",
"@types/node": "16.11.7",
"@types/react": "17.0.35",
"@types/react-datepicker": "^4.4.1",
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.23.0",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"eslint": "^8.15.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-n": "^15.2.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.13",
"typescript": "4.4.4"
}
}