Webpack's development server along with JSXHint is indicating that the constant named `$__0` has already been declared

After running the command below, it appears that jsxhint is analyzing the compiled files by webpack:

 webpack-dev-server --devtool eval --colors --progress --content-base ./build

The warnings I receive are as follows:

const '$__0' has already been declared. @ line <n> char <m>

This warning is generated for approximately 30% of the files in my application.

The warnings mention specific line and character numbers which correspond to the processed files accessible in Chrome DevTools under the

Sources Tab > webpack:// > . > relative-path-to-file
. Although I tried to locate these files on disk to exclude them from the pre-loader's list, the webpack-dev-server docs state that these files are served from memory.

I even went as far as deleting the entire application along with all node modules and cloning it again from the repository, but the issue persists.

The problem started after updating the node modules in the package.json file post-deletion of the node_modules folder. Reverting back to previous versions of all dependencies did not resolve the issue.

Contents of webpack.config.js

...

preLoaders: [
      {
        test: /\.jsx?$/,
        loader: 'jsxhint-loader?harmony',
        exclude: /node_modules/
      }
    ],
loaders: [
  {
    test: /\.jsx?$/,
    loader: "react-hot!babel",
    exclude: /node_modules/
  },

package.json

...

"devDependencies": {
  "autoprefixer-core": "^5.2.0",
  "babel-core": "^5.5.6",
  "babel-jest": "^5.2.0",
  "babel-loader": "^5.1.4",
  "css-loader": "^0.14.5",
  "file-loader": "^0.8.4",
  "html-webpack-plugin": "^1.5.0",
  "jest-cli": "^0.4.11",
  "json-loader": "^0.5.2",
  "jsx-loader": "^0.13.2",
  "jsxhint-loader": "^0.2.0",
  "less": "^2.5.1",
  "less-loader": "^2.2.0",
  "node-libs-browser": "^0.5.2",
  "postcss-loader": "^0.4.4",
  "react-hot-loader": "^1.2.7",
  "react-immutable-proptypes": "^1.0.0",
  "react-tools": "^0.13.3",
  "style-loader": "^0.12.3",
  "url-loader": "^0.5.6",
  "webpack": "^1.9.10",
  "webpack-dev-server": "^1.9.0"
},

Answer №1

The issue was successfully resolved by eliminating the use of the "?harmony" preloader argument. This argument was internally passed to reactTools, which then applied transformations to the source code before it reached jsx-loader. It appears that the two module versions (

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24564145475009504b4b485764140a15160a16">[email protected]</a>
and
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" >[email protected]</a>
) are not compatible for this specific usage scenario.

This adjustment has altered conversions such as var {foo} = this.props from turning into

$__0 = this.props; var foo = $__0.foo;
to
var _props = this.props; var foo = _props.foo;
. So far, there have been no issues with naming collisions after removing the "harmony" parameter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with npm? It's showing a "Response timeout" error when attempting to fetch data from https://registry.npmjs

Whenever I attempt to install a package, I encounter the following error message. I've exhausted all my options, can someone please assist me? npm ERR! Response timeout occurred when attempting to fetch https://registry.npmjs.org/base-config-proc ...

Installing Npm packages offline within a Docker container

I'm currently facing an issue while attempting to set up node-red-contrib-influxdb in a node-red docker container on a computer without internet access. My setup involves a Windows machine where I've installed node.js, along with the node-red-con ...

"Utilize React Spring's useTransition feature to effectively modify state updates within exiting

I'm currently utilizing react-spring to implement transitions within a list of text elements. The animation I have set up is shown in this gif: https://i.stack.imgur.com/pIbTx.gif However, there seems to be an issue where the text in the component th ...

What is the best way to establish numerous breakpoints on grid items within Material UI when utilizing React?

My Layout HOC has a Grid with 4 Widget components as Grid items. I want them to display differently based on screen size: On large screens: all 4 should be in 1 row On medium screens: 2 in a row, 2 columns On small screens: 1 widget takes full width, spr ...

What could be causing ConnectedProps to incorrectly infer the type?

My redux state is rooted and defined as: interface RootState { users: User[] } When working with components, I want to utilize ConnectedProps to generate the props type automatically from my state mapping and dispatch mapping: const mapState = (state: ...

Exploring tailored markup features in Next.js version 13

I am trying to optimize my website for social media sharing on platforms like WhatsApp. I have been experimenting with different methods to set custom markup in Next.js 13, but haven't achieved the desired outcome yet. Your help and insight are greatl ...

Error: Attempting to access property 'map' of an undefined value

I am currently working on setting up a unit test for the code snippet below. I have identified where the error is occurring: populateActionDropdown = (actionList) => { let actions = actionList.map(action => { if (action.Name != 'Sig ...

Is it possible to incorporate a placeholder within npm scripts and then dynamically replace it using the npm command?

Looking to update a specific part of an npm script without creating multiple scripts. The current script is as follows: "scripts": { "test:chrome": "set DEV_MODE=staging& npx testcafe \"chrome --start-fullscreen\" automation_suite/tests" } ...

React Native not refreshing state data

I'm working with a FlatList that contains the code snippet below: <FlatList ........... refreshing={this.state.refresh} onRefresh={() => { this.setState({ ...

Manipulate Nested Objects using an Array of Keys

Currently, I am developing a recursive form using React and MUI that is based on a nested object. Throughout this process, it is crucial for me to keep track of the previous keys as I traverse through the recursion. As users interact with the form and mak ...

Implementing a loading spinner in React Native until the component is fully mounted

I am dealing with a List component that takes some time to load. I am trying to display a spinner until the component is loaded and mounted, but all my attempts have been unsuccessful. Here is the approach I am currently attempting: class List extends R ...

Expanding the standard Material UI theme

Starting with the default material UI theme, I aim to create my own theme by utilizing createTheme(). My intention is to make minimal changes to a few properties in the existing theme. If I initiate it like this: const theme = createTheme({ palette: { ...

When a user clicks on a specific accordion, the icon for all accordions under mui control will change

My current task involves mapping over an array of data to render multiple controlled accordions. Each accordion should open/close individually upon clicking, but I'm facing an issue where the icons for all accordions are changing when I interact with ...

I need help customizing the text on the bubble head of the Slider component in Material UI. Can anyone provide instructions on

https://i.stack.imgur.com/disqW.png Is it possible to use words instead of numbers for the values? Can I choose which values have labels? Is there an option to add icons as well? Screenshot source: https://material-ui.com/components/slider/#customized-sl ...

Rendering on the server with a focus on the header

Can server side rendering be limited to only <head></head> data? I am exploring options similar to next.js: export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } Ba ...

Changes to a key value are not reflected in the array of objects

When making changes to input fields within an array of records that include Date and Text fields in a table, the data is not updating as expected. I am encountering issues where changing the Date input results in undefined Text values, and vice versa. My g ...

One way to iterate through the numbers 1 to 100 using React state would be to create a state

Is there a way to transition my react application's state from 1 to 100? Here is the current structure: this.state = { items: [ {id:1, name:'User 1', age:27}, {id:2, name:'User 2', age:30}, ...

I just finished crafting a dynamic line chart with d3.js within a React environment. However, I am now looking to add some personalized touches to enhance its appearance. Could you kindly review the details and code

I want to create a line chart using React and D3, similar to the one depicted in this image. Presently, I have partially implemented the chart with the code provided below. You can see it here. The code snippet I've developed so far is outlined as f ...

The Canvas .tsx file may have a null object and does not contain the getContext property within the type never

I'm currently working on developing a canvas component to integrate into my application. My ultimate goal is to enable users to draw on this canvas. The issue arises with the following line of code: const context = canvas.getContext("2d"); ...

Multer throws an error when uploading files due to an unexpected field issue

Hello, I am currently working on creating a file upload API using React and Express. To achieve this, I decided to use Muster. However, when I send an Axis request from the client, I encounter an error from the server. Error: MulterError: Unexpected fie ...