My implementing my own library and using that in my application through npm link. But getting error while using component.
Access to XMLHttpRequest at 'webpack-internal:///./node_modules/react-select/dist/index-75b02bac.browser.esm.js' from origin 'http://localhost:2000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
My webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.ts",
devtool: "eval-source-map",
module: {
rules: [
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
{
test: /\.(tsx|ts|mjs)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
plugins: [
["@babel/plugin-proposal-class-properties"],
["@babel/plugin-transform-runtime", { regenerator: true }],
],
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
},
// Currently react-styleguidist uses a dependency called acorn. Acorn has recently switched to offering a .mjs
// distributable, and react-styleguidist seems to be using it. However, they did not add support to their internal
// webpack config to account for this. Therefore, I have modified our webpack config to account for it. Hopefully,
// this is fixed in a later version and we can remove this loader and the .mjs extension from our resolve:extensions
// list below. Here is a link to the GitHub issue referring to what I'm describing: https://github.com/styleguidist/react-styleguidist/issues/1300
{
test: /\.mjs$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.(css|scss)$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" },
],
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
exclude: [/\.js$/, /\.ts$/, /\.html$/, /\.json$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},
},
],
},
],
},
resolve: {
extensions: [".mjs", ".js", ".ts", ".tsx", ".json"],
},
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "",
filename: "bundle.js",
libraryTarget: "commonjs",
},
};