Ahoj, koukám trošku po JavaScriptu a snažím se následovat tento návod. Jsem u sekce Going Isomorphic with Express and React.js, kde se má přidat renderování obsahu na serveru. Dostal jsem se k části, kde se upravuje webpack.config.js, přidáním další konfigurace (SERVER_DIR atp.), nicméně po provedení úprav a puštění webpacku v konzoli mi zabalování chcípne s následující hláškou:
$ webpack
Hash: 396f0bfb9d565b6f60f058d231fd23e862f6e9e4
Version: webpack 1.12.12
Child client:
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.12.12
Time: 6880ms
+ 1 hidden modules
ERROR in ./index.js
Module build failed: ReferenceError: [BABEL] C:\Ondra\react-isomorphic\client\index.js: Unknown option: base.presents
at Logger.error (C:\Ondra\react-isomorphic\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\Ondra\react-isomorphic\node_modules\babel-core\lib\transformation\file\options\option-manager.js:262:18)
at OptionManager.init (C:\Ondra\react-isomorphic\node_modules\babel-core\lib\transformation\file\options\option-manager.js:416:10)
at File.initOptions (C:\Ondra\react-isomorphic\node_modules\babel-core\lib\transformation\file\index.js:191:75)
at new File (C:\Ondra\react-isomorphic\node_modules\babel-core\lib\transformation\file\index.js:122:22)
at Pipeline.transform (C:\Ondra\react-isomorphic\node_modules\babel-core\lib\transformation\pipeline.js:42:16)
at transpile (C:\Ondra\react-isomorphic\node_modules\babel-loader\index.js:14:22)
at Object.module.exports (C:\Ondra\react-isomorphic\node_modules\babel-loader\index.js:88:12)
Child server:
Hash: 58d231fd23e862f6e9e4
Version: webpack 1.12.12
Time: 45ms
Asset Size Chunks Chunk Names
app.js 1.46 kB 0 [emitted] app
+ 1 hidden modules
Myslel jsem si, že mám někde nějakou chybu v tom configu samotném, ale procházel jsem ho a vypadá správně.
const path = require('path');
const CLIENT_DIR = path.resolve(__dirname, 'client');
const SERVER_DIR = path.resolve(__dirname, 'server/generated');
const DIST_DIR = path.resolve(__dirname, 'dist');
const loaders = [
{
test: /\.js$/,
include: CLIENT_DIR,
loader: 'babel-loader',
query: {
presents: ['es2015', 'react']
}
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
];
module.exports = [
{
name: 'client',
target: 'web',
context: CLIENT_DIR,
entry: './index.js',
output: {
path: DIST_DIR,
filename: 'bundle.js'
},
module: {
loaders: loaders
},
resolve: {
alias: {
components: path.resolve(CLIENT_DIR, 'components')
}
}
},
{
name: 'server',
target: 'node',
context: CLIENT_DIR,
entry: {
app: 'components/app/index.js'
},
output: {
path: SERVER_DIR,
filename: '[name].js',
libraryTarget: 'commonjs2'
},
externals: /^[a-z\-0-9]+/,
module: {
loaders: loaders
},
resolve: {
alias: {
components: path.resolve(CLIENT_DIR, 'components')
}
}
}
];
Na SO jsem našel, že to může být chybějící presetem pro React, ten mám ovšem do projektu stáhnutý, vizte package.json.
{
"name": "react-isomorphic",
"version": "1.0.0",
"description": "Isomorphic react application tutorial.",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.3.13",
"css-loader": "^0.23.1",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"style-loader": "^0.13.0",
"webpack": "^1.12.3"
},
"dependencies": {
"express": "^4.13.3"
}
}
V JavaScriptu jsem nikdy nedělal nic komplexnějšího než základní jQuery transformace, takže je tohle pro mne opravdu španělská vesnice. Nenapadá vás, v čem může být problém?