我正在構建我的第一個反應組件的 npm 包。
使用 webpack 成功構建后，我嘗試使用npm link.
它已連接，但組件未加載。它給了我一堆這樣的錯誤
未捕獲的錯誤：元素型別無效：應為字串（對于內置組件）或類/函式（對于復合組件），但得到：物件。您可能忘記從定義組件的檔案中匯出組件，或者您可能混淆了默認匯入和命名匯入。檢查 `App` 的渲染方法。
所以我嘗試console.log()了組件。它回傳一個空的Object.
我為此苦苦掙扎了 2 天，不知道出了什么問題。
這是一些配置
webpack.config.js
var path = require("path");
const isDevelopment = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: "production",
entry: {
index: path.join(__dirname, 'src', 'index.tsx')
},
plugins: [
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
})
],
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: { allowTsInNodeModules: true }
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.module\.s[ac]ss$/,
use: [
isDevelopment ? 'style-loader': MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.s[ac]ss$/i,
exclude: /\.module.(s[ac]ss)$/,
use: [
// Creates `style` nodes from JS strings
isDevelopment ? 'style-loader': MiniCssExtractPlugin.loader,
// to generate a .d.ts module
"css-modules-typescript-loader",
// Translates CSS into CommonJS
{loader: "css-loader", options: {modules: true}},
// Compiles Sass to CSS
{loader: "sass-loader", options: {sourceMap: isDevelopment}},
],
},
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".css", ".scss"]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"declaration": true,
"declarationMap": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"removeComments": true,
"noImplicitAny": true,
"noEmit": false,
"jsx": "react-jsx",
"sourceMap": true,
"plugins": [{"name": "typescript-plugin-css-modules"}]
},
"include": [
"src"
]
}
包.json
{
"name": "react-dissolve",
"version": "1.0.0",
"description": "A color and image animated dissolve effect.",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"files": [
"dist",
"src"
],
"scripts": {
"build": "webpack"
},
"author": "jack szeto",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/color-string": "^1.5.2",
"@types/jest": "^27.0.3",
"@types/node": "^16.11.15",
"@types/node-sass": "^4.11.2",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"color-string": "^1.9.0",
"css-loader": "^6.5.1",
"css-modules-typescript-loader": "^4.0.1",
"mini-css-extract-plugin": "^2.4.5",
"node-sass": "^7.0.1",
"rc-slider": "^9.7.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-p5": "^1.3.24",
"react-scripts": "5.0.0",
"sass": "^1.45.1",
"sass-loader": "^12.4.0",
"simplex-noise": "^3.0.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.2.6",
"typescript": "^4.5.4",
"web-vitals": "^2.1.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
},
"peerDependencies": {
"react": "^17.0.2",
"react-p5": "^1.3.24",
"simplex-noise": "^3.0.0",
"color-string": "^1.9.0",
"rc-slider": "^9.7.5",
"sass": "^1.45.1"
},
"dependencies": {}
}
The build was put in the dist folder and it seems to perfect success build in the dist.
Screenshot:
Minimal reproduction case:
by using the same configuration above. I created a test project(see structure below).
I ran npm run build to build the component with webpack.
Then npm link to link the test project to a new ts React project. Tried to import but it produced the same error.
use case
import Test from 'npm-test';
...
<Test />
file structure
npm-test/
dist/
node_modules/
src/
declarations.d.ts
index.tsx
style.module.scss
.babelrc
.gitgnore
.npmignore
package.json
tsconfig.json
webpack.config.js
index.tsx
import React, { CSSProperties } from 'react'
import styles from './style.module.scss';
interface TestProps {
className?: string,
style?: CSSProperties,
}
const Test = ({className, style}:TestProps) => {
return (
<div className={`${styles.test} ${className}`}
style={{...style}}
>
Test
</div>
)
}
export default Test;
exported index.d.ts
import { CSSProperties } from 'react';
interface TestProps {
className?: string;
style?: CSSProperties;
}
declare const Test: ({ className, style }: TestProps) => JSX.Element;
export default Test;
//# sourceMappingURL=index.d.ts.map
Thanks for reading the long post!
uj5u.com熱心網友回復：
我已經解決了這個問題。感謝@JaredSmith 幫助我。
我搞砸了webpack，但最后，我決定繼續使用更容易使用的rollup。
找到Portexe的Rollup 教程，非常有幫助。
所以我把檔案結構改成了這個
npm-test-hellow-world/
src/
component/
hello-world.tsx
index.ts
.babelrc
.gitgnore
.npmignore
package.json
tsconfig.json
rollup.config.js
由于在hello-world.tsx功能組件中默認匯出
declare const HelloWorld: React.FC<HelloWorldProps>;
export default HelloWorld;
不知何故，編譯器沒有匯出組件。所以我把它放在src/component/檔案夾中并從中匯出src/index.ts
export {default} from './component/hello-world';
// notice:
// export * from './component/hello-world';
// didn't work
它有效！不太確定為什么。如果有人能解釋一下，我將不勝感激。
如果您想查看更多詳細資訊，可以查看GitHub 存盤庫
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406597.html
標籤：