alexeagleson / template-react-component-library

A component library for React
308 stars 128 forks source link

[!] Error: Could not resolve './Button.css' from src/components/Button/Button.tsx #11

Closed rv-dswanson closed 2 years ago

rv-dswanson commented 2 years ago

I am able to build the project fine locally, but when I attempt to build in a github action, I am getting an error. Any advice or input would be appreciated :)

src/index.ts → dist/cjs/index.js, dist/esm/index.js...
[!] Error: Could not resolve './Button.css' from src/components/Button/Button.tsx
Error: Could not resolve './Button.css' from src/components/Button/Button.tsx

package.json

{
  "name": "REDACTED",
  "version": "0.1.4",
  "description": "REDACTED",
  "scripts": {
    "build": "rollup -c",
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "author": "REDACTED",
  "license": "ISC",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@REDACTED"
  },
  "types": "dist/index.d.ts",
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@mdx-js/react": "^2.1.3",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^14.1.0",
    "@rollup/plugin-typescript": "^8.5.0",
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-interactions": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/builder-webpack5": "^6.5.12",
    "@storybook/manager-webpack5": "^6.5.12",
    "@storybook/react": "^6.5.12",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.0.2",
    "@types/react": "^18.0.19",
    "babel-jest": "^29.0.3",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^2.79.0",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-postcss": "^4.0.2",
    "sass": "^1.54.9",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.3"
  }
}

Rollup config:

import resolve from "@rollup/plugin-node-resolve"; // build modules
import commonjs from "@rollup/plugin-commonjs"; // convert commonjs modules to es6 modules
import typescript from "@rollup/plugin-typescript"; // process typescript
import dts from "rollup-plugin-dts"; // process type definitions
import postcss from "rollup-plugin-postcss"; // process styles

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/],
  },
];

tsconfig:

{
  "compilerOptions": {
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  }
}

Action:

# This workflow will run tests using node and then publish a package to GitHub Packages when the main branch is pushed to
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: REDACTED

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm ci
      - run: npm test

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm run build
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
rv-dswanson commented 2 years ago

I was able to resolve this by updating my components .css file into a .scss file, and updating the import for the file in the component.

I am still not sure why this problem only occurred in my action, but it is working as expected after this update.