Git Product home page Git Product logo

create-react-app-typescript's Introduction

⛔ DEPRECATED ⛔

create-react-app now supports typescript natively - read the guide for adding typescript to existing projects.

For existing react-scripts-ts users who would like to upgrade, follow this guide.

I have chosen to archive this repository, if you need to contact me, i'm on twitter @willmonk.


react-scripts-ts npm version Build Status

Create React apps (with Typescript) with no build configuration.

Do you know react and want to try out typescript? Or do you know typescript and want to try out react? Get all the benefits from create-react-app but you use typescript! 🚀

Quick Overview

npx create-react-app my-app --scripts-version=react-scripts-ts
cd my-app
npm start

# or with yarn
yarn create react-app my-app --scripts-version=react-scripts-ts
cd my-app
yarn start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Migration

In general, most upgrades won't require any migration steps to work, but if you experience problems after an upgrade, please file an issue, and we'll add it to the list of migration steps below.

From <2.16.0 to >=2.16.0

Since 2.16.0, the template uses different tsconfig files for both development and production mode. For the latter, unfortunately, the path resolver is not smart enough to fall back to the basic tsconfig.json in case the expected tsconfig.prod.json is not present, so you have to create this file manually like shown here.

From <2.13.0 to >=2.13.0

Since 2.13.0, typescript is listed as a peer dependency of react-scripts-ts. For projects generated with at least this version, the init script takes care of properly installing it as dev dependency to the generated projects. Older projects require manual installation, in case you have not already done that.

Using npm:

npm i -D typescript

Using yarn:

yarn add -D typescript

From <2.5.0 to >=2.5.0

Version 2.5.0 introduces a new config file for jest, that is necessary for the tests to run. If you were previously running a version older than v2.5.0 and upgraded to v2.5.0 or newer, you need to manually add the new file, or else you'll get an error similar to this when trying to run your tests:

Test suite failed to run

{
    "messageText": "Cannot read file 'C:\\[project]\\tsconfig.test.json': ENOENT: no such file or directory, open 'C:\\[project]\\tsconfig.test.json'.",
    "category": 1,
    "code": 5012
}

To fix this, create a new file in the root of the project called tsconfig.test.json, and paste the content of this file into it. Everything should work now. For more info, please see this issue.

Changelog

2.17.0

  • Update migration instructions - @DorianGrey
  • tslint updates - @alexandrudanpop
  • Stop eslint includes - @aurerua
  • Resolve commited merge conflig - @AndrewKvalheim

2.16.0

  • Allow moduleNameMapper config override - @sebald
  • Fix travis build - @DorianGrey
  • Allow using different tsconfig file for dev and build - @DorianGrey

2.15.1

  • Fix duplicated mjs entry in Jest config - @StevenLangbroek
  • Allow --watchAll to be set - @DorianGrey

2.15.0

  • Replace TSLint rules with presets - @nielsdB97
  • Update file-loader exclusion rules - @winstonewert
  • Fix Uglifyjs settings - @meandmax
  • Merge react-script 1.1.x - @wmonk

2.14.0

  • README fixes - @kaminskypavel
  • README fixes - @adambowles
  • Remove unused JS files - @DorianGrey
  • README fixes - @stephtr
  • Added the abillity to import js and jsx files with ts-loader - @GeeWee
  • Uglifyjs update for es6 support - @thetric

2.13.0

  • Remove tslint-loader from prod builds - @DorianGrey
  • Include typescript as devDependency in boilerplate - @ianschmitz
  • Document custom module formats - @joshtynjala
  • Fix tsconfig.json - @diabelb

2.12.0

  • Update typescript to 2.6.2

2.11.0

2.10.0

  • README updates - StefanSchoof
  • README updates - DorianGrey
  • Add support for fork-ts-checker-webpack-plugin - johnnyreilly

2.9.0 - UNPUBLISHED

This included changes that were not published by the facebook upstream, so was unpublished.

2.8.0

  • Update typescript to 2.5.3 - @nicolaserny

2.7.0

  • Merge [email protected] - @JohnNilsson
  • Fix git tempalte - @hktonylee
  • Provide migration docs - @JReinhold
  • Updated dependencies - @swengorschewski
  • Fix tslint config - @comerc

2.6.0

2.5.0

  • Support dynamic imports - thanks @nicolaserny, @DorianGrey
  • Fix up tsconfig - thanks @js-n
  • Fix readme typo - thanks @adambowles
  • Move to ts-jest - thanks @DorianGrey

2.4.0

  • Upgrade typescript to 2.4 and ts-loader to 2.2.1 - thanks @frederickfogerty
  • Fix readme typo - thanks @wrongway4you

2.3.2

  • Fix typescript version to 2.3.x until 2.4 @types are fixed

2.3.1

  • All tsc to parse config (for extend) - Thanks to @DorianGrey
  • Fix various jest issues - thanks to @zinserjan
  • Fix code coverage - thanks to @zinserjan

2.2.0

2.1.0

  • Update to [email protected] - thanks to @mindjuice
  • Fix test setup issue - thanks to @jonmpqts
  • Add source-map-loader - thanks to @Place1
  • Update to [email protected] - thanks to @sjdweb

2.0.1

  • Fix issue with jest finding test files

2.0.0

1.4.0

  • Upgrade to [email protected] - thanks to @patrick91
  • Add tests around react-scripts-ts - thanks to @migerh

1.3.0

1.1.8

  • Fix regression where no @types were being installed on init

1.1.7

1.1.6

1.0.6

  • Add missing cli-highlight dependency

1.0.5

  • Print file names when running npm run build
  • Add support for setupTest.ts
  • Highlight source code when erroring in npm run build

1.0.4

  • Change mentions of eslint to tslint

1.0.3

  • Remove hidden character from tsconfig.json

1.0.2

  • Copy typescriptTransform.js when running npm run eject

create-react-app-typescript's People

Contributors

bondz avatar doriangrey avatar eliperelman avatar enoahnetzach avatar existentialism avatar forbeslindesay avatar fson avatar gaearon avatar gaumala avatar greengremlin avatar jeffposnick avatar johann-sonntagbauer avatar koistya avatar lacker avatar levrik avatar lpalmes avatar matoilic avatar mxstbr avatar n3tr avatar ro-savage avatar ryansully avatar sidoshi avatar tharakawj avatar themre avatar timer avatar tuchk4 avatar viankakrisna avatar vjeux avatar wirmar avatar wmonk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

create-react-app-typescript's Issues

Errors in newly created app

Likely because package.json is missing @types packages in dependencies.

Versions:

devinus@macbook [16:15:03] [~/Projects/my-app]
-> % node --version
v7.7.3
devinus@macbook [16:15:05] [~/Projects/my-app]
-> % yarn --version
0.21.3
devinus@macbook [16:15:08] [~/Projects/my-app]
-> % create-react-app --version
1.3.0

Created using:

create-react-app my-app --scripts-version=react-scripts-ts
Failed to compile.

Error in ./src/index.tsx
(1,24): error TS7016: Could not find a declaration file for module 'react'. '/Users/devinus/Projects/my-app/node_modules/react/react.js' implicitly has an 'any' type.

Error in ./src/index.tsx
(2,27): error TS7016: Could not find a declaration file for module 'react-dom'. '/Users/devinus/Projects/my-app/node_modules/react-dom/index.js' implicitly has an 'any' type.

Error in ./src/index.tsx
(7,3): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in /Users/devinus/Projects/my-app/src/App.test.tsx
(1,24): error TS7016: Could not find a declaration file for module 'react'. '/Users/devinus/Projects/my-app/node_modules/react/react.js' implicitly has an 'any' type.

Error in /Users/devinus/Projects/my-app/src/App.test.tsx
(2,27): error TS7016: Could not find a declaration file for module 'react-dom'. '/Users/devinus/Projects/my-app/node_modules/react-dom/index.js' implicitly has an 'any' type.

Error in /Users/devinus/Projects/my-app/src/App.test.tsx
(5,1): error TS2304: Cannot find name 'it'.

Error in /Users/devinus/Projects/my-app/src/App.test.tsx
(7,19): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(1,24): error TS7016: Could not find a declaration file for module 'react'. '/Users/devinus/Projects/my-app/node_modules/react/react.js' implicitly has an 'any' type.

Error in ./src/App.tsx
(4,14): error TS2304: Cannot find name 'require'.

Error in ./src/App.tsx
(9,7): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(9,7): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(10,9): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(10,9): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(11,11): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(11,11): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(12,11): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(12,11): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(12,31): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(13,9): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(14,9): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(14,9): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(15,32): error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist.

Error in ./src/App.tsx
(15,32): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(15,49): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(16,9): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

Error in ./src/App.tsx
(17,7): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

React Native version

Hello !
Is it possible to create a new version for React Native from react-community/create-react-native-app ?
Thank you in advance for your answer !

ES6 import for svg not working but require works

Description

I'm trying to import svg images with the following code:

import food from './food.svg';

Expected behavior

It works in create-create-app

Actual behavior

(8,18): error TS2307: Cannot find module './food.svg'.

Environment

os: OSX
node: 7.7.1
yarn: 0.21.3
react-scripts-ts: 1.1.8

Replace style-rules in tslint with prettier

The reasons for not including style only eslint rules in create-react-app are also valid for this project.

As of 1.4 prettier supports TypeScript so that should be used for code style instead of tslint. The current tslint settings are incompatible with default prettier settings, which is the main reason I noticed this.

Investigate adding missing typings warning

As per #8 there can be some confusion for TS beginners around missing module errors that are actually to do with missing typings. react-scripts has done a great job with making more subtle errors more digestible and obvious. So my thinking is an addition of a nicer message about installing @types/ or adding a type patch for it, with a link how to do it.

Update to typescript 2.2?

Is there anything from stopping this happening/getting it merged?

Otherwise I'd take a look in the coming days

mixing .js/.jsx and .ts/.tsx

First of all I want to thank you for your great work. I've started to use typescript with my IDE (idea) which worked fine but would result in not being able to npm run without first compiling in the IDE. So I was really happy when I found this fork.

I create this issue to clarify if I get it right that .js and .jsx files will not be transpiled?

If that is so: Is there a technical reason for this? Because in an existing project I would have to rename all files to be able to use create-react-app-typescript instead of beeing able to gradually move over. Is there a way to enable compiling of both .js and .ts Files?

Thank you for your help!

Jest test fail: Claims there aren't any tests when there are

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes, I'm on yarn 0.21.3

Description

yarn test gives me "Your test suite must contain at least one test." even though I have a test.

Expected behavior

yarn test should show me 1 test succeeded.

Actual behavior

 FAIL  tests/all.test.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at onResult (node_modules/jest-cli/build/TestRunner.js:189:18)
      at process._tickCallback (internal/process/next_tick.js:109:7)

Test Suites: 1 failed, 1 total

Environment

~/GitHub/nnbuilder/bug-app$ npm ls react-scripts
[email protected] /Users/noren/GitHub/nnbuilder/bug-app
└── (empty)
~/GitHub/nnbuilder/bug-app$ node -v
v7.7.2
~/GitHub/nnbuilder/bug-app$ npm -v
4.1.2
~/GitHub/nnbuilder/bug-app$ yarn --version
0.21.3
  1. Operating system: OSX
  2. Browser and version: Chrome

Reproducible Demo

See this: https://github.com/FredrikNoren/bug-ts-jest

It's just vanilla create-react-app-ts and then that single test added. Run yarn test in that app to repro.

Are there any tests that actually work?

Like @jeremistadler I was trying to update this to TypeScript 2.2. Before submitting a PR I wanted to run some tests and found a few e2e shell scripts in /tasks. Are they supposed to work? I couldn't get them to run properly, too many eslint/tsc errors. I managed to fix a few of those but hit a wall so I thought I'd check back first if they are even supposed to work.

How do you test this project before updating the npm packages? I don't see how this would work without publishing the package. I supposed I could publish a scoped package but there's got to be a better way to test this…

TS cannot find module

Can you reproduce the problem with latest npm?

Yes

Description

When I try to import another library, I've got the error "TS : cannot find module libraryName

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected):
C:\Users\Eytan\Documents\tickets>npm ls react-scripts
[email protected] C:\Users\Eytan\Documents\tickets
`-- (empty)

npm ERR! code 1
  1. node -v: v7.3.0
  2. npm -v: 3.10.10

Then, specify:

  1. Operating system: Windows
  2. Browser and version: Vivaldi 1.6.689.40 32bits

Reproducible Demo

yarn global add create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
yarn add admin-on-rest

Then if I add this line on my code :
import { simpleRestClient, Admin, Resource } from 'admin-on-rest';

I've got the error

Posibility for importing js modules

I am currently using this awesome package in order to have typescript without sacrificing the benefits of create-react-app.

Even though i would love to refactor all of our code to TypeScript we dont have the ability to do so. Instead we were trying to make declaretion files for the modules we kept as es6. But when we tried to import the es6 module the code was not transpiled.

Could we somehow allow the package to keep the standard babel config for .js files :-) ?

The 'eject' script results in an error.

When I tried to run yarn run eject, I'm got the following:

error An unexpected error occurred: "ENOENT: no such file or directory, open 'C:\\Users\\drosen\\my-app\\node_modules\\@types\\jest\\index.d.ts'".

Change TypeScript to peerDependency

Just a quick suggestion for your package.json that is created as part of a new cra-ts app.

Could we consider changing TypeScript to be a peerDependency in react-scripts-ts and a devDependency in the application's package.json instead of a dependency inside of react-scripts-ts? This would allow the developer to be in control of the version of TS to use, while being able to stay on the latest flavor of react-scripts-ts.

Our company has had issues in the past in a large code base where we've had to stay back a minor version or two of TypeScript to fix issues that prevented us from upgrading.

Cheers!

i found if we are using rest props of es6 spread operator it will broken in below behaivor?

import * as React from 'react';
import Demo2 from './Demo2';

export default class XX extends React.Component<any, any> {

  render() {
    // console.log(Demo2);
    const { children, ...restProps } = this.props;
    // const x= {};
    console.log(restProps);
    return (
      <div>demo1 {this.props.name}
        <div {...restProps}>
          <Demo2></Demo2>
        </div>
      </div>
    )
  }
}

if we use above code block the vs.code will give me the Demo2 is declared but not used, while build process, it will lose is undefined.

if we change {...restProps} to {...x} it works fine. why?

The batch file cannot be found error when we run npm run eject

Actual behavior

When ejecting the project, I got an error like:
The batch file cannot be found error
image

Environment

Run these commands in the project folder and fill in their results:
node -v: 7.9.0
npm -v: 4.5.0
Operating system: Windows 8

Reproducible Demo

npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm run eject

TypeScript errors in newly created app

I get the following error when creating a new app with react-scripts-ts:

➜  uname -a
Darwin Mikkos-MBP-2.Home 16.4.0 Darwin Kernel Version 16.4.0: Thu Dec 22 22:53:21 PST 2016; root:xnu-3789.41.3~3/RELEASE_X86_64 x86_64
➜  node --version
v6.10.0
➜  yarn --version
0.21.3
➜  create-react-app --version
1.3.0
➜  create-react-app my-app --scripts-version=react-scripts-ts
...
➜  cd my-app
➜  yarn run build
yarn run v0.21.3
$ react-scripts-ts build
Creating an optimized production build...
ts-loader: Using [email protected] and /Users/mikkom/prj/tmp/my-app/tsconfig.json
Failed to compile.

Error in /Users/mikkom/prj/tmp/my-app/src/index.tsx
(7,3): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & null'.
  Type '{}' is not assignable to type 'null'.

Error in /Users/mikkom/prj/tmp/my-app/src/App.test.tsx
(7,19): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & null'.
  Type '{}' is not assignable to type 'null'.

 4 |
 5 | it('renders without crashing', <span class="hljs-function">() =></span> {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
-----------------------^
 8 | });
 9 |

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Enabling 'react-hot' on typescript project

Thank you for the template, it is very helpful.

There is just one thing I can't figure out yet, how can I simply add the 'hot-reloading' to the project?

I ejected it, added the react-hot-loader package with yarn and modified the loaders:

        {
            test: /\.(ts|tsx)$/,
            loaders: ['react-hot', 'ts'],
            include: paths.appSrc

        },

But it seems still to reload the whole page if I change a component.

Any help would be appreciated.

New project: Compilation failure

Can you reproduce the problem with latest npm?

Used yarn 0.21.3

Description

Created a new project, ran yarn start and get the following:

Failed to compile.

Error in Invalid or unexpected token
 @ multi main

Expected behavior

Hello world to show

Actual behavior

Above error

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected):
[email protected] /path/to/my-app
└── (empty)
  1. node -v: v7.7.3
  2. npm -v: (yarn) 0.21.3

Then, specify:

  1. Operating system: mac
  2. Browser and version: irrelevant

Jest can't run all tests after updatein to cra-ts 2.0

When starting the jest test running and hitting a to run all test for me (after an upgrade, without changing anything) checks for tests in <project>/src/**/__tests__/**/*.js?(x),<project>/src/**/?(*.)(spec|test).js?(x) which obviously does not match .ts/.tsx files

I would guess that the config option should be overridden by cra-ts

How to deal with tslint "requires type checking" warnings

Thanks for creating and maintaining the typescript version of create-react-app! I'm new to all of this and it's been a great help.

My question - during build, I get warnings like the following:

Warning: The 'await-promise' rule requires type checking
Warning: The 'no-use-before-declare' rule requires type checking
Warning: The 'return-undefined' rule requires type checking
Warning: The 'no-floating-promises' rule requires type checking
Warning: The 'no-unnecessary-qualifier' rule requires type checking
Warning: The 'strict-type-predicates' rule requires type checking

(I'm using the tslint "standard" configuration.)

Is there any way to get rid of these warnings (without ejecting)? My understanding is that one has to run tslint with the --type-check option, but I'm not sure if create-react-app(-typescript) provides any hooks for that.

Thanks for any help!

Non-text characters in tsconfig.json?

I'm on:

  • macOS 10.12.2
  • npm 3.10.8
  • Node 6.9.1

Running create-react-app --scripts-version=react-scripts-ts works just fine, but I noticed a strange character added to the generated tsconfig.json:

image

Apparently it's the bytes e2 80 a8 as shown in hexdump:

$ hexdump -C tsconfig.json

[...]
00000270  61 74 63 68 65 73 22 0a  20 20 5d 0a 7d e2 80 a8  |atches".  ].}...|
00000280  0a 0a                                             |..|

This is not causing any issues that I can tell, but it's definitely odd. Thanks!

Map tsconfig "paths" to Jest config.

in my tsconfig file I have

    "paths": {
      "shared/*":["src/shared/*"]
    }

jest will not use this. But to fix jest I only need to update the utils\createJestConfig.js as

    moduleNameMapper: {
      '^react-native$': 'react-native-web',
      'shared/(.*)':'<rootDir>/src/shared/$1'
    },

could we automate the conversion so one would not have to eject to do this?

Remove mentions of Eslint

There are various mentions of eslint:

package.json
10-  "bugs": {
11-    "url": "https://github.com/wmonk/create-react-app/issues"
12-  },
13-  "files": [
14-    ".babelrc",
15:    ".eslintrc",
16-    "config",
17-    "bin",
18-    "scripts",
19-    "template",
20-    "utils"

scripts/start.js
125-      console.log();
126-      messages.warnings.forEach(message => {
127-        console.log(message);
128-        console.log();
129-      });
130:      // Teach some ESLint tricks.
131-      console.log('You may use special comments to disable some warnings.');
132:      console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
133:      console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
134-    }
135-  });
136-}
137-

These should be removed/replaced with tslint, and it's corresponding config.

Loading image from public folder seems to cause error

Module not found: You attempted to import ../../../public/assets/logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

This use to work before the latest commit. I have images that get referenced in my scss files. Since this doesn't work now, is there an alternative to how to reach image in public folder?

Numerous compiler errors occur at startup unless I set skipLibCheck to true

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes
Many errors, especially related to "missing modules", are due to npm bugs.

If you're using Windows, follow these instructions to update npm.

If you're using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Then try to reproduce the issue again.

Can you still reproduce it? Yes

Description

What are you reporting?
I get numerous compiler errors at application startup (yarn start) when I use create-react-app with the react-scripts-ts script (see attached file showing errors). However, these errors are resolved if I set skipLibCheck to true in tsconfig.json.

CompileErrorsWhenNotUsing_skipLibCheck-compilerOption.txt

Expected behavior

Tell us what you think should happen.
No errors should occur upon initial startup and I should not need to add skipLibCheck=true to tsconfig.json

Actual behavior

Tell us what actually happens. This is described above

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected):
[email protected] /home/craig/git/react-ts-test
└── (empty)
  1. node -v: v7.6.0

  2. npm -v: 4.5.0

Then, specify:

  1. Operating system: Ubuntu 16.04 LTS
  2. Browser and version: Chrome 58.0.3029.110 (64-bit)

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here. The repo is attached in a zip file (minus node_modules)
react-ts-test.zip

By doing this, you're helping the Create
React App contributors a big time!
Demonstrable issues gets fixed faster.

Update webpack v2

Please to update webpack version

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

Go Ahead

This branch is 205 commits ahead, 9 commits behind facebookincubator:master.

You know what I mean 😄. We still behind

[Feature] Use babel

It seem's like a decision was made not to use babel? Just testing out this project and realized some things do not get auto polyfill-ed. For example, any usage of Array.find won't work on older browsers.

noImplicitAny not respected?

Can you reproduce the problem with latest npm?

yes

Description

tsconfig.json doesn't seem to be respected. Specifically noImplicitAny isn't on even though it's true in the config.

Environment

Run these commands in the project folder and fill in their results:

[email protected] /Users/fredriknoren/GitHub/my-app
└── (empty)

node: v7.10.0
yarn: v0.24.5
osx

Reproducible Demo

  1. Create a new app with: create-react-app my-app --scripts-version=react-scripts-ts
  2. Paste this into App.tsx:
interface X { test: number; }
const x: X = { test: 4 };
const y = x[5];
console.log(y);
  1. yarn start

This should produce an error on x[5] but it doesn't

Error when running npm run build

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes

Description

An error when running npm run build

Expected behavior

Runs successfully

Actual behavior

C:\Apps\insite\node_modules\react-scripts-ts\scripts\build.js:32
var { highlight } = require('cli-highlight');
    ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:141:18)
    at node.js:933:3

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts-ts (if you haven’t ejected): [email protected]
  2. node -v: v5.8.0
  3. npm -v: 4.1.2

Then, specify:

  1. Operating system: Windows 10
  2. Browser and version: Chrome

Changing target to ES6 causes build script to fail

Can you reproduce the problem with latest npm?

Yes

Description

After changing the tsc target to es6, react-scripts-ts build fails during minification (I think). Running the development server (react-scripts-ts start) works fine on the es6 target.

Expected behavior

The build script should not fail.

Actual behavior

$ npm run build

> [email protected] build /private/tmp/fooapp
> react-scripts-ts build

Creating an optimized production build...
ts-loader: Using [email protected] and /private/tmp/fooapp/tsconfig.json
Failed to compile.

static/js/main.33e14f74.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./~/tslint-loader!./src/App.tsx:6,0]

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected): [email protected]
  2. node -v: v7.4.0
  3. npm -v: 4.1.2

Then, specify:

  1. Operating system: macOS 10.12.3
  2. Browser and version: N/A

Reproducible Demo

$ cd /tmp
$ create-react-app fooapp --scripts-version=react-scripts-ts
$ cd fooapp
$ sed -i '' 's/es5/es6/' tsconfig.json
$ npm run build

Support for compilerOptions from tsconfig.json in Jest-Tests?

I am using Decorators in my app and would like to unit-test the functions that use them. You currently pass a fixed config-object into the ts-compiler that transforms the files before running them trough jest here: https://github.com/wmonk/create-react-app-typescript/blob/master/packages/react-scripts/config/jest/typescriptTransform.js#L10

// Copyright 2004-present Facebook. All Rights Reserved.

const tsc = require('typescript');

module.exports = {
  process(src, path) {
    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
      return tsc.transpile(
        src,
        {
          module: tsc.ModuleKind.CommonJS,
          jsx: tsc.JsxEmit.React,
        },
        path,
        []
      );
    }
    return src;
  },
};

This breaks my tests, because I need to have experimentalDecorators: true in there. I ejected the app and verified that this would indeed work.

Is there an easy way to use the compilerOptions-settings from the tsconfig.json in the project-root or overwrite the settings somehow?

Failure to create new app

Can reproduce the problem with latest npm

npm: 4.1.2 Node: v7.4.0

Description

I'm running as non root, on Ubuntu 14.04.5 inside a vagrant virtualbox:

$ create-react-app kanban --scripts-version=react-scripts-ts

Expected behavior

It should create a new Typescript React app.

Actual behavior

It errors with:

no such file or directory, chmod '/vagrant/kanban/node_modules/esprima/bin/esparse.js'

Environment

Run in the project folder:

  1. npm ls react-scripts:

    [email protected] /vagrant/kanban
    └── (empty)

  2. node -v:

    v7.4.0

  3. npm -v:

    4.1.2

Operating system:

Ubuntu 14.04.5 inside a vagrant virtualbox

Also recreatable with:

Node v7.4.0 npm v4.0.5
Node v6.9.4 npm v3.10.10

npm-debug node v7.4.0 npm v4.1.2.txt

npm-debug node v6.9.4 npm v3.10.10.txt

NOT re-creatable with:

Node v4.7.2
npm v2.15.11

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.