I'm running into an issue where I can't compile my Typescript + React app because of a Typescript + React component library I maintain causes errors.
Failed to compile.
./node_modules/@ll/components/dist/ll.modern.mjs 90:5
Module parse failed: Unexpected token (90:5)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| var validator = _ref.validator;
| return validator(classRest);
> })?.classGroupId;
| }
| var arbitraryPropertyRegex = /^\[(.+)\]$/;
The code it's referencing there seems to come from a dependency of my component library (tailwind-merge). I think I must be doing something wrong with the rollup config that I use to bundle the library. This is my first time switching to Rollup so I don't have a previous config to rollback to. I don't see this error when bundling with other bundlers, but I wish to switch to Rollup because it's more supported and more actively maintained.
My library's Rollup config:
import { defineConfig } from 'rollup';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';
export default defineConfig({
input: 'src/index.tsx',
output: {
name: '@ll/components',
file: 'dist/ll.modern.mjs',
format: "es",
preserveModulesRoot: 'src',
sourcemap: true
},
plugins: [
replace({
preventAssignment: true,
values: {
"process.env.NODE_ENV": JSON.stringify("production")
}
}),
typescript({
tsconfig: './tsconfig.json'
}),
babel({
"babelHelpers": "bundled",
"presets": [
["@babel/env", { "modules": false }],
"@babel/preset-react"
]
}),
resolve({
extensions: [".js", ".jsx"],
moduleDirectories: ['node_modules']
}),
commonjs({
include: /node_modules/,
esmExternals: true,
requireReturnsDefault: 'auto',
}),
json()
],
external: [
'react',
'react-dom',
'react-intl'
],
});
My library's tsconfig.json:
{
"compilerOptions": {
"outDir": "dist",
"declaration": true,
"declarationDir": "./dist",
"module": "esnext",
"rootDir": ".",
"target": "esnext",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"jsx": "react",
"sourceMap": true,
"esModuleInterop": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true
},
"include": ["src", "src/lang", "src/typings.d.ts"],
"exclude": ["node_modules", "dist", "src/stories", ".storybook"]
}
My app's craco.config.js file
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = function () {
const isProductionBuild = process.env.NODE_ENV === "production";
const analyzerMode = process.env.REACT_APP_INTERACTIVE_ANALYZE
? "server"
: "json";
const plugins = [];
if (isProductionBuild) {
plugins.push(new BundleAnalyzerPlugin({ analyzerMode }));
}
return {
webpack: {
plugins
},
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
],
},
},
};
};
My app's tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./"
},
"include": [
"src",
"craco.config.js"
],
"exclude": [
"src/stories",
]
}
At the moment, I'm not sure what I should try to fix this issue.