CODEWITHSUNDEEP
reactjsnpmnext.js
Hazim Eid
Hazim Eid

Reputation: 835

Create Nextjs Common Library

I need to create nextjs components as common components to be used in all another projects.

1- I created a sample component "TextBox" in the path src/lib/component/TextBox.js :

import { useState } from "react";
function TextBox({value}){
    const [textValue, SetTextValue] = useState(value);

    return <>
        <input type="text" value={textValue} onChange={(event)=>{SetTextValue(event.target.value)}}/>
    </>
}
export default TextBox;

2- after that i published the project on the NPM. 3- I created new nextjs project and installed the sample component using the command "npm i sc-test-lib-1"

but I got this error:

./node_modules/sc-test-lib-1/src/lib/component/TextBox.js Module parse failed: Unexpected token (7:11) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders |     const [textValue, SetTextValue] = useState(value); | 
>     return <> |         <input type="text" value={textValue} onChange={(event)=>{SetTextValue(event.target.value)}}/> |     </>

Upvotes: 0

Views: 665

Answers (1)

Hazim Eid
Hazim Eid

Reputation: 835

thank you @NaveenNizam.

I added the following configuration in the file next.config.js now it's working fine.

transpilePackages: ['sc-test-lib-1'],
    webpack: (config) => {
        config.resolve.extensionAlias = {
            ".js": [".ts", ".tsx", ".js", ".jsx"],
            ".mjs": [".mts", ".mjs"],
            ".cjs": [".cts", ".cjs"],
        };
        return config;
    },

the final content of next.config.js file is:

/** @type {import('next').NextConfig} */
const nextConfig = {
    transpilePackages: ['sc-test-lib-1'],
    webpack: (config) => {
        config.resolve.extensionAlias = {
            ".js": [".ts", ".tsx", ".js", ".jsx"],
            ".mjs": [".mts", ".mjs"],
            ".cjs": [".cts", ".cjs"],
        };
        return config;
    },
}

module.exports = nextConfig

Upvotes: 0

Related Questions