storyshots 错误 - 找不到模块 ./src/common 映射为

Posted

技术标签:

【中文标题】storyshots 错误 - 找不到模块 ./src/common 映射为【英文标题】:storyshots error - Could not locate module ./src/common mapped as 【发布时间】:2020-12-13 23:48:03 【问题描述】:

我刚刚安装了@storybook/addon-storyshots 并按照他们的指示将其置于根目录。

src/Storyshots.test.ts

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

当我运行测试时,我现有的所有测试都通过了,但在这个文件上失败了 - StoryShots.test.ts 出现错误:

错误:

FAIL  src/Storyshots.test.ts 
Test suite failed to run

Configuration error:

Could not locate module ./src/common mapped as:
C:\apps\vanilla\storybook-examples\src\$1.

Please check your configuration for these entries:

  "moduleNameMapper": 
    "/src\/(.*)/": "C:\apps\vanilla\storybook-examples\src\$1"
  ,
  "resolver": undefined


  at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:552:17)
  at Object.<anonymous> (node_modules/shelljs/shell.js:9:14)

我的项目中确实进行了模块解析,并且一切正常。请参阅我的项目的示例模块解析:

tsconfig.json


...
  "compilerOptions": 
    "baseUrl": "./",
  ,
  "include": [
    "src/**/*", "@types", "stories"
  ]

.babelrc


  "plugins": [
...
    ["module-resolver", 
      "extensions": [".js", ".jsx", ".ts", ".tsx"],
      "root": ["./"],
      "alias": 
        "src": "./src"
      
    ]
  ]

webpack.config.dev.js

const src = path.join(__dirname, '/src');

module.exports = 
...
  resolve: 
    modules: [src, 'node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],

    // fix module resolver for typescript !!!
    alias: 
      src
    
  ,

我只是没有在 .storybook 文件夹 - .storybook/ 中设置任何这些。我不确定故事书解析是如何工作的,也不知道为什么要寻找 common/ 文件夹。我没有公用文件夹。

这是我的一个故事的一个例子:

Basic.stories.tsx

import React from 'react';
import Basic from 'src/Components/Basic/Basic';

export const BasicHelloWorld = () => <Basic ... title: 'hello world'  />;
export default  title: 'Basic' ;

这是我的故事书 main.js

main.js

module.exports = 
  stories: ['../**/*.stories.tsx', '../**/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ]
;

感谢任何建议。谢谢

【问题讨论】:

【参考方案1】:

事实证明,我上面的配置中没有包含的一件事是我的 jest.config.js 文件。

原来是以下原因导致了这个问题:

jest.config.js !坏了

  moduleNameMapper: 
    'src/(.*)': '<rootDir>/src/$1',
...
  ,

今天我决定剥离所有内容,在此过程中遇到了 ts-jest 配置示例,其中正则表达式具有精确路径,即以 ^ 开头并以 $ 结尾,即不是百搭匹配。

https://kulshekhar.github.io/ts-jest/user/config/

并不是我想太多,或者为什么它只会破坏故事镜头,除了文件匹配和分辨率方面的任何事情,我认为值得确保准确性。我更新了我的正则表达式以匹配上面的路径和 BINGO - NO MORE ERROR !!!哈哈哈。好运气。

jest.config.js 已修复

  moduleNameMapper: 
    '^src/(.*)$': '<rootDir>/src/$1'
    ...

  ,

【讨论】:

以上是关于storyshots 错误 - 找不到模块 ./src/common 映射为的主要内容,如果未能解决你的问题,请参考以下文章

部署 firebase 项目时错误显示“找不到模块 firebase-functions”

VueJS/Typescript 错误:找不到模块“我的模块”或其相应的类型声明

打字稿导入文本文件“错误 TS2307:找不到模块”

Webpack“找不到模块:错误:无法解析'../webfonts/fa-solid-900.eot'”

错误 TS2307:找不到模块“fs”或其相应的类型声明

React,Typescript - 找不到模块...或其相应的类型声明