【发布时间】：2022-01-06 14:13:03
【问题描述】：
我最近安装了一个插件来处理 gatsby 中的绝对路径，称为 gatsby-plugin-root-import，在我设置它之前，故事书工作正常，但是当我运行绝对路径时会引发错误。
这里不会报错
import { URL_DEFAULT } from '../../utils/globalVars'
但是这里抛出了一个错误
import { URL_DEFAULT } from 'utils/globalVars'
错误：
resolve 'utils/globalVars' in '/home/arthur/Área de Trabalho/mirror/src/components/Button'
Parsed request is a module
using description file: /home/arthur/Área de Trabalho/mirror/package.json (relative path: ./src/components/Button)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/arthur/Área de Trabalho/mirror/src/components/Button/node_modules doesn't exist or is not a directory
/home/arthur/Área de Trabalho/mirror/src/components/node_modules doesn't exist or is not a directory
配置插件 gatsby：
const path = require('path')
{
resolve: 'gatsby-plugin-root-import',
options: {
resolveModules: [path.join(__dirname, 'libs')],
utils: path.join(__dirname, 'src', 'components', 'utilities')
}
},
配置预览故事书：
global.___loader = {
enqueue: () => {},
hovering: () => {},
}
// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
global.__BASE_PATH__ = "/"
// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
// In Storybook, it makes more sense to log an action than doing an actual navigate. Check out the actions addon docs for more info: https://storybook.js.org/docs/react/essentials/actions
window.___navigate = pathname => {
action("NavigateTo:")(pathname)
}
tsConfig：
{
"compilerOptions": {
// "baseUrl": "src",
"target": "esnext",
"module": "esnext",
"lib": ["dom", "es2017"],
// "allowJs": true,
// "checkJs": true,
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmit": true,
"skipLibCheck": true
},
"exclude": ["node_modules"],
"include": ["**/*.ts", "**/*.tsx"]
}
package.json:
"dependencies": {
"@styled-icons/boxicons-regular": "^10.37.0",
"@styled-icons/boxicons-solid": "^10.34.0",
"@styled-icons/fa-brands": "^10.34.0",
"@styled-icons/material": "^10.28.0",
"@styled-icons/material-outlined": "^10.28.0",
"@styled-icons/remix-fill": "^10.18.0",
"next": "10.1.3",
"next-pwa": "^5.2.21",
"polished": "^4.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-slick": "^0.28.1",
"styled-components": "^5.3.0",
"styled-media-query": "^2.1.2"
},
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/preset-typescript": "^7.13.0",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/react": "^6.2.9",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^13.1.9",
"@types/jest": "^26.0.23",
"@types/node": "^14.0.14",
"@types/react": "^17.0.5",
"@types/react-slick": "^0.23.4",
"@types/styled-components": "^5.1.9",
"@typescript-eslint/eslint-plugin": "^4.22.1",
"@typescript-eslint/parser": "^4.22.1",
"babel-loader": "^8.2.2",
"babel-plugin-styled-components": "^1.12.0",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"husky": "^6.0.0",
"jest": "^26.6.3",
"jest-styled-components": "^7.0.4",
"lint-staged": "^11.0.0",
"plop": "^2.7.4",
"prettier": "^2.0.5",
"typescript": "^4.2.4"
}
main.js 中的 webpack 故事书：
webpackFinal: async config => {
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
config.module.rules[0].use[0].options.plugins.push(
require.resolve("babel-plugin-remove-graphql-queries")
)
return config
},
【问题讨论】：
标签： typescript gatsby storybook