admin管理员组文章数量:1323342
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
Share Improve this question edited Jul 9, 2021 at 14:26 Jase asked Jul 9, 2021 at 11:52 JaseJase 1,1051 gold badge15 silver badges38 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
2 Answers
Reset to default 7Fixed!
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 :
- 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
- 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 }
- '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.
- Start the Dev Server
npm start
- Build your app
npm run build
本文标签: javascriptModule not founddid you mean quot*jsquotStack Overflow
版权声明:本文标题:javascript - Module not found, did you mean "*js"? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742132912a2422242.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论