时间戳

首页 > 解决方案 > Material-ui 需要 webpack 编译在服务端渲染，howto？

node.js - Material-ui 需要 webpack 编译在服务端渲染，howto？

问题描述

我是新手，我正在尝试将 ssr 添加到我的项目中。我的问题是，在运行编译后的代码时，出现错误，抱怨 Typography 组件的语法：

D:\work\weallyServer\server\node_modules\@material-ui\core\es\Typography\Typography.js:1
(function (exports, require, module, __filename, __dirname) { import _extends from "@babel/runtime/helpers/extends";
                                                                     ^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Module._compile (D:\work\weallyServer\server\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.newLoader [as .js] (D:\work\weallyServer\server\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at eval (webpack:///external_%22@material-ui/core/es/Typography/Typography%22?:1:18)
    at Object.@material-ui/core/es/Typography/Typography (D:\work\weallyServer\server\build\index.bundle.js:1990:1)
    at __webpack_require__ (D:\work\weallyServer\server\build\index.bundle.js:20:30)
    at eval (webpack:///./src/client/comp/ShopSuggestBox.js?:30:101)

我觉得奇怪的是，material-ui在ECMAScript部分中说：在 npm 上发布的包使用 Babel 进行了转译，以考虑支持的平台。（包括节点 6.x 及更高版本）

我不知道我做错了什么（我正在使用纱线，但我认为它没有什么不同）

我的项目结构都是 src 中的所有源，有一个包含材料和反应代码的客户端文件夹，如下所示：

10/05/2019  12:10    <REP>          client
10/05/2019  10:43    <REP>          bridge
10/05/2019  10:43    <REP>          business
10/05/2019  10:43    <REP>          constants
10/05/2019  10:43    <REP>          dataset
10/05/2019  10:43    <REP>          db
10/05/2019  10:43    <REP>          graphql
10/05/2019  15:10    <REP>          public
10/05/2019  10:43    <REP>          routes
10/05/2019  15:25             3 649 facebook.js
18/04/2019  10:55            56 405 categories.js
18/04/2019  10:55             4 461 procedures.js
10/05/2019  17:37             8 801 server.js
18/04/2019  10:55               762 serverConfig.js
10/05/2019  15:22               234 starter.js

我的 webpack.config.js

import path from 'path';

import HtmlWebpackPlugin from 'html-webpack-plugin';
const nodeExternals = require('webpack-node-externals')

console.log( "skipping ", path.resolve(__dirname, "node_modules") )

module.exports = {
  entry: path.join(__dirname,'src','starter.js'),
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  output: {
    path: path.join(__dirname,'build'),
    filename: 'index.bundle.js'
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: {
    modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, '..','src'), 'node_modules']
  },
  devServer: {
    contentBase: path.join(__dirname,'..','src')
  },
  externals: [nodeExternals()], 
  module: {
    rules: [
      {
        // this is so that we can compile any React,
        // ES6 and above into normal ES5 syntax
        test: /\.(js|jsx)$/,
        // we do not want anything from node_modules to be compiled
        exclude: [path.resolve(__dirname, "node_modules")],
//        include: [path.resolve(__dirname, "node_modules", "@material-ui")],
        use: ['babel-loader']
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg|css)$/,
        loaders: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'public','index.html')
    })
  ]
};

最后是我的 .babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

在网上搜索它确认必须编译material-ui组件奇怪的是在material-ui docs中，他们说所有组件都在ssr中工作

请放心，我花了一天时间才得出这个结果，但我仍然卡住了，真的欢迎任何帮助

这是 package.json 的内容

{
  "name": "weally",
  "version": "1.0.0-beta",
  "description": "weally server",
  "main": "server.js",
  "author": "Zied Hamdi",
  "license": "SEE LICENSE IN LICENSE",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "babel-node ./node_modules/webpack/bin/webpack",
    "start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open",
    "startProd": "node ./build/index.bundle.js"
  },
  "keywords": [
    "react",
    "webpack",
    "babel",
    "material-design"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "@google/maps": "^0.5.5",
    "@material-ui/core": "^3.8.3",
    "@material-ui/icons": "^3.0.2",
    "apollo-boost": "^0.1.10",
    "apollo-link-context": "^1.0.9",
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "csv-parse": "^4.3.1",
    "dotenv": "^6.0.0",
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "express-fileupload": "^1.0.0",
    "express-graphql": "^0.6.12",
    "express-jwt": "^5.3.1",
    "express-session": "^1.15.6",
    "fb": "^2.0.0",
    "graphql": "^14.0.2",
    "graphql-compose": "^6.3.1",
    "graphql-compose-connection": "^5.0.0",
    "graphql-compose-mongoose": "^6.1.0",
    "graphql-tag": "^2.9.2",
    "http-proxy-middleware": "^0.19.0",
    "i18next": "^11.3.6",
    "jsonwebtoken": "^8.3.0",
    "moment": "^2.22.2",
    "mongoose": "^5.5.2",
    "passport": "^0.4.0",
    "passport-facebook": "^2.1.1",
    "path": "^0.12.7",
    "paypal-checkout": "^4.0.257",
    "prop-types": "^15.6.2",
    "q": "^1.5.1",
    "react": "^16.8.6",
    "react-apollo": "^2.1.7",
    "react-autosuggest": "^9.4.2",
    "react-dom": "^16.8.6",
    "react-i18next": "^7.8.1",
    "react-image-gallery": "^0.8.12",
    "react-moment": "^0.7.9",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.3",
    "react-stripe-checkout": "^2.6.3",
    "sharp": "^0.21.0",
    "source-map-support": "^0.5.10",
    "stripe": "^6.28.0",
    "webpack-node-externals": "^1.7.2"
  }
}

标签： node.jsreactjswebpackmaterial-uiserver-side-rendering

解决方案

好吧，过错：

我终于发现错误是我正在导入错误版本的 Typography ： from core\es而不是 from **core**

我的 IDE 中的自动完成功能让他节省了时间 :)

推荐阅读