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

Builder-react-jsx: Inconsistent string literal value normalization across different platforms #10426

Open
uzer-ua opened this issue Sep 10, 2019 · 1 comment

Comments

@uzer-ua
Copy link

commented Sep 10, 2019

Bug Report

Current Behavior
Babel-helper-builder-react-jsx modifies string literal attribute values. Though it itself is already not nice, but even more, it does it in inconsistent way.

Input Code

index.js

import React from 'react'

const style = {
  height: '100%',
}

const svgStyle = {
  fill: 'currentColor',
}

const toTitle = (error, componentStack) => `${error.toString()}\n\nThis is located at:${componentStack}`

const ErrorBoundaryFallbackComponent = ({ componentStack, error }) => (
  <div style={style} title={toTitle(error, componentStack)}>
    <svg style={svgStyle} viewBox="0 0 24 24" preserveAspectRatio="xMidYMid">
      <path
        d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,
        12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,
        12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,
        9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,
        8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,
        15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,
        17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z"
      />
    </svg>
  </div>
)

export default ErrorBoundaryFallbackComponent

index.test.js

import React from 'react'
import { shallow } from "enzyme"

import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"

configure({ adapter: new Adapter() })

import {default as Fallback} from './'

describe('<Fallback />', () => {
  test('renders error correctly', () => {
    const props = { componentStack: 'dummy stack that goes on forever', error: 'crash, burn, die' }
    const tree = shallow(React.createElement(Fallback, props))

    expect(tree.render()).toMatchSnapshot()
  })
})

Due to this line babel loader produces different generated code on Windows and *nix machines because of different line endings (CRLF vs LF).
And even though it is not a big deal itself and does not impact code functionality, it causes different snapshots generated by Jest on different OSs.

Expected behavior/code
It should either not modify attribute value or do it in platform-independent way.

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

module.exports = {
	presets: [
		['@babel/preset-env', {
			targets: {
				node: 'current',
			}
		}],
		"@babel/preset-react"
	]
}
"dependencies": {
    "react": "16.5.2",
    "react-dom": "16.5.2",
    "react-hot-loader": "4.3.12",
    "react-radio-group": "3.0.3"
  },
  "devDependencies": {
    "@babel/core": "7.1.2",
    "@babel/node": "7.0.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-react": "7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-engine-plugin": "0.2.1",
    "babel-eslint": "8.2.6",
    "babel-jest": "^23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-transform-ensure-ignore": "0.1.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-register": "^6.26.0",
    "enzyme": "^3.4.1",
    "enzyme-adapter-react-16": "1.6.0",
    "enzyme-to-json": "3.3.4",
    "jest": "23.6.0",
    "jest-fetch-mock": "1.6.6",
    "react-test-renderer": "^16.5.0",
    "snapshot-diff": "0.4.0"
  },
  "jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },

npm run jest

Environment

  • Babel version: 7.1.2
  • Node 8.12.0/npm 6.4.1
  • Windows 7, Windows 10, Debian 9
  • Monorepo: no
  • How you are using Babel: loader

Possible Solution
Do not replace \n in attribute value or replace additionally \r\n

Additional context/Screenshots
screen1182
screen1183
screen1184
These are screenshots of debug run on Windows using file with LF endings. In case of CRLF value would remain line breaks.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Sep 10, 2019

Hey @uzer-ua! 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.

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