Ошибка сборки модуля (из ./node_modules/babel-loader/lib/index.js) при использовании single-spa.config. js - PullRequest
0 голосов
/ 26 февраля 2020

Я знаю, что есть много подобных проблем, но я серьезно запутался, прочитав много веток об этом, но все еще не смог решить мою проблему.

Я впервые использую single-spa для микро-интерфейса, но я застрял в первой части.

Это ошибка, которую я получил:

ОШИБКА в ./single-spa.config.js Сборка модуля завершилась неудачно (из ./node_modules/babel-loader/lib/index.js): Ошибка: файлы плагинов / предустановок не позволяют экспортировать объекты, только функции , В D: \ Gitpanda \ singlespatest \ node_modules \ babel-preset-реагировать \ lib \ index. js в createDescriptor (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-descriptors. js : 178: 11) в items.map (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-descriptors. js: 109: 50) в Array.map () в createDescriptors (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-descriptors. js: 109: 29) в createPresetDescriptors (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-descriptors . js: 101: 10) в пресетах (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-descriptors. js: 47: 19) в mergeChainOpts (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-chain. js: 320: 26) в D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-chain. js: 283 : 7 в Generator.next () в buildRootChain (D: \ Gitpanda \ singlespatest \ node_modules@babel \ core \ lib \ config \ config-chain. js: 120: 29) i 「wdm」: Не удалось скомпилировать.

Прочитав много топи c об этой проблеме, я возможно, эта ошибка возникает из-за версии babel, но когда я пытаюсь добавить и instal пресет, так как я использую babel-loader@8, я должен установить babel-core@7, но ошибка все еще существует.

это мой пакет. json:

  "dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "single-spa": "^5.0.0",
    "single-spa-react": "^2.11.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "html-loader": "^0.5.5",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

это мой .babelr c:

{
    "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }],
      "@babel/preset-env",
      ["react"]
    ],
    "plugins": [
      "syntax-dynamic-import",
      "transform-object-rest-spread"
    ]
}

и это my webpack.config:

const path = require('path');
const webpack = require('webpack');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
      // Set the single-spa config as the project entry point
        'single-spa.config': 'single-spa.config.js',
    },
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
              // Webpack style loader added so we can use materialize
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
          {
            test: /\.js$/,
            exclude: [path.resolve(__dirname, 'node_modules')],
            loader: 'babel-loader',
          },
            {
              // This plugin will allow us to use html templates when we get to the angularJS app
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader',
            },
        ],
    },
    node: {
        fs: 'empty'
    }, 
    resolve: {
        modules: [
            __dirname,
            'node_modules',
        ],
    },
    plugins: [
      // A webpack plugin to remove/clean the build folder(s) before building
        // new CleanWebpackPlugin(['dist']),
        new CleanWebpackPlugin(),
    ],
    devtool: 'source-map',
    externals: [],
    devServer: {
        historyApiFallback: true
    }
};

Если вам интересно, что я хочу сделать, на самом деле я просто следую этому уроку в здесь

Может кто-нибудь помочь мне решить это? Я уже запутался в этом

...