节点/阵营：节点未能解析同构组件

工具ES6语法：节点5.4.0，快速4.13.4，阵营0.14.7，的WebPack 14年1月12日节点/阵营：节点未能解析同构组件

问题：

在过去几个月里，Node和Babel都进行了主要更新，因此我无法理顺如何配置Node来解析ES6语法中编写的同构组件。

错误：

客户端呈现（通过捆绑的WebPack）的工作，但服务器端渲染过程中，我得到这个问题

进口MyComponent的从” ./components/ ^^ ^^^^ 语法错误：意外的令牌进口

背景 - 事情我做：

1）更新的Babel

我认为最新版本的Node本来就是要解析导入的ES6语法，但是因为它没有想到将babel更新为 6.x会做到这一点。

所以我更新了babel-loader 6.2.4和其他依赖于它的模块。

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

2）创建一个.babelrc文件

我不知道到底是什么这个文件是为但由于许多人使用它，并提到我想我扔在那里。

.babelrc

{ 
    "presets":["react","es2015"] 

}

3）更新的WebPack查询

我想，这只会影响客户端渲染，但我会提到，我做了更新通过在“添加预设”。

webpack.config.js

module.exports = { 
    entry: "./js/app.js", 
    output: { 
    filename: "./public/js/bundle.js" 
    }, 
    debug: true, 
    devtool: "source-map", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query:{ 
      presets:['react','es2015'] 
     } 
     } 
    ] 
    }, 

};

只是为了柜面它可以帮助：

这里是我的我的依赖关系的列表。

{ 
    "name": "My App", 
    "version": "0.0.1", 
    "description": "Iso React Components", 
    "main": "app.js", 
    "dependencies": { 
    "classnames": "^2.1.3", 
    "express": "^4.13.3", 
    "express-handlebars": "~1.1.0", 
    "flux": "^2.0.0", 
    "history": "^1.13.0", 
    "html-webpack-plugin": "^2.9.0", 
    "keymirror": "~0.1.0", 
    "mongodb": "^2.1.3", 
    "node-jsx": "~0.12.4", 
    "object-assign": "^1.0.0", 
    "react": "^0.14.0", 
    "react-dom": "^0.14.0", 
    "react-router": "^2.0.0", 
    "react-scrollbar": "0.3.1", 
    "reactify": "^1.1.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.6.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "envify": "^3.0.0", 
    "jest-cli": "^0.4.3", 
    "node-libs-browser": "^0.5.2", 
    "uglify-js": "~2.4.15", 
    "webpack": "^1.12.1" 
    } 
}

问：

一旦我换了所有的“进口”语法节点需要声明我是能够成功地使服务器端。但我真的不喜欢避免ES6让React代码节点/浏览器兼容的想法。我错过了什么？

来源

2016-03-03 Nick Pineda

看看Webpack Isomorphic Tools。这是一个可以添加到webpack配置的助手模块，以便您可以在节点中执行ES6导入或常规旧需求，并且它会执行一些魔术，并且需求将成功解析。

本质上你做了一个同构配置（这是在网站上详细），然后使用同构webpack插件，你可以使用它来呈现您的资产（JavaScript，样式等）客户端。

编辑：您可能遇到的一些错误的警告：在节点中，像window对象这样的东西不存在，所以如果您的任何节点模块使用它，它会在您尝试渲染时引发异常服务器上的特定库。只需将窗口对象和其他任何你需要的东西填满即可。

来源

2016-03-03 03:23:00 barndog

Babel require hook可以帮助node.js自动解析ES6语法，同时require文件。

只要运行命令

npm install babel-register --save

，并添加以下到您的输入文件的第一行

require("babel-register");

来源

2016-03-03 05:08:09 nof

和''这么多不同的'要求（“通天塔核心/注册”） ;'''？我尝试在我的server.js文件中使用'require'（'babel-core/register'）;并且它没有帮助。 –

好吧试着安装了“babel-register”，并且在导入时出现同样的错误，因为express试图调用'''React.createFactory（require（'./js/components/MyComponent.react'））;'''这里是错误 - ** SyntaxError：意外的令牌导入在exports.runInThisContext（vm.js：53：16）... ** –

哦，我应该加我也把'''require（“babel-register”）; '''在我需要调用React Factory方法的路由之前，在server.js文件中。 –

节点/阵营：节点未能解析同构组件

回答

相关问题