我们正在尝试将React应用程序的一部分构建为一个库，供业务合作伙伴使用。最初的React应用程序是一个Create React App应用程序，我们试图在不弹出应用程序的情况下实现这一点。
我们已经为应用程序创建了一个新的入口点，并且正在使用Webpack构建一个捆绑的应用程序。我们目前遇到的问题是，当我们试图在组件中引用@value值时，它们是未定义的。
守则
边栏/styles.module.css
@value sidebarOptionsWidth: 64px;
@value sidebarExpandedWidth: 384px;
...
相关组件代码
import {
sidebarOptionsWidth,
sidebarExpandedWidth
} from "../sidebar/style.module.css";
...
const sidebarWidth = isSidebarExpanded
? sidebarExpandedWidth
: sidebarOptionsWidth;
Number(sidebarWidth.replace("px", "")); // <-- This errors due to value being undefined
...
webpack.config.js
const path = require("path");
const Dotenv = require("dotenv-webpack");
const TerserPlugin = require("terser-webpack-plugin");
const config = {
entry: path.join(__dirname, "src/index.js"),
output: {
filename: `bundle.min.js`,
library: "TheLibrary",
libraryTarget: "var",
path: path.join(__dirname, "build/static/js")
},
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"]
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
cacheDirectory: true,
plugins: ["@babel/plugin-proposal-class-properties"]
}
},
{
test: /.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["postcss-modules-values"]
]
}
}
}
]
},
{
test: /.(gif|jpg|png|svg)$/,
use: ["url-loader"]
},
{
test: /.mp4$/,
use: "file-loader?name=videos/[name].[ext]"
}
]
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()]
},
plugins: [
new Dotenv({
path: "./.env.dev",
systemvars: true
})
]
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
config.devtool = "eval-cheap-module-source-map";
}
return config;
};
错误
我们会收到webpack警告，如果忽略这些警告，还会收到运行时错误。
webpack构建警告
"export 'sidebarOptionsWidth' was not found in '../sidebar/style.module.css'
运行时错误
Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
问题
据我所知，postpass模块值应该对此有所帮助，但是，我不确定我们是否正确配置了它？或者它配置正确，而我们在这里还做错了什么？
我现在已经克服了这一点。更新style-loader选项以关闭esModule已解决该错误。
{
loader: "style-loader",
options: {
esModule: false,
},
},
这将关闭默认值并启用CommonJS模块语法，并且似乎可以正确导出值。