wmonk / create-react-app-typescript Goto Github PK
View Code? Open in Web Editor NEWDEPRECATED: Create React apps using typescript with no build configuration.
DEPRECATED: Create React apps using typescript with no build configuration.
npm: 4.1.2 Node: v7.4.0
I'm running as non root, on Ubuntu 14.04.5 inside a vagrant virtualbox:
$ create-react-app kanban --scripts-version=react-scripts-ts
It should create a new Typescript React app.
It errors with:
no such file or directory, chmod '/vagrant/kanban/node_modules/esprima/bin/esparse.js'
Run in the project folder:
npm ls react-scripts
:
[email protected] /vagrant/kanban
└── (empty)
node -v
:
v7.4.0
npm -v
:
4.1.2
Operating system:
Ubuntu 14.04.5 inside a vagrant virtualbox
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
Node v4.7.2
npm v2.15.11
I'm on:
Running create-react-app --scripts-version=react-scripts-ts
works just fine, but I noticed a strange character added to the generated tsconfig.json:
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!
The 1.0.0 canary build is out. I was wondering if you were happy tackling upgrading to this when it's ready or if you wanted someone to take the lead @wmonk ? Thanks for the great work. Really helpful.
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!
This branch is 205 commits ahead, 9 commits behind facebookincubator:master.
You know what I mean 😄. We still behind
If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.
Yes, I'm on yarn 0.21.3
yarn test
gives me "Your test suite must contain at least one test." even though I have a test.
yarn test
should show me 1 test succeeded.
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
~/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
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.
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!
Have you worked with any webpack loaders that I can import svg without them having to be an image? I am having trouble myself.
Is there anything from stopping this happening/getting it merged?
Otherwise I'd take a look in the coming days
Hi,
Recently the create react app was updated to use webpack 2 etc.
Does this script play nice with it or do we need to wait for an update ?
Thanks in advance
Used yarn 0.21.3
Created a new project, ran yarn start and get the following:
Failed to compile.
Error in Invalid or unexpected token
@ multi main
Hello world to show
Above error
Run these commands in the project folder and fill in their results:
npm ls react-scripts
(if you haven’t ejected):[email protected] /path/to/my-app
└── (empty)
node -v
: v7.7.3npm -v
: (yarn) 0.21.3Then, specify:
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
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-scripts-ts
doesn't seem to be playing well with html-webpack-plugin
. This issue seems to have been fixed over in react-scripts
. Can the fix be propagated over to react-scripts-ts
?
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.
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.
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 :-) ?
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…
Hi,
I'd like to debug tests by running:
yarn test --debug
I see that it already supported in:
facebook/create-react-app#1360
Would have been nice to add this here as well.
Any plan upgrade to the latest create-react-app
?
We want give Webpack 2 a chance. thanks.
yes
tsconfig.json
doesn't seem to be respected. Specifically noImplicitAny
isn't on even though it's true in the config.
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
create-react-app my-app --scripts-version=react-scripts-ts
App.tsx
:interface X { test: number; }
const x: X = { test: 4 };
const y = x[5];
console.log(y);
yarn start
This should produce an error on x[5]
but it doesn't
I create issue to monitor status of upgrading to new CRA.
Is there any easy way to convert an existing create-react-app
application over to using create-react-app-typescript
? Its not super clear to me how to accomplish but I suspect it would be easy.
Please to update webpack version
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
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 !
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?
Yes
When I try to import another library, I've got the error "TS : cannot find module libraryName
Run these commands in the project folder and fill in their results:
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
node -v
: v7.3.0npm -v
: 3.10.10Then, specify:
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
Is it possible to upgrade? This issue is affecting my new project: microsoft/TypeScript#15463.
Only seems to happen when trying to use redux connect()
If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.
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
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
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
Tell us what actually happens. This is described above
Run these commands in the project folder and fill in their results:
npm ls react-scripts
(if you haven’t ejected):[email protected] /home/craig/git/react-ts-test
└── (empty)
node -v
: v7.6.0
npm -v
: 4.5.0
Then, specify:
Ubuntu 16.04 LTS
Chrome 58.0.3029.110 (64-bit)
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.
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'".
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?
Would you consider switching ts-loader to awesome-typescript-loader?
The typescript transformer for Jest isn't being copied over when npm run eject
is run.
It should be copied over.
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?
This issue has been fixed on react-scripts 0.9.5
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.
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.
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?
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!
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.
When ejecting the project, I got an error like:
The batch file cannot be found error
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
npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm run eject
Yes
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.
The build script should not fail.
$ 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]
Run these commands in the project folder and fill in their results:
npm ls react-scripts
(if you haven’t ejected): [email protected]node -v
: v7.4.0npm -v
: 4.1.2Then, specify:
$ cd /tmp
$ create-react-app fooapp --scripts-version=react-scripts-ts
$ cd fooapp
$ sed -i '' 's/es5/es6/' tsconfig.json
$ npm run build
I'm trying to import svg images with the following code:
import food from './food.svg';
It works in create-create-app
(8,18): error TS2307: Cannot find module './food.svg'.
os: OSX
node: 7.7.1
yarn: 0.21.3
react-scripts-ts: 1.1.8
If I follow the instructions here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor
I can't get breakpoints to work.
I get the infamous Breakpoint ignored because generated code not found (source map problem?).
so I think this has to do with sourcemaps not being generated where they should be or something like that.
(Verified that it works with the default create-react-app
)
I would like to try use the typescript version instead of babel based version, but I don't know if is it possible to debug typescript?
If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.
Yes
An error when running npm run build
Runs successfully
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
Run these commands in the project folder and fill in their results:
npm ls react-scripts-ts
(if you haven’t ejected): [email protected]node -v
: v5.8.0npm -v
: 4.1.2Then, specify:
Hi @wmonk , Good job!
Do you have plans for supporting webpack 2 your dev workflow ?
Thanks!
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.
The project is set up using webpack 1, do u have any plans to move to webpack 2 soon?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.