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

Syntax doubling with .babelrc while trying to use babel-plugin-proposal-class-properties #10968

Open
benburch93 opened this issue Jan 7, 2020 · 7 comments
Labels

Comments

@benburch93
Copy link

@benburch93 benburch93 commented Jan 7, 2020

All,

I am trying to include babel-plugin-proposal-class-properties in my code bundle, but I get the following error;

2020-01-07 08:19:31.593 [error][tid:NSOperationQueue 0x2817acc40 (QOS: UNSPECIFIED)][RCTCxxBridge.mm:414] Failed to load bundle(http://169.254.99.36:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(index.js: Cannot find module 'babel-plugin-plugin-proposal-class-properties' from '/Users/bburch/Projects/systems/SystemsDockConfig' - Did you mean "@babel/plugin-proposal-class-properties"? (null))

My .babelrc looks like;

{ "presets": [
"@babel/env",
"@babel/react", ], "plugins": ["proposal-class-properties",] }
I also have tried this syntax;

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
In either case, somehow the "plugin" part of the package name is being doubled and of course the module is not found when that happens.

My package.json;

{
"name": "SystemsDockConfig",
"version": "0.0.2",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-syntax-object-rest-spread": "^7.7.4",
"@babel/preset-env": "^7.7.7",
"buffer": "^5.0.7",
"eslint": "^6.8.0",
"eventemitter3": "^4.0.0",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-native": "0.59.10",
"react-native-ble-plx": "1.1.0",
"react-native-camera": "^1.0.0",
"react-native-router-flux": "^4.0.6",
"react-native-version-number": "^0.3.1",
"react-native-wheel-datepicker": "^2.1.8"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/runtime": "^7.6.3",
"babel-jest": "^24.9.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}

Thank you for any help - I'm stuck.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

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

Hey @benburch93! 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 nicolo-ribaudo transferred this issue from babel/website Jan 7, 2020
@babel babel deleted a comment from babel-bot Jan 7, 2020
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

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

Could you also try @babel/proposal-class-properties? (even if your second config should already work)

@benburch93

This comment has been minimized.

Copy link
Author

@benburch93 benburch93 commented Jan 9, 2020

Nicolo-ribaudo: Indeed that silenced the syntax-doubling. This is quite different from the expected.

But I now have this happening;

error:(index.js: Cannot find module '@babel/preset-react'

In spite of the module being in node-modules, and I wonder if there is some related failure or misconfiguration changing the way that name is being searched for?

I'm really not an idiot, I promise, but I'm an embedded systems guy and sort of out of my element here.

Thanks so much!

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

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

I have to admit that I have no idea about what could cause this bug with the other syntaxes you tried. Babel's logic is something like "only add plugin- if it's not already there", so even if the logic runs twice it shouldn't be duplicated.

Anyway, try running npm install --save-dev @babel/preset-react or yarn add --dev @babel/preset-react. It should be found if node_modules/@babel/preset-react exists, but not having it in your package.json doesn't help.

Also, all the @babel/* packages in package.json should be moved to devDependencies, except for @babel/runtime which should be in dependencies.

@benburch93

This comment has been minimized.

Copy link
Author

@benburch93 benburch93 commented Jan 14, 2020

Thank you! I will give this a try today.

@benburch93

This comment has been minimized.

Copy link
Author

@benburch93 benburch93 commented Jan 14, 2020

OK, I did the yarn install, and modified the package.json thus;

{
  "name": "SystemsDockConfig",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/runtime": "^7.6.3",
    "buffer": "^5.0.7",
    "eslint": "^6.8.0",
    "eventemitter3": "^4.0.0",
    "native-base": "^2.13.8",
    "react": "^16.8.3",
    "react-native": "^0.59.10",
    "react-native-ble-plx": "1.1.0",
    "react-native-camera": "^1.0.0",
    "react-native-router-flux": "^4.0.6",
    "react-native-version-number": "^0.3.1",
    "react-native-wheel-datepicker": "^2.1.8"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@babel/core": "^7.0.0-beta.41",
    "@babel/preset-react": "^7.8.3",
    "babel-jest": "^24.9.0",
    "babel-cli": "^7.0.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }

}

Now I get an error "require not found" - So not sure if this is a different error and the previous issues are resolved, or if this is a new error masking the previous ones.

Still hunting for what caused that. I see solutions that want me to do a pod install, only this project I am maintaining was not a cocoapods project. So I assume something is mis-installed but I don't know what as yet.

Thanks for the help!!!

@benburch93

This comment has been minimized.

Copy link
Author

@benburch93 benburch93 commented Jan 17, 2020

Worked through that and your solution about removing the "plugin-" worked as did your suggestion about the structor of the package.json.

So, the workaround is good, but the bug exists.

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