3

I'm learning to create an NPM Libraries and publish to NPM. I followed this tutorial.

Here's a Codesandbox that works OK but can't test the npm link there.

It's working - I can use my published to NPM, npm package simply doing like so:

import returnLibrary from "react-library-test";

But when I do npm link to debug my local copy of the react-library-test then it refuse to compile I think it's some form of strict mode on because I get this:

enter image description ere

It's hard to see were the mistake is because the "Line 11:261: Expected an assignment.....". When I go into the index.cjs.js it looks like this at Line 11:261:

enter image description ere

Also why is the error messages regarding the dev folder files hmmm... I have linked the library look here;

enter image description here

I search for an answer and there are many similar answers about this but nothing works for me.

The library is simple just this:

index.js

import AwesomeButton from  './button.jsx'

const returnLibrary = () => {
    return {
        AwesomeButton: AwesomeButton
        // you can add ere oter components tat you want to export
    }
}
export default returnLibrary();

button.jsx

import React, { useState, useEffect } from "react";
import "./button.css";

const AwesomeButton = (props) => {
  const [color, setColor] = useState(null);
  useEffect(() => {
    if (props.variant) {
      if (props.variant === "primary") {
        setColor("#0077ff");
      } else if (props.variant === "secondary") {
        setColor("#ff0062");
      } else if (props.variant === "success") {
        setColor("#0f8000");
      } else {
        setColor("#949393");
      }
    }
  }, [props.variant]);
  const { children } = props;

  return (
    <button
      className="buttonComponent"
      style={{
        backgroundColor: color,
      }}
    >
      {children.toUpperCase()}
    </button>
  );
};

export default AwesomeButton;

And I use it like this after I have done "npm link react-library-test" (it's strange because it works when not linking):

import logo from "./logo.svg";
import "./App.css";
// import returnLibrary from "./react-library/src/index";
import returnLibrary from "react-library-test";

function App() {
  const { AwesomeButton } = returnLibrary;
  return (
    <div className="App">
      <AwesomeButton variant="secondary">sdsadda</AwesomeButton>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React 
        </a>
      </header>
    </div>
  );
}

export default App;

package.json

{
    "name": "react-library-test",
    "version": "2.0.0",
    "description": "your description",
    "main": "dist/index.cjs.js",
    "scripts": {
        "build": "rollup -c"
    },
    "peerDependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5"
    },
    "keywords": [
        "react",
        "keywords"
    ],
    "author": "Hans Erik Hellberg",
    "license": "MIT",
    "devDependencies": {
        "@babel/cli": "^7.12.10",
        "@babel/core": "^7.12.10",
        "@babel/plugin-transform-runtime": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "@babel/preset-react": "^7.12.10",
        "@rollup/plugin-babel": "^5.2.2",
        "rollup-plugin-sourcemaps": "^0.6.3",
        "rollup-plugin-styles": "^3.12.2",
        "rollup-plugin-visualizer": "^5.5.2"
    }
}

rollup config

import styles from "rollup-plugin-styles";
import { terser } from "rollup-plugin-terser";
import babel from "@rollup/plugin-babel";
const autoprefixer = require("autoprefixer");

// the entry point for the library
const input = "src/index.js";

//
var MODE = [
  {
    fomart: "cjs",
  },
  {
    fomart: "esm",
  },
  {
    fomart: "umd",
  },
];

var config = [];

MODE.map((m) => {
  var conf = {
    input: input,
    output: {
      // then name of your package
      name: "react-awesome-buttons",
      file: `dist/index.${m.fomart}.js`,
      format: m.fomart,
      exports: "auto",
    },
    // this externelizes react to prevent rollup from compiling it
    external: ["react", 'react-dom', /@babel\/runtime/],
    plugins: [
      // these are babel comfigurations
      babel({
        exclude: "node_modules/**",
        plugins: ["@babel/transform-runtime"],
        babelHelpers: "runtime",
      }),
      // this adds sourcemaps
      // sourcemaps(),
      // this adds support for styles
      styles({
        postcss: {
          plugins: [autoprefixer()],
        },
      }),
    ],
  };
  config.push(conf);
});

export default [...config];

Testing to check if npm link is in affect:

enter image description here

1 Answer 1

0

I fixed it by reading the docs.

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

The first error:

enter image description here

Was that in the package.json I did not change "main" to the src folder. Just doing that and npm link to peer app node_folders React fixed this problem.

(Just don't forget after "npm run build" of the lib to change back the package.json "main" to src folder.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.