Rollup-bundled Typescript + React library not installing in Craco-bundled Typescript + React app

261 views Asked by At

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.

0

There are 0 answers