Question

所以我试图建立一个React / Sails项目，我只是设置了webpack配置，但是它与插入/预设错误混为一谈。

版本正确（7. *以上）。我已经读过很多类似的问题，但是没有一个对我有帮助。

./ assets / src / index.js中的错误模块构建失败（来自./node_modules/babel-loader/lib/index.js）：错误：插件/预设文件不允许导出对象，只能导出功能。

这是webpack文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    entry: './assets/src/index.js'
  },
  output: {
    path: __dirname + '/.tmp/public',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
  template: 'assets/src/index.html'
    })
  ]
};

这是package.json

{
  "name": "my-desk",
  "private": true,
  "version": "0.0.0",
  "description": "a Sails application",
  "keywords": [],
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@sailshq/connect-redis": "^3.2.1",
    "@sailshq/lodash": "^3.10.3",
    "@sailshq/socket.io-redis": "^5.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sails": "^1.2.3",
    "sails-hook-apianalytics": "^2.0.3",
    "sails-hook-organics": "^0.16.0",
    "sails-hook-orm": "^2.1.1",
    "sails-hook-sockets": "^2.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/core": "^7.5.4",
    "babel-loader": "^8.0.6",
    "babel-preset-react": "^6.24.1",
    "eslint": "5.16.0",
    "grunt": "1.0.4",
    "html-webpack-plugin": "^3.2.0",
    "htmlhint": "0.11.0",
    "lesshint": "6.3.6",
    "npm-run-all": "^4.1.5",
    "rimraf": "^2.6.3",
    "sails-hook-grunt": "^4.0.0",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },

.babelrc文件

 {
    "presets": ["@babel/preset-env", "react"]
 }

index.js（以防万一）

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
  return (
    <div>
      Hello World!
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

和index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>myDesk</title>
</head>
<body>
    <div id='root'></div>
</body>
</html>

Answer 1

我之前也遇到过同样的问题，并使用以下配置解决了该问题：

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",

尝试安装它。它应该工作。您需要babel-loader 7而不是8。因为第8版将无法使用。

否则请在这里看看： https://github.com/TahaBoulehmi/FullStack

您将在此处找到所有需要的配置。您可以克隆项目并开始工作。这是我之前配置的一个空Sails and React项目，可以在我想开始一个新项目时帮助我节省一些时间。希望对您有所帮助。

React / Sails.js错误：插件/预设文件不允许导出对象，只能导出功能

1 个答案: