Open stephenkiers opened 6 years ago
Ok - this one is a bit more complex to explain, yet it's pretty straight forward.
To illustrate the problem, I've adjusted the import code in app.tsx
to this:
import * as Bla from "@test/redux/src/index";
console.warn(Bla);
What would you expect to be the output of this?
...
Answer - something like: /static/media/index.903f54a8.ts
.
Why?
Because the pattern for ts
files is (currently) only applied to code inside of the src
directory.
Every file that does not match any of the other patterns is treated as an asset, i.e. file-loader
will take care of it, and return a string containing the resulting file path.
See the config snippets: https://github.com/wmonk/create-react-app-typescript/blob/e4b1f9424fa14f7aae7f0cbf5fd64e18dd273527/packages/react-scripts/config/webpack.config.dev.js#L173-L185
Besides, I wouldn't recommend to use dev version of typescript (in your case, a dev version of 3.0) - they are too unstable for production usage, and in most cases don't provide all features scheduled for the particular version.
See the more details discussion / explanation here: https://github.com/wmonk/create-react-app-typescript/issues/348
Thanks for you prompt, insightful response. The problem is similar to what I guessed it would be, and you were very helpful pointing out the relevant code.
For the record, the dev version of typescript was simply to rule out any issues within typescript; as I submitted this as a issue to the official typescript project as well.
I will look at #348 and see if we can come up with a solution on our side.
Really appreciate the feedback. 👍
Created a pull request that adds the ability to enable typescript processing for a node_modules folder. Please take a look, https://github.com/wmonk/create-react-app-typescript/pull/358
Was experiencing this, too. From https://github.com/wmonk/create-react-app-typescript/issues/348#issuecomment-401583230 I added the package to the webpack configs' includes
(project is ejected):
// Compile .tsx?
{
test: /\.(ts|tsx)$/,
include: [ paths.appSrc, path.resolve('..', 'node_modules', '<package-name>') ],
use: [
{
loader: require.resolve('ts-loader'),
enum
s are now doing that thang that they're s'posed to.
This is exactly what my pr did. However, because this is such a niche issue, we decided to fork instead of merging into master.
@larrybotha @stephenkiers I'm encountering the same issue. Will you be submitting a PR to simply add the external lib to the include path? It seems like a reasonable add on to the config.
How is this is a niche issue? All of @types
is imported from node_modules
, for one thing, and that's a lot of opportunity for errors of this sort.
I've got several libraries I use regularly that I'd rather import the TS sources directly from node_modules
, and get TS' transpilation behavior for free (as opposed to needing a separate Babel pass and/or requiring additional polyfills), I've got TS-only npm packages that only include TS source. One easy example here is that using @reactivex/rx-ts
or especially @reactivex/ix-ts
allows you to set your target lib once in your root config, and not have to also "declare" it in a specific npm package dependency such as @reactivex/ix-es2015-esm
. (I say especially for Ix here, because getting the right combination of asynchronous for
generator support is much easier if you let TS handle it top-to-bottom.)
It was a shock to find an import resolving to /static/media/name.hash.ts
just now. That's definitely not behavior I would expect. I was hoping not to need to eject this soon on this project.
Is this a bug report?
Yes
Can you also reproduce the problem with npm 4.x?
Yes
Which terms did you search for in User Guide?
enum, npm, import
Environment
here is the yarn.lock info
node -v
v10.5.0
yarn --version
1.7.0
Then, specify:
Steps to Reproduce
See attached github repro that is minimal reproduction
https://github.com/stephenkiers/TypescriptRepo1
Remote Package Code
Target Package Code
Expected Behavior
Target Package should print
Full Name
Actual Behavior
TEST
is undefined, so there isUncaught TypeError: Cannot read property 'MINOR' of undefined
Reproducible Demo