Sourcemaps don't show original files in CRA

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• How to import rails engine assets in application.scss of rails application

  I have a rails engine that is specifically created for storing assets. I have assets in rails engine gem as follows:

  app/assets/stylesheets/stack/atoms/_all.scss
  app/assets/stylesheets/stack/molecules/_all.scss
  

  I created engine.rb file in lib folder as follows: lib/stack/engine.rb

  module Stack
    class Engine < ::Rails::Engine
    end
  end
  

  I mounted stack gem in rails application

  mount Stack::Engine, at: "/stack"
  

  I am now trying to import those scss files from rails engine into the rails application as follows

  application.scss

  /*
   *= require stack/atoms/all
   *= require stack/molecules/all
   */
  
  // Stack Atoms
  @import 'stack/atoms/all';
  
  // Stack Molecules
  @import 'stack/molecules/all';
  
  @import 'variables'
  

  Now when I run assets:precompile I get error:

    app/assets/stylesheets/application.scss 9:9  root stylesheet
  SassError: SassError: Can't find stylesheet to import.
    ╷
  9 │ @import 'stack/atoms/all';
  

  What am I missing so I can import css files from rails engine into the application.scss?

  I also tried to do following in rails gem but still no luck.

  module Stack
    class Engine < ::Rails::Engine
    isolate_namespace Stack
      initializer "stack.assets.precompile" do |app|
        app.config.assets.precompile += %w( stack/atoms/_all.scss )
      end
    end
  end
  
• How to trigger hmr when a virtual module updated in webpack 4?

  Have a package, used webpack-virtual-modules to write a virtual module, when I modified my code, this module will be auto updated, but broswer can't replaced.

  I try to write to local disk, it can triggered hmr when modified, but this module needs to be edited in real time.
• is there any difference between this commands to install webpack? "npm install webpack webpack-cli --save-dev" & "npm install -D webpack webpack-cli "

  Hello everyone I´m learning about webpack and i saw this two ways to install it, I was wondering if there is any difference between this two ways:

  this one is from webpack documentation

  "npm install webpack webpack-cli --save-dev"

  And this other I just saw it in a youtube tutorial

  "npm install -D webpack webpack-cli "

  thanks for your help and if there is any difference pleace let me know which is the best of both.
• Why I get this error after run 'yarn start'?

  I have already run my projects without error with yarn. But now, it gives the below error(I tried for multiple projects):

  

  What's the problem?
• CRA - Jest mock loses the mock implementation

  I'm trying to use __mocks__.

  src/shared/state/use-some-state.ts

  export const useSomeState = () => {
    return { value: 6 };
  }
  

  which is exported from an index.ts file:

  export * from './use-some-state`
  

  And I've created a mock file like this:

  src/shared/state/__mocks__/index.ts

  export const useSomeState = jest.fn(() => ({value: 1}))
  

  When this mock is used in a component's test the mock implementation is undefined:

  src/modules/my-component.tsx

  export const MyComponent = () => {
    const { value } = useSomeState();
    return <div>{value}</div>
  }
  

  The test for MyComponent looks like this: my-component.test.tsx

  import React from 'react';
  import { render } from '@testing-library/react';
  import {MyComponent} from '../my-component';
  
  jest.mock('shared/state');
  
  describe('<MyComponent />', () => {
    let container: HTMLElement;
  
    beforeEach(() => {
      ({ container } = render(<MyComponent />));
    });
  
    it('should render correctly', () => {
      expect(container.firstChild).toMatchSnapshot();
    });
  });
  

  This errors because undefined can't be destructured in the MyComponent as the return from useSomeState is undefined and not {value: 1} as it is in the mock. useSomeState is a jest function but it's lost it's mock implementation.

  If I remove the jest.fn from the mock and just use a function that returns { value: 1 } then it works fine, so why does the mock implementation get lost.

  p.s. If I import the use-some-state.ts into my-component.test.tsx file and log useSomeState() it works as expected, its just in MyComponent where it doesn't.
• How to migrate React app from NextJS to create-react-app?

  I bought a template only for a React application but it had NextJS integration within. I'm not comfortable working with NextJS and want to switch back to a normal react app bootstrapped with create-react-app. There is a lot of help migrating from create-react-app to NextJS, however none for the opposite of it. Any help regarding this would be appreciated.