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

@babel/plugin-proposal-object-rest-spread not work even i was config .babelrc correctly #11034

Open
yangxiaolin opened this issue Jan 21, 2020 · 10 comments

Comments

@yangxiaolin
Copy link

@yangxiaolin yangxiaolin commented Jan 21, 2020

when i use react with express do ssr, i config webpack for node and client.
but when i use object spread operator, node throw error.

const htmlStr = ReactDomServer.renderToString(
  16 |         <div id="main">
> 17 |           <Provider stores={...stores}>
     |                             ^
  18 |             <App stores={Object.values(stores)} />
  19 |           </Provider>
  20 |         </div>

here is my .babelrc file

{
  "presets": [
            ["@babel/env", {
                "modules": "commonjs",
                "targets": {
                    "node": "current"
                }
            }],
            "@babel/react",
            "@babel/preset-typescript"
        ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-transform-modules-commonjs"
  ]
}

and there is my webpack config

const path = require('path');

const isDev = process.env.production !== 'production';

module.exports = {
    mode: isDev ? 'development' : 'production',
    target: 'node',
    entry: path.resolve(__dirname, '../app.js'),
    output: {
        path: path.join(__dirname, '../dist/server'),
        filename: 'app.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader'
                }
            }
          ]
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
        alias: {
            core: path.join(__dirname, '../core'),
            src: path.join(__dirname, '../src')
        }
    },
    node: {
        console: false,
        __filename: true,
        __dirname: true
    }
}

os: Mac catalina 10.15.2
node: v12.13.0

@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Jan 21, 2020

Hey @yangxiaolin! 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 nicolo-ribaudo commented Jan 21, 2020

  1. That's not an object, that's JSX spread 😉.
  2. What is your project directories structure?
  3. Can you try renaming .babelrc to babel.config.json, and setting rootMode: upward? My guess is that your webpack config file is not in your root directory, and the Babel config file isn't correctly found.
@yangxiaolin

This comment has been minimized.

Copy link
Author

@yangxiaolin yangxiaolin commented Jan 21, 2020

@nicolo-ribaudo thanks for your answer.

i was rename .babelrc to babel.config.json and setting rootMode: upward and remove webpack config file to same directory. just like this

- root
   babel.config.json
   webpack.js

but throw the same error(QAQ).

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Jan 21, 2020

What is the path of the file which is throwing, and what is the full stack trace?

@yangxiaolin

This comment has been minimized.

Copy link
Author

@yangxiaolin yangxiaolin commented Jan 21, 2020

this is the full stack trace

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/xxxx/Study/express-app/core/AppHandler.js: Unexpected token (17:28)

  15 |      const htmlStr = ReactDomServer.renderToString(
  16 |         <div id="main">
> 17 |           <Provider stores={...stores}>
     |                             ^
  18 |             <App stores={Object.values(stores)} />
  19 |           </Provider>
  20 |         </div>
    at Object.raise (/Users/xxxx/Study/express-app/node_modules/@babel/parser/lib/index.js:7013:17)
    at Object.unexpected (/Users/xxxx/Study/express-app/node_modules/@babel/parser/lib/index.js:8384:16)
    at Object.parseExprAtom (/Users/xxxx/Study/express-app/node_modules/@babel/parser/lib/index.js:9639:20)
    at Object.parseExprAtom (/Users/xxxx/Study/express-app/node_modules/@babel/parser/lib/index.js:4116:20)
    at Object.parseExprSubscripts (/Users/xxxx/Study/express-app/node_modules/@babel/parser/lib/index.js:9219:23)
@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Feb 5, 2020

@yangxiaolin Can you share the repository?

@jacksonStone

This comment has been minimized.

Copy link

@jacksonStone jacksonStone commented Feb 6, 2020

Broken for me as well. Updating all Babel libs just now and it started not working. Just seems to not transform. My ...'s remain! :) No errors thrown by babel. It's as if my options for the plugin are simply ignored. (Closed source so unable to share unfortunately.) Will try rolling back versions

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Feb 6, 2020

@jacksonStone Can you at least share your config, its path, and the path of the file which is not being correctly transpiled?

@jacksonStone

This comment has been minimized.

Copy link

@jacksonStone jacksonStone commented Feb 6, 2020

I'll see if I can make a minimal repro

@jacksonStone

This comment has been minimized.

Copy link

@jacksonStone jacksonStone commented Feb 6, 2020

I think I was too quick to jump on the bandwagon. Fairly straightforward repro attempt in a much simpler project worked as expected with my combination of dependencies. Probably a false alarm on my part. Sorry all

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.