Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-native + typescript + bable 7 stuck on stories parsing transform and spread #9661

Open
Rainafter opened this Issue Mar 12, 2019 · 9 comments

Comments

Projects
None yet
3 participants
@Rainafter
Copy link

Rainafter commented Mar 12, 2019

Bug Report

I'm experimenting with react-native + typescript + bable 7
I keep getting an infinite error on storybook not recongizing spread operator.
So I added the all plugin to support it.
However no matter what combination I use it always stuck on bundling failed: SyntaxError: ../../../stories.tsx: Spread children are not supported in React.
Can someone help me out a little?

Current Behavior
A clear and concise description of the behavior.

ts.config

"compilerOptions": {
    /* Basic Options */
    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
      "es2018",
      "dom"
    ],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react-native",    
    "rootDirs": [],       

package.json

"devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@babel/plugin-syntax-class-properties": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
    "@babel/plugin-transform-async-to-generator": "^7.3.4",
    "@babel/plugin-transform-flow-strip-types": "^7.3.4",
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/plugin-transform-object-assign": "^7.2.0",
    "@babel/plugin-transform-react-display-name": "^7.2.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.3.4",
    "@babel/plugin-transform-spread": "^7.2.2",
    "@babel/plugin-transform-typescript": "^7.3.2",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/runtime": "^7.2.0",
    "@storybook/addon-actions": "^5.0.0",
    "@storybook/addon-knobs": "^5.0.0",
    "@storybook/addon-links": "^5.0.0",
    "@storybook/addons": "^5.0.0",
    "@storybook/react-native": "^4.1.14",
    "@types/babel-core": "^6.25.5",
    "@types/jest": "^23.3.1",
    "@types/react": "^16.4.9",
    "@types/react-native": "^0.57.24",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-knobs": "^4.0.2",
    "@types/storybook__addon-links": "^3.3.4",
    "@types/storybook__addon-storyshots": "^3.4.8",
    "@types/storybook__react": "^4.0.1",
    "@types/storybook__react-native": "^3.0.4",
    "@types/uri-templates": "^0.1.29",
    "awesome-typescript-loader": "^5.2.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-react-native": "^4.0.1",
    "core-js": "^2.6.5",
    "install": "^0.12.2",
    "jest": "23.5.0",
    "metro-react-native-babel-preset": "^0.53.0",
    "npm": "^6.9.0",
    "prop-types": "^15.6.2",
    "react-dom": "16.7.0",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "16.6.3",
    "ts-jest": "^23.10.5",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.0",
    "tslint-immutable": "^4.6.0",
    "tslint-react": "^3.6.0",
    "typescript": "^3.2.2"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "^.+\\.jsx$": "babel-jest",
      "^.+\\.(ts|tsx)?$": "ts-jest"
    },

Expected behavior/code
A clear and concise description of what you expected to happen (or code).

Babel Configuration (.babelrc, package.json, cli command)

.babelrc

{
    "presets": [
        // "react-native",
        // ["@babel/preset-react"],
        // ["@babel/preset-env", {
        //     "targets": {
        //     "electron": "3.0"
        //     }
        // }],
        // "@babel/preset-react",
        "@babel/preset-flow",
        "@babel/preset-typescript",
        "module:metro-react-native-babel-preset",  // does not work with the rest spread plugin
    ],
    "plugins": [
        // "require-context-hook",
        // "@babel/plugin-transform-typescript",
        // "@babel/plugin-transform-spread",
        // "@babel/plugin-syntax-jsx",
        // "@babel/plugin-transform-react-jsx",
        // "@babel/plugin-transform-react-display-name",
        
        ["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        "babel-plugin-transform-object-rest-spread",
        "babel-plugin-syntax-async-functions",
        "@babel/plugin-syntax-class-properties",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-object-rest-spread",
        "@babel/plugin-proposal-object-rest-spread",
        // "@babel/plugin-transform-runtime",
        // "@babel/plugin-transform-async-to-generator",
        // "@babel/plugin-transform-modules-commonjs",
        // "@babel/plugin-transform-object-assign",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator",
        // "@babel/plugin-syntax-dynamic-import",
       
    ],
}

Environment

  • Babel version(s): [e.g. v7.3.4]
  • Node/npm version: [e.g. Node 9/npm 5]
  • OS: [e.g. OSX 10.13]
  • How you are using Babel: [e.g.]

Possible Solution

Additional context/Screenshots

@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Mar 12, 2019

Hey @Rainafter! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 12, 2019

What is your directory structure? (Showing babelrc, package.json and the file which throws).

@Rainafter

This comment has been minimized.

Copy link
Author

Rainafter commented Mar 12, 2019

@nicolo-ribaudo

  • .babelrc
  • package.json
  • tsconfig.json
  • rn-cli.config.js . // uses eact-native-typescript-transformer
  • storybook
    • .babelrc
    • index.js
    • addons.js
    • rn-addons.js
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 12, 2019

Where is stories.tsx?

@Rainafter

This comment has been minimized.

Copy link
Author

Rainafter commented Mar 12, 2019

@nicolo-ribaudo
Hi,

  • src
    • common
      • componentAGroup
        • componentA
          -stores.tsx
  • .babelrc
  • package.json
  • tsconfig.json
  • rn-cli.config.js . // uses eact-native-typescript-transformer
  • storybook
    • .babelrc
    • index.js
    • addons.js
    • rn-addons.js
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 12, 2019

Ok, which file is loading stories.tsx? It should be in a subdirectory of componentA. Also, which one of those two is the babelrc you posted?

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 12, 2019

Oh I just noticed that it isn't a configuration problem.
You are using somewhere in that file

<foo>
  {...bar}
</foo>

but it should be

<foo>
  {bar}
</foo>

Posting the contents of stories.tsx might help.

@Rainafter

This comment has been minimized.

Copy link
Author

Rainafter commented Mar 13, 2019

@nicolo-ribaudo
Thanks so much
I do have one place looks strange

That stories is

const myChildren: any = [
    <View style={{ backgroundColor: "#333", flex: 1, margin: 5 }} key={1} />,
    <View style={{ backgroundColor: "#333", flex: 1, margin: 5 }} key={2} />,
];
const addStory = (props: any): any => (): JSX.Element => (
    <ComponentB>
        {...myChildren}
    </ComponentB>
);

But Still for something like below

import type {NativeComponent} from 'ReactNative'; 

The file is loaded at

/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js:

babel is not able to parse it with my current setting with transfrom typescript plugin

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 13, 2019

Oh if you want to transpile mode_ modules you have to use a top-level babel.config.js file instead of .babelrc.
You can read about it at https://babeljs.io/docs/en/config-files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.