question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to create component in a different path using @nrwl/react

See original GitHub issue

Please make sure you have read the submission guidelines before posting an issue

Prerequisites

Please answer the following questions for yourself before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I’m reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

First of all, I’d like to thank you! I love to see that you are investing in react!!

Expected Behavior

When using ng generate component (via @nrwl/react schematics) with a path other than the default, the component should is created in a weird path. react1

react2

Please describe the behavior you are expecting

ng generate component components/hello should create a component in the components directory. This is the default behavior for native Angular CLI if you want to create components or services in another path. The final result should look like this: hello_tsx_—_react__Workspace_

Additionally, when trying to run ng g c components/hello, the string components/hello is attached to the variables, looking like this:


import React from 'react';

import './components/hello.css';

/* tslint:disable:no-empty-interface */
export interface Components/helloProps {
}

export const Components/hello = (props: Components/helloProps) => {
  return (
    <div>
      <h1>Welcome to components/hello component!</h1>
      
    </div>
  );
};

export default Components/hello;

Current Behavior

What is the current behavior?

As mentioned above, components get created in the wrong path, and the path name is attached to variables

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. generate a react workspace
  2. generate a component with other path via ng g c differentPath/componentName

Context

Please provide any relevant information about your setup:

  • Angular CLI version 8.1.1

A minimal reproduce scenario using allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.

Failure Logs

Please include any relevant log snippets or files here.

Other

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
jaysoocommented, Aug 15, 2019

@mehrad-rafigh I found it easier to run yarn e2e react (you don’t have to let it run fully), and then playing with the generated workspace in tmp/nx/proj.

Or else you can yarn build and manually copy the build/packages/react folder over to your workspace’s node_modules.

0reactions
samartomarcommented, Apr 27, 2021

whats solution?

Read more comments on GitHub >

github_iconTop Results From Across the Web

@nrwl/react:cypress-component-configuration | Nx
For React projects, the build target needs to be using the @nrwl/webpack:webpack executor. The generator will throw an error if a build target...
Read more >
Using Nx for React and Typescript Monorepos - Ryosuke
I wanted components to use in the app, so I scaffolded a new library using the nx CLI for UI components: nx g...
Read more >
Error when generating new component in Angular 14.7.13
A solution to this is to edit the "root" property in angular.json , which should be placed in the root folder of your...
Read more >
The React CLI you always wanted but didn't know about
All of them are invoked with the npx nx generate or short npx nx g command. Let's for instance generate a new component...
Read more >
Use Storybook with Tailwind in an Nx Workspace | juri.dev
Learn how to use Next.js, Nx and Tailwind together · Generate a new library to host our page UI components · Add Storybook...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found