import in third party library breaks build

Question

I have published a package which has the following file structure:

.
├── index.css
├── index.tsx
├── node_modules
├── package.json
└── yarn.lock

The index.tsx file is importing the index.css file as follows:

import React from 'react'
import './index.css'

export const CustomComponent = ()=> {
   return <span>Hello World</span>
}

The command tc generate a build directory. Inside the package.json file, I have the following:

{
...
"main": "./build/index.js",
  "types": "./build/index.d.ts",
  "files": [
    "build/**/*",
  ],
...
}

Once my package is installed, you can se the same file structure as above in the project node_modules directory.

Now the project where the package has been installed is failing to build because it doesn't recognize the path ./index.css from the package index.tsx file.

Any idea how to solve this?

Answer 1

It doesn't work since the file index.css does not exist in the root of your package, but instead under build/index.css .

when you publish a package using npm publish , it maintains the folder structure. The main in package.json simply points to the default file in your package, it doesn't make /build the root folder of your package.

To solve this, either import from mypackage/build/index.css (which is less ideal), or call npm publish from inside your build folder instead of from the parent folder.

Answer 2

I solved this by using Rollup. Check out the rollup, typescript configs and package.json file below:

// tsconfig.json

{
   "compilerOptions": {
     "jsx": "react",
     "target": "es5",
     "module": "esnext",
     "sourceMap": true,
     "allowJs": false,
     "moduleResolution": "node",
     "declaration": true,
     "outDir": "build",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "downlevelIteration": true,
     "forceConsistentCasingInFileNames": true,
     "lib": ["es6", "dom", "es2016", "es2017"]
   },
   "include": ["src"],
   "exclude": ["node_modules", "build"]
 }

// rollup.config.js

import typescript from "rollup-plugin-typescript2";
import commonjs from "rollup-plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import postcss from 'rollup-plugin-postcss';
import json from '@rollup/plugin-json';
import nodeExternal from '@yelo/rollup-node-external';

import pkg from "./package.json";

export default {
   input: "src/index.ts",
   output: [
      {
         file: pkg.main,
         format: "cjs",
         exports: "named",
         sourcemap: true
      },
      {
         file: pkg.module,
         format: "es",
         exports: "named",
         sourcemap: true
      }
   ],
   plugins: [
      external(),
      resolve(),
      typescript({
         rollupCommonJSResolveHack: true,
         exclude: "**/__tests__/**",
         clean: true
      }),
      commonjs({
         include: ["node_modules/**"],
         exclude: ["./src/index.css"],
         namedExports: {
            "node_modules/react/react.js": [
               "Children",
               "Component",
               "PropTypes",
               "createElement"
            ],
            "node_modules/react-dom/index.js": ["render"]
         }
      }),
      json(),
      postcss({
         plugins: []
       })
   ],
   external: nodeExternal()
};

// package.json

{
...

"main": "build/index.js",
"types": "./build/index.d.ts",
"files": [
    "build/**/*"
],
"module": "build/index.es.js",
"jsnext:main": "build/index.es.js",
"scripts": {
   "build": "rollup -c",
}
...
}