2017-04-02 67 views
1

我有一個React項目,當我在chrome中打開它的路徑時在本地工作。然而,當試圖部署到Heroku的(或運行npm start),我得到這個錯誤:反應:運行npm時意外的令牌導入開始

import React from 'react'; 
^^^^^^ 
SyntaxError: Unexpected token import 

我已經沖刷的StackOverflow和Heroku的支持頁面無濟於事。

這裏是我的package.json:

{ 
    "name": "my-app-name", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "webpack": "webpack", 
    "start": "node ./my-app-name.jsx", 
    "postinstall": "webpack" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-cli": "^6.24.0", 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015": "^6.24.0", 
    "babel-preset-react": "^6.23.0", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.3", 
    "react-router": "^4.0.0", 
    "react-router-dom": "^4.0.0", 
    "redux": "^3.6.0", 
    "webpack": "^2.3.2" 
    }, 
    "engines": { 
    "node": "6.2.1", 
    "npm": "4.4.4" 
    } 
} 

而且我webpack.config.js:

module.exports = { 
    entry: "./my-app-name.jsx", 
    output: { 
    filename: "./bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: [/\.jsx?$/, /\.js?$/], 
     exclude: /(node_modules)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ["*",".js", ".jsx" ] 
    } 
}; 

我的節點和NPM版本中的package.json列出的相同。我進行了三重檢查,確保所有內容都已正確安裝,並且其他StackOverflow答案都沒有幫助。當然,它必須是巴貝爾的某種問題(由於它不承認import),但我無法弄清楚它是什麼。

回答

0

my-app-name.jsx不是編譯構建。而不是node ./my-app-name.jsx,你需要指出節點開始像這樣的運輸生成node ./bundle.js

+0

我改變了它'node./ bundle.js'現在我得到一個'ReferenceError:document is not defined'在我的包中on'document.addEventListener' –

+0

我懷疑代碼沒有在瀏覽器環境中運行。也許github回購所以我可以進一步幫助你? – sammkj

+0

如果您需要同時支持瀏覽器和節點j,您將不得不以不同方式構造代碼,針對每個環境,甚至只需使用條件檢查來打包環境特定的函數,這也可能很有用:https:// www。 npmjs.com/package/is-dom – corse32