search

KodersLab / react-native-for-web

A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)
MIT License
255 stars 17 forks source link

Update npm and babel #20

Closed tiagojdf closed 2 years ago

tiagojdf commented 8 years ago

I have tried to install react-native-for-web in an empty react native project and I am having some trouble with it. My error is:

ERROR in ./index.ios.js
Module build failed: ReferenceError: [BABEL] /Users/tiagoferreira/Documents/projects/ryuutama/index.ios.js: Unknown option: base.optional

I am using node 5 and when I install the packages I get the following dependencies installed in the project:

"dependencies": {
    "react-native": "0.15.0"
  },
  "devDependencies": {
    "babel-core": "6.2.1",
    "babel-loader": "6.2.0",
    "babel-preset-es2015": "6.1.18",
    "react": "0.14.3",
    "react-dom": "0.14.3",
    "react-native-for-web": "0.1.7",
    "webpack": "1.12.9"
  }

This is my webpack.config

module.exports = {
  context: __dirname,
  entry: {
        'index.ios': ['./index.ios.js']
  },
  output: {
      path: __dirname + "/web",
      filename: "bundle.web.js"
  },
  // other webpack config
  resolve: {
    alias: {
      "react-native": "react-native-for-web"
    }
  },
  // setup the macro to resolve require("image!...")
  externals: [
    require("react-native-for-web/src/macro/image")
  ],
  module: {
        loaders: [
            { test: /\.js$/, loader: "babel-loader?optional[]=runtime&stage=1"}
        ]
  }
}
tiagojdf commented 8 years ago

It seems the problem comes from recent changes in babel. https://github.com/babel/babelify/issues/129 https://babeljs.io/blog/2015/10/31/setting-up-babel-6/

mattiamanzati commented 8 years ago

Should be solved! :)

tiagojdf commented 8 years ago

It seems you forgot to do an npm publish. The version you get by doing npm install does not contain your latest commit

tiagojdf commented 8 years ago

I have tried cloning the github project directly to my node_modules, install it and run the code from there and it is still not working. If it is not asking too much, could you write a tutorial/new example? I have been trying to just do:

react-native init awesomeProject
cd awesomeProject
npm install --save react-native-for-web

Making a webpack.config.js and run webpack.

Unfortunately it is not working. It would be awesome if you could take the time to explain how to do this in detail.

mattiamanzati commented 8 years ago

Can you please post the error here?

craone commented 8 years ago

Here is the error.Please help me.thank you .

Hash: 27ddb18f4462112be819
Version: webpack 1.12.11
Time: 549ms
            Asset     Size  Chunks             Chunk Names
 web/index.web.js  1.63 kB       0  [emitted]  index.ios
web/index.web.map  1.44 kB       0  [emitted]  index.ios
   [0] multi index.ios 28 bytes {0} [built] [1 error]
    + 1 hidden modules

ERROR in ./index.ios.js
Module build failed: ReferenceError: [BABEL] /Users/aone/Documents/Workspaces/Node/reactNative/index.ios.js: Unknown option: base.optional
    at Logger.error (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
    at OptionManager.init (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
    at File.initOptions (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transpile (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babel-loader/index.js:88:12)
 @ multi index.ios
mattiamanzati commented 8 years ago

If using babel >=6, you should replace "babel-loader?optional[]=runtime&stage=1" with the presets setting

craone commented 8 years ago

When I replace "babel-loader?optional[]=runtime&stage=1" with the presets setting

loaders: [
{
    test: /\.js$/, 
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
        "plugins":["transform-runtime"],
        "presets":["stage-1"]
    }
}
]

Here is the error.

aoneMacBook-Pro:reactNative aone$ webpack
Hash: 27ddb18f4462112be819
Version: webpack 1.12.11
Time: 668ms
            Asset     Size  Chunks             Chunk Names
 web/index.web.js  1.64 kB       0  [emitted]  index.ios
web/index.web.map  1.44 kB       0  [emitted]  index.ios
   [0] multi index.ios 28 bytes {0} [built] [1 error]
    + 1 hidden modules

ERROR in ./index.android.js
Module build failed: SyntaxError: /Users/aone/Documents/Workspaces/Node/reactNative/index.android.js: Unexpected token (18:6)
  16 |   render: function() {
  17 |     return (
> 18 |       <View style={styles.container}>
     |       ^
  19 |         <Text style={styles.welcome}>
  20 |           Welcome to React Native!
  21 |         </Text>
    at Parser.pp.raise (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1413:13)
    at Parser.pp.unexpected (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2895:8)
    at Parser.pp.parseExprAtom (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:746:12)
    at Parser.pp.parseExprSubscripts (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:501:19)
    at Parser.pp.parseMaybeUnary (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:481:19)
    at Parser.pp.parseExprOps (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:412:19)
    at Parser.pp.parseMaybeConditional (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:394:19)
    at Parser.pp.parseMaybeAssign (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:357:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:819:26)
    at Parser.pp.parseExprAtom (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:705:19)
    at Parser.pp.parseExprSubscripts (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:501:19)
    at Parser.pp.parseMaybeUnary (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:481:19)
    at Parser.pp.parseExprOps (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:412:19)
    at Parser.pp.parseMaybeConditional (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:394:19)
    at Parser.pp.parseMaybeAssign (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:357:19)
    at Parser.pp.parseExpression (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:321:19)
    at Parser.pp.parseReturnStatement (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2094:26)
    at Parser.pp.parseStatement (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1882:19)
    at Parser.pp.parseBlockBody (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2282:21)
    at Parser.pp.parseBlock (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2263:8)
    at Parser.pp.parseFunctionBody (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1122:22)
    at Parser.pp.parseFunction (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2394:8)
    at Parser.pp.parseFunctionExpression (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:756:17)
    at Parser.pp.parseExprAtom (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:718:19)
    at Parser.pp.parseExprSubscripts (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:501:19)
    at Parser.pp.parseMaybeUnary (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:481:19)
    at Parser.pp.parseExprOps (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:412:19)
    at Parser.pp.parseMaybeConditional (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:394:19)
    at Parser.pp.parseMaybeAssign (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:357:19)
    at Parser.pp.parseObjPropValue (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1013:99)
 @ multi index.ios

Did I replace wrong?

mattiamanzati commented 8 years ago

You are missing the react preset

----- Messaggio originale ----- Da: "aone" notifications@github.com Inviato: ‎18/‎01/‎2016 05:43 A: "KodersLab/react-native-for-web" react-native-for-web@noreply.github.com Cc: "mattiamanzati" manzati.mattia@gmail.com Oggetto: Re: [react-native-for-web] Update npm and babel (#20)

When I replace "babel-loader?optional[]=runtime&stage=1" with the presets setting loaders: [ { test: /.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { "plugins":["transform-runtime"], "presets":["stage-1"] } } ]Here is the error. aoneMacBook-Pro:reactNative aone$ webpack Hash: 27ddb18f4462112be819 Version: webpack 1.12.11 Time: 668ms Asset Size Chunks Chunk Names web/index.web.js 1.64 kB 0 [emitted] index.ios web/index.web.map 1.44 kB 0 [emitted] index.ios [0] multi index.ios 28 bytes {0} [built] [1 error]

ERROR in ./index.android.js Module build failed: SyntaxError: /Users/aone/Documents/Workspaces/Node/reactNative/index.android.js: Unexpected token (18:6) 16 | render: function() { 17 | return (

18 | | ^ 19 | 20 | Welcome to React Native! 21 | at Parser.pp.raise (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1413:13) at Parser.pp.unexpected (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2895:8) at Parser.pp.parseExprAtom (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:746:12) at Parser.pp.parseExprSubscripts (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:501:19) at Parser.pp.parseMaybeUnary (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:481:19) at Parser.pp.parseExprOps (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:412:19) at Parser.pp.parseMaybeConditional (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:394:19) at Parser.pp.parseMaybeAssign (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:357:19) at Parser.pp.parseParenAndDistinguishExpression (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:819:26) at Parser.pp.parseExprAtom (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:705:19) at Parser.pp.parseExprSubscripts (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:501:19) at Parser.pp.parseMaybeUnary (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:481:19) at Parser.pp.parseExprOps (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:412:19) at Parser.pp.parseMaybeConditional (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:394:19) at Parser.pp.parseMaybeAssign (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:357:19) at Parser.pp.parseExpression (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:321:19) at Parser.pp.parseReturnStatement (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2094:26) at Parser.pp.parseStatement (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1882:19) at Parser.pp.parseBlockBody (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2282:21) at Parser.pp.parseBlock (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2263:8) at Parser.pp.parseFunctionBody (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1122:22) at Parser.pp.parseFunction (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:2394:8) at Parser.pp.parseFunctionExpression (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:756:17) at Parser.pp.parseExprAtom (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:718:19) at Parser.pp.parseExprSubscripts (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:501:19) at Parser.pp.parseMaybeUnary (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:481:19) at Parser.pp.parseExprOps (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:412:19) at Parser.pp.parseMaybeConditional (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:394:19) at Parser.pp.parseMaybeAssign (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:357:19) at Parser.pp.parseObjPropValue (/Users/aone/Documents/Workspaces/Node/reactNative/node_modules/babylon/index.js:1013:99) @ multi index.iosDid I replace wrong? — Reply to this email directly or view it on GitHub.

craone commented 8 years ago

with the react preset setting

loaders: [
    {
        test: /\.js$/, 
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
            "plugins":["transform-runtime"],
            "presets":["react","stage-1"]
        }
    }
]

Error is:

aoneMacBook-Pro:reactNative aone$ webpack
Hash: 87ddb65e0feca4928b46
Version: webpack 1.12.11
Time: 897ms
            Asset     Size  Chunks             Chunk Names
 web/index.web.js  3.01 kB       0  [emitted]  index.ios
web/index.web.map  3.45 kB       0  [emitted]  index.ios
   [0] multi index.ios 28 bytes {0} [built]
    + 2 hidden modules

ERROR in ./~/react-native-for-web/src/index.js
Module parse failed: /Users/aone/Documents/Workspaces/Node/reactNative/node_modules/react-native-for-web/src/index.js Line 5: Unexpected token ...
You may need an appropriate loader to handle this file type.
| module.exports = {
|   // export react methods as a reference
|   ...React,
|   
|   // export the classes
 @ ./index.android.js 7:12-35
ghost commented 8 years ago

Try with "react", "es2015","stage-1"

----- Messaggio originale ----- Da: "aone" notifications@github.com Inviato: ‎19/‎01/‎2016 02:09 A: "KodersLab/react-native-for-web" react-native-for-web@noreply.github.com Oggetto: Re: [react-native-for-web] Update npm and babel (#20)

with the react preset setting loaders: [ { test: /.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { "plugins":["transform-runtime"], "presets":["react","stage-1"] } } ]Error is: aoneMacBook-Pro:reactNative aone$ webpack Hash: 87ddb65e0feca4928b46 Version: webpack 1.12.11 Time: 897ms Asset Size Chunks Chunk Names web/index.web.js 3.01 kB 0 [emitted] index.ios web/index.web.map 3.45 kB 0 [emitted] index.ios [0] multi index.ios 28 bytes {0} [built]

ERROR in ./~/react-native-for-web/src/index.js Module parse failed: /Users/aone/Documents/Workspaces/Node/reactNative/node_modules/react-native-for-web/src/index.js Line 5: Unexpected token ... You may need an appropriate loader to handle this file type. module.exports = { // export react methods as a reference ...React,
// export the classes

@ ./index.android.js 7:12-35— Reply to this email directly or view it on GitHub.

craone commented 8 years ago

I've tried, but still the error.