首先，我知道这个问题在网上被问了无数次，所以我提前为发布看似重复的内容道歉。我已经尝试了我能找到的一切，尽管似乎没有任何帮助。
问题： 我在使用 Typescript 导入使用 Rollup.js for React 创建的包时遇到问题。以下是从我的包中导入和使用任何组件时的完整错误：
Compiled with problems:
×
ERROR in ./node_modules/clone-stats/index.js 1:11-30
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\clone-stats'
ERROR in ./node_modules/css/lib/stringify/source-map-support.js 9:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\css\lib\stringify'
ERROR in ./node_modules/glob-stream/node_modules/glob/glob.js 42:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\glob-stream\node_modules\glob'
ERROR in ./node_modules/glob-stream/node_modules/glob/sync.js 3:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\glob-stream\node_modules\glob'
ERROR in ./node_modules/graceful-fs/graceful-fs.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\graceful-fs'
ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js 5:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\import-fresh\node_modules\resolve-from'
ERROR in ./node_modules/mkdirp/index.js 2:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\mkdirp'
ERROR in ./node_modules/path-type/index.js 6:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\path-type'
ERROR in ./node_modules/resolve/lib/async.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js 2:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\resolve\lib'
ERROR in ./node_modules/twin.macro/macro.js 9:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\twin.macro'
ERROR in ./node_modules/twin.macro/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js 8:33-46
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Documents\test\node_modules\twin.macro\node_modules\babel-plugin-macros\node_modules\cosmiconfig\dist'
下面是我的 package.json：
{
"name": "test",
"version": "0.1.0",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": [
"dist"
],
"types": "dist/index.d.ts",
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"scripts": {
"pack": "npm run remove-dist & copyfiles -u 1 src/components/**/* dist",
"rollup": "npm run remove-dist & rollup -c",
"start": "react-app-rewired start",
"remove-dist": "rd /s /q \"dist\"",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
"storybook": "start-storybook -p 6006 -s public",
"build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss",
"build-storybook": "build-storybook -s public",
"tscheck": "tsc"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@coreui/coreui": "^4.2.2",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.2",
"@fortawesome/free-solid-svg-icons": "^6.1.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@material-ui/core": "^4.12.4",
"@monaco-editor/react": "^4.4.6",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^23.0.4",
"@rollup/plugin-json": "^6.0.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.47",
"@types/react-dom": "^18.0.6",
"@types/react-grid-layout": "^1.3.2",
"babel-cli": "^6.26.0",
"babel-plugin-macros": "^3.1.0",
"body-scroll-lock": "^4.0.0-beta.0",
"constants": "^0.0.2",
"cookie-universal": "^2.2.2",
"crypto-js": "^4.1.1",
"env-cmd": "^10.1.0",
"gsap": "^3.10.4",
"module": "^1.2.5",
"os": "^0.1.2",
"path": "^0.12.7",
"postcss-cli": "^10.0.0",
"react-admin": "^4.2.7",
"react-animations": "^1.0.0",
"react-app-rewired": "^2.2.1",
"react-brackets": "^0.4.6",
"react-burger-menu": "^3.0.8",
"react-grid-layout": "^1.3.4",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.8",
"react-vertical-timeline-component": "^3.6.0",
"reactive-button": "^1.3.12",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-css-only": "^4.3.0",
"rollup-plugin-import-css": "^3.2.1",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-ts": "^3.2.0",
"rollup-plugin-uglify": "^6.0.4",
"socket.io-client": "^4.5.2",
"stream": "^0.0.2",
"styled-components": "^5.3.8",
"twin.macro": "^2.8.2",
"universal-cookie": "^4.0.4",
"web-vitals": "^2.1.4"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.21.0",
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-typescript": "^11.0.0",
"@storybook/addon-actions": "^6.5.10",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-interactions": "^6.5.10",
"@storybook/addon-links": "^6.5.10",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.10",
"@storybook/manager-webpack5": "^6.5.10",
"@storybook/node-logger": "^6.5.10",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.10",
"@storybook/testing-library": "^0.0.13",
"@types/react": "^18.0.28",
"@types/react-burger-menu": "^2.8.3",
"@types/react-vertical-timeline-component": "^3.3.3",
"autoprefixer": "^10.4.8",
"babel-loader": "^9.1.2",
"babel-plugin-named-exports-order": "^0.0.2",
"copyfiles": "^2.4.1",
"dotenv-webpack": "^8.0.1",
"mini-css-extract-plugin": "^2.7.2",
"postcss": "^8.4.14",
"process": "^0.11.10",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^4.2.0",
"rollup": "^3.18.0",
"rollup-plugin-dts": "^5.2.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0",
"rollup-plugin-typescript2": "^0.34.1",
"tailwindcss": "^3.1.8",
"ts-loader": "^9.4.2",
"tslib": "^2.5.0",
"typescript": "^4.9.5",
"webpack": "^5.74.0",
"webpack-cli": "^5.0.1",
"webpack-node-externals": "^3.0.0"
},
"browser": {
"fs": false,
"os": false,
"path": false
}
}
下面是我的 rollup.config.js：
const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");
const typescript = require("@rollup/plugin-typescript");
const dts = require("rollup-plugin-dts");
const json = require("@rollup/plugin-json");
const nodePolyfills = require("rollup-plugin-node-polyfills");
const peerDepsExternal = require("rollup-plugin-peer-deps-external");
const postcss = require("rollup-plugin-postcss");
const builtins = require("rollup-plugin-node-builtins");
const globals = require("rollup-plugin-node-globals");
const babel = require("@rollup/plugin-babel").babel;
const uglify = require("rollup-plugin-uglify").uglify;
const copy = require("rollup-plugin-copy");
const packageJson = require("./package.json");
module.exports = [
{
input: "src/components/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: false,
},
{
file: packageJson.module,
format: "esm",
sourcemap: false,
},
],
plugins: [
peerDepsExternal({
includeDependencies: true,
includeDevDependencies: true,
includePeerDependencies: true,
}),
resolve({
jsnext: true,
main: true,
browser: false,
preferBuiltins: true,
}),
nodePolyfills(),
json(),
typescript({
tsconfig: "./tsconfig.json",
}),
commonjs({
namedExports: {
"react-js": ["isValidElementType"],
},
}),
postcss(),
babel({
include: ["**.js", "node_modules/**"],
babelHelpers: "bundled",
presets: ["@babel/preset-env"],
}),
globals(),
builtins(),
uglify(),
],
external: [
"fs",
"react",
"react-is",
"react-dom",
"prop-types",
"styled-components",
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
external: [/\.css$/],
plugins: [
dts.default(),
nodePolyfills(),
copy({
targets: [
{ src: "src/components/app/fonts", dest: "dist/esm" },
{ src: "src/components/app/fonts", dest: "dist/cjs" },
],
}),
],
},
];
下面是我与 React-App-Rewired 一起使用的 config-overrides.js（webpack 配置）：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader",
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
resolve: {
modules: ["app", "node_modules"],
extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
fallback: {
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
},
mainFields: ["browser", "jsnext:main", "main"],
},
externals: {
react: {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react",
},
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom",
},
},
node: {
fs: "empty",
},
target: "web",
};
下面是我的tsconfig.json：
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"lib": ["es5", "es2015", "es2016", "dom", "esnext"],
"types": ["node"],
"module": "ESNext",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": false,
"outDir": "dist",
"sourceMap": true,
"strict": true,
"target": "es6",
"strictNullChecks": true,
"allowJs": true,
"declaration": true,
"declarationDir": "types",
"typeRoots": ["dist/esm/types"]
},
"include": ["src/components/**/*"]
}
当我使用
npm startnpm link testnpm startnpm start我在两种情况下都收到相同的错误。
任何帮助将不胜感激。
这不再是问题。问题出在 config-overrides.js 上。没有应用任何配置设置，特别是回退选项。将导出从导出对象文字更改为导出函数并将选项应用于配置选项后，问题就消失了。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function override(config, env) {
config.plugins = [new MiniCssExtractPlugin()];
config.module = {
rules: [
{
loader: "ts-loader",
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
};
config.resolve = {
extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
fallback: {
assert: false,
buffer: false,
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
},
};
config.externals = {
react: {
root: "React",
commonjs2: "react",
commonjs: "react",
amd: "react",
},
"react-dom": {
root: "ReactDOM",
commonjs2: "react-dom",
commonjs: "react-dom",
amd: "react-dom",
},
};
// config.node = {
// fs: "empty",
// };
config.target = "web";
return config;
};