Upon following the instructions and running "webpack --watch --config "./webpack.config.server.js" --colors --display-error-details" I receive error "Unexpected token import"
mr-e- opened this issue · comments
It is complaining about the first line in
(function (exports, require, module, __filename, __dirname) { import { clientConfiguration } from 'universal-webpack'
Now I know node doesn't support es6 imports and I've used babel-import in my project but it doesn't get a chance to load once I've integrated universal-webpack. I've followed the instructions to a tea and it doesn't mention anything about babel so I'm curious, is something missing from the instructions or am I doing something wrong?
If it's still ES6 on the server side that means you don't have babel-loader configured properly since in the sample project ES6 imports work.
I don't see where the document shows how to configure this? I am using the react-redux starter kit and trying to implement server side rendering. Babel works fine on the client side but I'm not sure how it is supposed to work server side since their is no compile command, I am just running the commands you specified in the document ""webpack --watch --config "./webpack.config.server.js" --colors --display-error-details". Fairly new to this stuff, it's a lot to take in:(
The document doesn't show how to configure this.
The command you wrote is the compile command.
babel is configured... if I run the project like a pure client side applications via "npm start", it starts fine and I am able to to use es6 import functions no problem. The issue arises when I try to load the server side modules I created via your document. I am a bit confused because your files appear to be responsible for loading the webpack config, which is where my babel loader is set up. So how is it supposed to understand es6 before even loading the config file? Really appreciate your time, I apologize if this is the wrong place, I'm just 8 hours in to this and feeling incredibly lost:(
I am a bit confused because your files appear to be responsible for loading the webpack config
My files only create webpack server config.
You run it yourself.
webpack --watch --config "./webpack.config.server.js" --colors --display-error-details
This is the command, you run it, not this package.
The responsibility is yours to check that the config has everything the project needs.
You can console.log that config (in the file before export) to check that the config suits the project's needs.
The first line of web.config.server.js is "import { serverConfiguration } from 'universal-webpack'" and this is the line that immediately causes the error.
Post the error then
(function (exports, require, module, __filename, __dirname) { import { serverConfiguration } from 'universal-webpack'
^^^^^^
SyntaxError: Unexpected token import
Then it means that you run webpack without es6 support.
Try this command instead:
webpack --watch --config "./webpack.config.server.babel.js" --colors --display-error-detailsNotice babel.js
If it works in your case then I'll update the README
If you didn't get it, just rename the webpack.config.server.js file to webpack.config.server.babel.js.
REAME updated. See the commit.
It doesn't appear to resolve the file...
C:\Files\Projects>webpack --watch --config "./config/webpack.config.server.babel.js" --colors --display-error-details
module.js:472
throw err;
^
Error: Cannot find module 'C:\Files\Projects\Project\config\webpack.config.server.babel.js'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at module.exports (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:80:13)
at Object. (C:\Users\User\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:39:40)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
See this:
http://stackoverflow.com/questions/31903692/how-to-use-es6-in-webpack-config
Try to install babel-register and run the command again.
I already have babel-register installed:( Am I supposed to add require("babel-register") to the top of the config file or somewhere else?
No, you shouldn't add anything to the top.
What happens if you rename the file to .....babel.js?
Then it appears to start reading the .babelrc I pulled from your sample project. If I do NOT include this file, I get the same error.
If it include it as-is, I get this error:
C:\Files\Project>webpack --watch --config "./config/webpack.config.server.babel.js" --colors --display-error-details
C:\Files\Project\node_modules\babel-core\lib\transformation\file\options\option-manager.js:176
throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
^
ReferenceError: Unknown plugin "add-module-exports" specified in "C:\Files\Projects\.babelrc" at 1
If I remove the plugins line and just leave the presets, I get the error:
C:\Files\Projects\node_modules\universal-webpack\build\server configuration.js:43
throw new Error('You must set "context" parameter in your Webpack configuration');
^
Error: You must set "context" parameter in your Webpack configuration
Well, ok, then set "context" parameter in your Webpack configuration
This error is coming from your file by the looks of it: "C:\Files\Projects\node_modules\universal-webpack\build\server configuration.js:43". I don't see where I am supposed to set this, and googling this error comes up with nothing.
Post your webpack configuration
So, what does the error you posted say?
The set context? I'm not sure, I don't know what context is, what to set it to, or how to set it?
You don't know what context is.
Refer to the manual.
https://webpack.github.io/docs/configuration.html#context
It says that it already has a default: process.cwd(). So it should be already set to the correct value. Regardless, I set it, and just received a new error:
C:\Files\Projects\node_modules\universal-webpack\build\server configuration.js:91
configuration.externals.push(function (context, request, callback) {
^
TypeError: configuration.externals.push is not a function
at server_configuration (C:\Files\Projects\node_modules\universal-webpack\build\server configuration.js:91:26)
process.cwd() could be a sensible default maybe, I'll see.
Share the repo reproducing this error and write down the commands for error reproduction.
I can have a look tomorrow.
Thank you, posted here: https://github.com/mr-e-/react-redux-starter-kit
Ok, I haven't looked at your project, but you can try it yourself with the newest version.
It possibly fixes the error above.
universal-webpack@0.1.43
It certainly seems like I'm getting closer.... thank you. Only now when I try to run the command "nodemon "./server/start-server" --watch "./build/server" I am receiving the error:
C:\Files\Projects\server\start-server.js:1
(function (exports, require, module, __filename, __dirname) { import { server } from 'universal-webpack'
^^^^^^
SyntaxError: Unexpected token import
Using .babel in the file name doesn't appear to help this time.
Yes, .babel extension won't work here.
Try this:
source/start-server.babel.js
// Enable ES6
// (ignoring all `build` and `node_modules` folders for speed-up)
require('babel-register')({ ignore: /\/(build|node_modules)\// })
// Run `source/start-server.js`
require('./source/start-server.js')nodemon "./source/start-server.babel" --watch "./build/server"Thank you very much! It still took quite a lot of tweaking to get this project to work but I finally got something rendering with the client side taking over after first render! You definitely saved me:D