[英]How/Why do Typescript/Electron/Webpack modules have absolute paths?
I am using react-dates in an electron project, which requires initialization via: 我在电子项目中使用react-date,需要通过以下方式初始化:
import 'react-dates/initialize';
This internally sets up some variables to be used later. 这在内部设置了一些稍后要使用的变量。 The problem is when I next enter the code where these variables are used, I get an exception because they are still null.
问题是当我接下来输入使用这些变量的代码时,我得到一个异常,因为它们仍然是null。
It turns out the Chrome/Electron is treating these as 2 separate files, even though they are the same file on disk. 事实证明,Chrome / Electron将这些视为2个单独的文件,即使它们是磁盘上的相同文件。 When breaking in the setup file, Chrome reports the following paths (first access/second access)
在设置文件中断时,Chrome会报告以下路径(首次访问/第二次访问)
C:\src\Project\node_modules\react-with-styles\lib\ThemedStyleSheet.js
webpack:///./node_modules/react-with-styles/lib/ThemedStyleSheet.js
Ok: thats odd - what gives? 好的:那很奇怪 - 是什么给出的? Where/how could this happen?
这可能发生在哪里/怎么样? I assume it's something to do with my webpack setup - I am using the TsConfigPathsPlugin & output/paths if that matters.
我认为它与我的webpack设置有关 - 我正在使用TsConfigPathsPlugin和输出/路径,如果这很重要。 From my webpack:
从我的webpack:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies } from '../package.json';
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
export default {
externals: [...Object.keys(dependencies || {})],
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
},
'ts-loader'
]
},
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
}
]
},
output: {
path: path.join(__dirname, '..', 'app'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2'
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.ts', '.tsx', '.json'],
plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
}),
new webpack.NamedModulesPlugin()
]
};
My tsconfig uses baseUrl to remap paths 我的tsconfig使用baseUrl重新映射路径
{
"compilerOptions": {
"target": "es5",
"baseUrl": "./app/",
"jsx": "react",
"module": "es2015",
"moduleResolution": "node",
"noUnusedLocals": true,
"pretty": true,
"sourceMap": true,
"resolveJsonModule": true,
"lib": ["dom", "es5", "es6", "es7", "es2017"],
"allowSyntheticDefaultImports": true // no errors with commonjs modules interop
//"strict": true,
//"strictFunctionTypes": false,
},
"exclude": ["node_modules", "**/node_modules/*"]
}
Any suggestions on where/how else to figure this out much appreciated! 关于在何处/如何解决这个问题的任何建议都非常感谢!
-- Edit: - 编辑:
I don't think there is two physical copies on disk, the output from npm -ls react-dates is as follows 我不认为磁盘上有两个物理副本,npm -ls react-date的输出如下所示
C:\<project>\manager-ts>npm ls react-dates
erb-typescript-example@0.17.1 C:\<project>\manager-ts
`-- react-dates@20.1.0
C:\<project>\manager-ts>
This isn't a fix, and may not be awfully helpful for anyone else searching, but it did get me unblocked. 这不是一个修复,可能对其他人搜索没有太大帮助,但它确实让我解除了阻止。
I created a second typescript module that defines the component using react-dates. 我创建了第二个打字稿模块,它使用react-dates定义组件。 This module is compiled to es5 and then "yarn link"-ed into my main app.
该模块编译为es5,然后“纱线链接” - 进入我的主应用程序。 Although I never figured out why there were differences (and I still/also get duplicate initialization warnings from ethers.js) this fixed at least this problem.
虽然我从来没有弄清楚为什么会有差异(我仍然/也从ethers.js得到重复的初始化警告),这至少解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.