Я новичок, чтобы реагировать, и я пытаюсь добавить 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 говорят, что все компоненты работают вssr
Пожалуйста, будьте уверены, мне потребовался день, чтобы прийти к этому результату, и я все еще застрял, любой hepl действительно приветствуется
Вот содержимое 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"
}
}