javascript - Module not found, did you mean "*js"? - Stack Overflow

admin管理员组

文章数量:1323874

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 pile, 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: .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):

/@bespoyasov/how-to-create-a-react-typescript-application-from-scratch--676bd120

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 pile, 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./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

• javascript
• reactjs
• typescript
• webpack
• webpack-dev-server

Share Improve this question Follow edited Jul 9, 2021 at 14:26 Jase asked Jul 9, 2021 at 11:52 JaseJase 1,10511 gold badge1515 silver badges3838 bronze badges 2

• can you share the file with import? – Nikita Mazur Commented Jul 9, 2021 at 11:54
• @NikitaMazur Just done, thanks – Jase Commented Jul 9, 2021 at 11:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Fixed!

This problem was very similar to https://github./webpack/webpack/issues/11467.

So I merely had to add this to webpack.config.js (under module and rules):

      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false
        }
      }

particular addition..

If you used npx create-react-app my-app --template typescript to create your app, then plete 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 [email protected] --save-dev

2. 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
}

3. '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.

4. Start the Dev Server

npm start

5. Build your app

npm run build

本文标签： javascriptModule not founddid you mean quot*jsquotStack Overflow