jpavon / react-scripts-ts Goto Github PK

Hi and thanks for the useful library!

It seems localStorage is mocked and subsequently lost on reload of the page. Is this intended behaviour? It took a while for me to find out why the things written to localStorage were lost.

Hi,

After reading reading README.md I am still confused about the role/purpose/focus of this library compared to other libraries in the ecosystem - specifcally - Create-React-App in typescript mode. Perhaps this could be added to the documentation.

This is not a fork of neither react-scripts nor react-scripts-ts by wmonk, right?

Thanks in advance.

Dependency webpack-dev-server version is too low, issue fixed in newer versions.

Would it be possible to auto generate a definition file for css/scss modules when a file gets created?

As of right now, the definition file gets generated only after it is imported and used in a js/jsx/tsx file.

You could have the file watcher also watch for file creations that end with the extension .module.(css|scss)
Then, add those as files to watch for updates and create .d.ts files for.

That way when a user creates a new css module file and starts to immediately add styles to it, then the definition file will get auto generated as the user makes changes and saves the css module file. Rather then having to wait for the definition file to get generated when they import and use it in their React components.

Just a feature consideration and more like icing on the cake. I really like the project and work put into it!

Thanks for your react-scripts-ts
But , I can not set up my own Proxy, The reason shoule be this :

I can not find proxySetup in config/paths.js
when I add this in config/paths.js It works (src/setupProxy.js)

Thanks a lot， I love this scripts-version for react

Original issue: pmndrs/react-three-fiber#1103

Hi all,

I'm running into the following typescript compiler issue:

./node_modules/react-three-fiber/web.js
Module parse failed: Unexpected token (146:46)
You may need an appropriate loader to handle this file type.
| }
| let catalogue = {};
| const extend = objects => void (catalogue = { ...catalogue,
|   ...objects
| });

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es6",
    "lib": ["es7", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Any thoughts? Would be appreciated!

Why licence is not public? Is this really private package?

run command yarn start after yarn eject get the error：

path.js:28
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.resolve (path.js:211:7)
    at Function.findConfig (C:\Users\xxx\Desktop\my-app\node_modules\react-dev-utils\node_modules\browserslist\node.js:212:17)
    at checkBrowsers (C:\Users\xxx\Desktop\my-app\node_modules\react-dev-utils\browsersHelper.js:24:32)
    at Object.<anonymous> (C:\Users\xxx\Desktop\my-app\scripts\start.js:65:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

after ejecting calling npm start results in an error:

Running npm install...
added 10 packages from 4 contributors, updated 5 packages and moved 4 packages in 32.338s
Ejected successfully!

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

PS C:\Projekte\XXX> npm start

> [email protected] start C:\Projekte\XXX
> node scripts/start.js

internal/validators.js:125
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.resolve (path.js:161:7)

I add option below:
linterOptions: { format: 'verbose' }

and restart project. But get error ./src/App.tsx(22,5): Calls to 'console.log' are not allowed.

webpack/webpack#8537

I wanted to switch to this project but I can't because we are using class properties and I have this error when I launch our project.

Support for the experimental syntax 'classProperties' isn't currently enabled (77:9)

I see 2 solutions here:

• As this is a pretty common syntax now, add "@babel/plugin-proposal-class-properties" in the list of babel plugins
• Here set to true to allow users to add custom .babelrc in their project to extend the config.

What do you prefer @jpavon?

We did npm run eject(react-scripts-ts eject).
But the webpack.config file was read in node_modules/react-scripts-ts/config, not root/config

How to make react-scripts-ts read root/config/webpack.config.js?

What is the current behavior?

When I run npm run-script build I got this error: Cannot read property 'thisCompilation' of undefined

If the current behavior is a bug, please provide the steps to reproduce.

I created a new project, totally blank using these instructions:
https://developer.microsoft.com/en-us/fabric#/get-started
Follow steps 1-4

The application works fine.

Once I run npm i webpack

Then I get this error

my package.json
{
"name": "lulo",
"version": "0.1.0",
"private": true,
"dependencies": {
"office-ui-fabric-react": "^6.157.0",
"react": "^16.8.4",
"react-adal": "^0.4.22",
"react-dom": "^16.8.4",
"react-scripts-ts": "3.1.0",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"@types/jest": "^24.0.11",
"@types/node": "^11.11.3",
"@types/react": "^16.8.8",
"@types/react-adal": "^0.4.1",
"@types/react-dom": "^16.8.2",
"typescript": "^3.3.3333",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}

What is the expected behavior?
its a new project, with no other packages installed, its just completely blank, I dont see why its failing.

Other relevant information:
webpack version: 4.29.6
Node.js version: 10.0.0
Operating System: mac os
Additional tools:

How to integrate DllPlugin in the project

Hi,
please support async components for screating chunks:
https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
currently I get

Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type.
| import MonitoringModuleContent from './MonitoringModuleContent';
| var MonitoringMainAsync = asyncComponent(function () {
>   return import('./Monitoring');
| });
| /**

https://www.npmjs.com/package/react-scripts-ts
supports this, but it's outdated

Hi,
my test command looks like that:
"test": "cross-env CI=true FORCE_COLOR=true react-app-rewired test --scripts-version @jpavon/react-scripts-ts --env=jsdom",

without CI=true i get:
Error: `fsevents` unavailable (this watcher can only be used on Darwin) at new FSEventsWatcher (/Users/mjl/Projects/flipper-frontend/node_modules/sane/src/fsevents_watcher.js:41:11) at createWatcher (/Users/mjl/Projects/flipper-frontend/node_modules/jest-haste-map/build/index.js:780:23) at Array.map (<anonymous>) at HasteMap._watch (/Users/mjl/Projects/flipper-frontend/node_modules/jest-haste-map/build/index.js:936:44) at _buildPromise._buildFileMap.then.then.hasteMap (/Users/mjl/Projects/flipper-frontend/node_modules/jest-haste-map/build/index.js:355:23) at processTicksAndRejections (internal/process/next_tick.js:81:5)

so I added CI variable, than it was screeming at me about lack of ```tsconfig.test.json``
ok - I've created one:

  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
  }
}

now the error say:

 Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

... bla bla bla...
    Details:

    /Users/mjl/Projects/flipper-frontend/src/components/basic/Button.test.tsx:11
        var _a = react_testing_library_1.render(<Button_1.Button />), getByText = _a.getByText, getByTestId = _a.getByTestId, container = _a.container, asFragment = _a.asFragment;
                                                ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

so ..ok I've changed ```tsconfig.test.json``

  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "jsx": "react"

  }
}

and now he have problem with paths:

      1 | import React from 'react'
      2 | import style from './Button.module.css'
    > 3 | import { Icon } from '#basic/Icon'```

ts.config.json have paths configured like that:
```    "baseUrl": ".",
    "paths": {
      "#src/*": ["src/*"],
      "#components/*": ["src/components/*"],
      "#redux/*": ["src/redux/*"],
      "#ducks/*": ["src/redux/ducks/*"],
      "#basic/*": ["src/components/basic/*"],
      "#style/*": ["src/style/*"]
    }```

and it is working when i call run

Thx
Mike

I wanted to upgrade to webpack 4. Tried CRA 2.0, but rewiring in CRA 2.0 was super-painful.

Tried this. Build times were much faster than react-scripts-ts (by about 50%) and much much faster than CRA 2.0 (by about 60-70%). Also, importantly, the original react-app-rewired works fine with this (don't need to do any of the crazy things required by the new CRA 2.0 configuration).

Anyways, just wanted to add a note of appreciation to you guys.