Craco构建失败,将别名文件夹作为外部软件包

问题描述 投票:0回答:1

我正在使用craco和craco-alias在我的Create React App项目中为导入实现别名。遵循https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installationhttps://github.com/risenforces/craco-alias#readme中的说明我将package.json配置为使用craco而不是react-scripts来启动开发服务器,测试和生产版本]

...
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "lint:css": "stylelint './src/**/*.css'",
    "lint:js": "eslint 'src/**/*.js'",
    "test:w": "craco test --watch",
    "postinstall": "patch-package"
  },
...

然后我创建了别名路径的jsconfig.json文件

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components": ["components/*", "components"],
      "@constants": ["constants/*", "constants"],
      "@assets": ["assets/*", "assets"],
      "@store": ["store/*", "store"],
      "@utils": ["utils/*", "utils"]
    },
    "include": ["src"],
    "exclude": ["node_modules", "build", "coverage"]
  }

和craco.config.js文件,它使用craco-alias插件

/* craco.config.js */
const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        baseUrl: './src',
        source: 'jsconfig',
      }
    }
  ]
}

现在我正在使用别名在我的应用程序中这样导入

// root index.js file
...

import Layout from '@components/Layout';
import store from '@store'; // this line causes error on CI build


function App() {
  return (
    <Layout>
     /* inner components */
    </Layout>
  );
}

一切正常(在导入测试中,即使我服务于本地构建的项目,混叠导入也可以在dev-server上运行),直到将其推送到github repo为止。该回购配置了github操作,以便在远程服务器上构建和测试项目,并且在安装所有软件包之后,它会失败并在构建步骤中出错。

Run yarn build
yarn run v1.22.4
$ craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Failed to compile.

./src/index.js
Cannot find module: '@store'. Make sure this package is installed.

You can install this package by running: npm install @store.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 1.

有人可以帮助我了解我的代码有什么问题吗?为什么craco或webpack期望'@store'是外部软件包,而不是内部模块的别名导入?

reactjs webpack alias create-react-app craco
1个回答
0
投票

就我而言,问题不在craco或webpack中,而在我先前的操作和操作系统文件系统差异中。我在VS Code终端中使用Windows 10和WSL。因此,在我使用'@'符号作为别名之前,我尝试对文件夹使用CamelCase并通过Windows资源管理器将其重命名(因为对我而言,关闭VSCode并通过资源管理器重命名文件比在新的VSCode窗口中打开新的bash终端更简单)关闭打开的文件)。

© www.soinside.com 2019 - 2024. All rights reserved.