Reactjs 找不到模块(x)隐式具有的声明文件';任何';在导入npm包时键入
我已经创建了一个Typescript,React项目,它使用了Storybook.js,它包含我正在处理的项目的所有组件、样式和图像。 我在Webpack的帮助下打包了这个项目,然后通过Azure管道构建并发布到一个私有提要。然后,我在我的主项目(一个Typescript,Next.js项目)上毫无问题地安装了这个包(npm安装)。当我尝试将包导入页面时Reactjs 找不到模块(x)隐式具有的声明文件';任何';在导入npm包时键入,reactjs,typescript,webpack,next.js,storybook,Reactjs,Typescript,Webpack,Next.js,Storybook,我已经创建了一个Typescript,React项目,它使用了Storybook.js,它包含我正在处理的项目的所有组件、样式和图像。 我在Webpack的帮助下打包了这个项目,然后通过Azure管道构建并发布到一个私有提要。然后,我在我的主项目(一个Typescript,Next.js项目)上毫无问题地安装了这个包(npm安装)。当我尝试将包导入页面时 import {Footer} from '@private_feed/generic.project/dist/bundle.js' 我得
import {Footer} from '@private_feed/generic.project/dist/bundle.js'
我得到了标题中提到的错误,以及:
./node_modules/next/dist/next-server/server/require.js
Critical dependency: the request of a dependency is an expression
./node_modules/next/dist/next-server/server/load-components.js
Critical dependency: the request of a dependency is an expression
> Build error occurred
ReferenceError: document is not defined
我以前在没有css和图像的情况下就可以使用它。我正在用tsc编译我的打字脚本,我所有的样式都是使用样式化组件。然而,由于项目和团队相关的原因,我需要能够使用css文件,不幸的是,我没有使用样式化组件
以下文件属于正在打包的项目
package.json
{
"name": "@private_feed/generic.project",
"version": "0.1.11",
"files": [
"dist"
],
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.47",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"@types/styled-components": "^5.1.0",
"cross-env": "^7.0.2",
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1"
},
"scripts": {
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"build": "webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/preset-create-react-app": "^3.1.2",
"@storybook/react": "^5.3.19",
"@types/lodash": "^4.14.157",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"style-loader": "^1.2.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"babel": {
"presets": [
"react-app"
]
},
"description": "This project was bootstrapped with [Create React App].",
"author": "",
"license": "ISC"
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg)$/,
use: [
'file-loader',
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"es2015"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react",
"noImplicitAny": true,
"sourceMap": true,
"typeRoots": ["./src/@types", "./node_modules/@types"]
},
"include": [
"src", "types"
]
}
src/@types/assets/index.d.ts
declare module "\*.svg" {
import React = require("react");
export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module "\*.css" {
const content: string;
export default content;
}
声明模块“\*.svg”{
导入反应=要求(“反应”);
导出常量ReactComponent:React.SFC;
const src:string;
导出默认src;
}
声明模块“\*.css”{
常量内容:字符串;
导出默认内容;
}