Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 找不到模块(x)隐式具有的声明文件';任何';在导入npm包时键入_Reactjs_Typescript_Webpack_Next.js_Storybook - Fatal编程技术网

Reactjs 找不到模块(x)隐式具有的声明文件';任何';在导入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' 我得

我已经创建了一个Typescript,React项目,它使用了Storybook.js,它包含我正在处理的项目的所有组件、样式和图像。 我在Webpack的帮助下打包了这个项目,然后通过Azure管道构建并发布到一个私有提要。然后,我在我的主项目(一个Typescript,Next.js项目)上毫无问题地安装了这个包(npm安装)。当我尝试将包导入页面时

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”{
常量内容:字符串;
导出默认内容;
}