I am creating a Design System project using React + Vite. This project will be a GIT submodule used in other projects.
When importing the submodule into the other project and using the created components, the application returns the following error:
ERROR in ./packages/MightZord-DS/src/components/Switch/index.tsx 9:0
Module parse failed: The keyword 'interface' is reserved (9:0)
File was processed with these loaders:
* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { FieldRow } from "../Field/styles";
|
> interface SwitchFieldProps {
| id: string;
| label: string;
MightZord-DS Project files:
File: src/components/Switch/index.tsx
import React from "react";
import { SwitchRoot, SwitchThumb, LabelSwitch } from "./styles";
import { FieldRow } from "../Field/styles";
interface SwitchFieldProps {
id: string;
label: string;
defaultValue?: boolean;
updateValueField?: (value: boolean) => void;
}
const Switch = ({ id, label, defaultValue, updateValueField }: SwitchFieldProps) => {
return (
<FieldRow style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<LabelSwitch htmlFor={id}>
{label}
</LabelSwitch>
<SwitchRoot
className="SwitchRoot"
id={id}
checked={defaultValue}
onCheckedChange={updateValueField}
>
<SwitchThumb className="SwitchThumb" />
</SwitchRoot>
</FieldRow>
)
}
export default Switch
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
package.json
{
"name": "@magazord/mightzord-ds",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-switch": "^1.0.2",
"polished": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.9"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/styled-components": "^5.1.26",
"@vitejs/plugin-react": "^3.1.0",
"typescript": "^4.9.3",
"vite": "^4.2.0"
}
}
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
These components are exported in the index.ts file located at the root of the project.
index.ts
import Switch from './src/components/Switch'
export { Switch };
In the other project, I use the submodule strategy and import the component that I exported from the MightZord-DS project.
I tried to do everything they said in the other questions, but without success.
Parsing error: The keyword 'interface' is reserved
Webpack doesn't bundle TypeScript
The keyword 'interface' is reserved when using lerna
Module parse failed: The keyword 'interface' is reserved (5:0) File was processed with these loaders
Module parse failed: The keyword 'interface' is reserved using turbo repo Next.js 13
