Module not found, did you mean "*js"?

user_1693605 0
Viewed 786

I'm building a React app with webpack and typescript. I'm using the dependency react-financial-charts, and it's specified correctly in package.json and there's the following two folders inside node_modules: @react_financial_charts and react_financial_charts.

However, when I use the library in my code and compile, I get the following error.

ERROR in ./node_modules/@react-financial-charts/utils/lib/index.js 2:0-27
Module not found: Error: Can't resolve './withSize' in 'C:\Users\Username\project\node_modules\@react-financial-charts\utils\lib'
Did you mean 'withSize.js'?

I checked the folder described in this error message, and it contains the file withSize.js. What gives?

My webpack.config.js contains this:

  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },

My index.tsx contains:

import React from "react";
import ReactDOM from "react-dom";
import Chart from "./StockChart"

ReactDOM.render(<Chart />, document.getElementById("root"));

Where StockChart.tsx resides in the same directory and is copy-pasted from: https://github.com/reactivemarkets/react-financial-charts/blob/master/packages/stories/src/features/StockChart.tsx

I set up the React+Webpack+Typescript project following these instructions (note that I later added the react-financial-charts dependency after following these instructions):

https://www.newline.co/@bespoyasov/how-to-create-a-react-typescript-application-from-scratch--676bd120

webpack-dev-server webpack typescript reactjs javascript
2 Answers
user_16936050

particular addition..

If you used npx create-react-app my-app --template typescript to create your app, then complete solution is to rewire your create-react-app project and add custom settings for your webpack without eject :

  1. Install react-app-rewired

For create-react-app 2.x with Webpack 4:

npm install react-app-rewired --save-dev

For create-react-app 1.x or react-scripts-ts with Webpack 3:

npm install react-app-rewired@1.6.2 --save-dev
  1. Create a config-overrides.js file in the root directory

like this:

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

fill it with this code:

module.exports = function override(config, env) {
    // New config, e.g. config.plugins.push...

    config.module.rules = [...config.module.rules, 
        {
            test: /\.m?js/,
            resolve: {
              fullySpecified: false
            }
        }
      ]

    return config
}
  1. 'Flip' the existing calls to react-scripts in npm scripts for start, build and test

from:

/* package.json */

  "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

To:

/* package.json */

  "scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

Note: Do NOT flip the call for the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making react-app-rewired no longer required. There are no configuration options to rewire for the eject script.

  1. Start the Dev Server
npm start
  1. Build your app
npm run build
user_21442100
Related