CODEWITHSUNDEEP
typescriptwebpackwebpack-style-loader
Dean Hiller
Dean Hiller

Reputation: 20204

typescript and webpack can't find relative tsx file?

I should start with npx tsc works fine and only webpack ts-loader is not compiling typescript for some reason(Does that point to webpack config then since tsconfig is correct for tsc? not sure).

I have a pull request on an open source project I am trying to add webpack too. This pull request is nearly working(worked out a slew of issues) and this article is what I was generally following(which did not 100% work) but it was generally a good article.

My last error(I think) I am trying to resolve is

ERROR in ./src/index.tsx 5:0-24
Module not found: Error: Can't resolve './App' in '/Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src'
resolve './App' in '/Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src'
  using description file: /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/package.json (relative path: ./src/App)

  no extension
    Field 'browser' doesn't contain a valid alias configuration
    /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src/App doesn't exist
  .js
    Field 'browser' doesn't contain a valid alias configuration
    /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src/App.js doesn't exist
  .json
    Field 'browser' doesn't contain a valid alias configuration
    /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src/App.json doesn't exist
  .wasm
    Field 'browser' doesn't contain a valid alias configuration
    /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src/App.wasm doesn't exist
  as directory
    /Users/dean/workspace/personal/reactpatterns-all/reactpatterns-react/src/App doesn't exist

My full tsconfig file is linked. Is there some config I am doing wrong? My full webconfig is linked.

This project is a playground to match a larger app so I could trim the problem down a bit and figure this out. Any ideas on what is wrong here?

I locked all package.json to EXACT versions so anyone can reproduce with npx webpack on that branches pull request(I did not merge into master since I do not have it working yet). This includes failing on incorrect node/npm/npx versions too.

Upvotes: 0

Views: 2070

Answers (1)

Dean Hiller
Dean Hiller

Reputation: 20204

I found two more things that had to be done to fix it all. In tsconfig, I had to have

  • "jsx": "react-jsx" rather than "preserve" as article says

In webpack, I had to add this section

resolve: {
  extensions: ['.js', '.jsx', '.tsx', '.ts', '.html', '.scss'],
  modules: ['node_modules'],
},

Upvotes: 3

Related Questions