arco init yourProjectName 无法成功建立项目

[seepine]

Describe the bug
如标题

To Reproduce
Steps to reproduce the behavior:
安装npm i arco-cli -g
初始化arco init yourProjectName

Expected behavior
能成功执行

Screenshots

Desktop (please complete the following information):

• OS: Windows10
• node version v16.13.1

Other Content
虽然提示初始化完成，可以启动，但是执行npm run dev也是报错

[ZhongMingKun]

+1

[ZhongMingKun]

暂时测试是 builder改为webpack5后可用

1. 安装依赖

$ yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5

2. .storybook/main.js里面加上 core: { builder: 'webpack5' };

具体代码：

const path = require('path');
const glob = require('glob');
const fs = require('fs-extra');

const packagePaths = glob.sync('packages/*');

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

function getLoaderForStyle(cssOptions) {
  return [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: cssOptions,
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ];
}

module.exports = {
+  core: { builder: 'webpack5' },
  stories: ['../packages/**/stories/*.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: (config) => {
    // 为 storybook 添加 packages 中项目的 alias
    packagePaths.forEach((_path) => {
      const packageJson = fs.readJsonSync(path.resolve(_path, 'package.json'));
      const dirSourceFile =
        packageJson.arcoMeta && packageJson.arcoMeta.type === 'vue-library'
          ? 'components'
          : 'src';
      config.resolve.alias[`${packageJson.name}$`] = path.resolve(
        _path,
        dirSourceFile
      );
    });

    // less
    config.module.rules.push({
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getLoaderForStyle(),
    });

    // less css modules
    config.module.rules.push({
      test: lessModuleRegex,
      use: getLoaderForStyle({ modules: true }),
    });

    // svg modules
    config.module.rules.push({
      test: /\.svg$/,
      use: ['vue-loader', 'vue-svg-loader'],
    });

    return config;
  },
};

3. 运行

$ yarn dev

[seepine]

暂时测试是 builder改为webpack5后可用

1. 安装依赖

$ yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5

2. 运行

$ yarn dev

啊咧，我执行了你这句后运行，还是一样的错误

TypeError: Cannot read properties of undefined (reading 'get')

[seepine]

你arco init 是vue、组件库类型吗

[ZhongMingKun]

你arco init 是vue、组件库类型吗

回看下我的回复，添加了一下webpack5的使用

[seepine]

你arco init 是vue、组件库类型吗

回看下我的回复，添加了一下webpack5的使用

还是不行 - - ，yarn dev 有报错，是不是我项目有问题，怎么报错说的stories目录没看到

[seepine]

建了空stories目录，yarn dev没报错了，控制台报错Uncaught ReferenceError: exports is not defined，界面转圈圈

[MisterLuffy]

建了空stories目录，yarn dev没报错了，控制台报错Uncaught ReferenceError: exports is not defined，界面转圈圈

因为新建的项目是没有组件的，所以需要 yarn add:component Button 添加一个组件即可。

[MisterLuffy]

暂时测试是 builder改为webpack5后可用

1. 安装依赖

$ yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5

2. .storybook/main.js里面加上 core: { builder: 'webpack5' };

具体代码：

const path = require('path');
const glob = require('glob');
const fs = require('fs-extra');

const packagePaths = glob.sync('packages/*');

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

function getLoaderForStyle(cssOptions) {
  return [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: cssOptions,
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  ];
}

module.exports = {
+  core: { builder: 'webpack5' },
  stories: ['../packages/**/stories/*.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: (config) => {
    // 为 storybook 添加 packages 中项目的 alias
    packagePaths.forEach((_path) => {
      const packageJson = fs.readJsonSync(path.resolve(_path, 'package.json'));
      const dirSourceFile =
        packageJson.arcoMeta && packageJson.arcoMeta.type === 'vue-library'
          ? 'components'
          : 'src';
      config.resolve.alias[`${packageJson.name}$`] = path.resolve(
        _path,
        dirSourceFile
      );
    });

    // less
    config.module.rules.push({
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getLoaderForStyle(),
    });

    // less css modules
    config.module.rules.push({
      test: lessModuleRegex,
      use: getLoaderForStyle({ modules: true }),
    });

    // svg modules
    config.module.rules.push({
      test: /\.svg$/,
      use: ['vue-loader', 'vue-svg-loader'],
    });

    return config;
  },
};

3. 运行

$ yarn dev

试了一下确实可行，我们更新一下项目模板的配置到 Webpack 5。

[azhengyongqin]

@MisterLuffy #38 (comment)

Windows环境下依然报错，麻烦解决windows下的环境