I am trying to import framer library in my project. The project itself compiles just fine if I don't import Hearts.tsx. However it fails just likee below if I import Hearts.tsx. Hearts.tsx imports framer. Unfortunately I am getting an error when I tried to run it with webpack-dev-server.
ERROR in ./node_modules/framer/build/framer.js
Module not found: Error: Can't resolve 'ReactDOM' in '/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build'
@ ./node_modules/framer/build/framer.js 1:99-118
@ ./src/components/Heart.tsx
@ ./src/index.tsx
@ multi (webpack)-dev-server/client?http://localhost:9001 ./src/index.tsx
var path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
externals: {
react: "react",
"react-dom": "react-dom"
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
// webpack-dev-server configuration
// This specifies where javascript bundle is created when
// webpack CLI is run. However, webpack-dev-server is only
// concerned with the 'filename' parameter.
// webpack-dev-server generates the bundle with the 'filename' in
// memory. It never creates an actual file in the 'path' specified
// unlike the webpack CLI.
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
devServer: {
// Can be omitted unless you are using 'docker'
// This is where webpack-dev-server serves your bundle
// which is created in memory.
// To use the in-memory bundle,
// your <script> 'src' should point to the bundle
// prefixed with the 'publicPath', e.g.:
// <script src='http://localhost:9001/assets/bundle.js'>
// </script>
publicPath: "/dist/",
// The local filesystem directory where static html files
// should be placed.
// Put your main static html page containing the <script> tag
// here to enjoy 'live-reloading'
// E.g., if 'contentBase' is '../views', you can
// put 'index.html' in '../views/main/index.html', and
// it will be available at the url:
// https://localhost:9001/main/index.html
contentBase: path.resolve(__dirname, "./"),
// 'Live-reloading' happens when you make changes to code
// dependency pointed to by 'entry' parameter explained earlier.
// To make live-reloading happen even when changes are made
// to the static html pages in 'contentBase', add
// 'watchContentBase'
watchContentBase: true,
compress: false,
port: 9001
}
};
This is the detailed error:
ERROR in ./node_modules/framer/build/framer.js
Module not found: Error: Can't resolve 'ReactDOM' in '/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build'
resolve 'ReactDOM' in '/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build'
Parsed request is a module
using description file: /Users/ikaplan/Code/typeTestFramer/node_modules/framer/package.json (relative path: ./build)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build/node_modules doesn't exist or is not a directory
/Users/ikaplan/Code/typeTestFramer/node_modules/framer/node_modules doesn't exist or is not a directory
/Users/ikaplan/Code/typeTestFramer/node_modules/node_modules doesn't exist or is not a directory
/Users/ikaplan/Code/node_modules doesn't exist or is not a directory
/Users/ikaplan/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/ikaplan/Code/typeTestFramer/node_modules
using description file: /Users/ikaplan/Code/typeTestFramer/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/ikaplan/Code/typeTestFramer/package.json (relative path: ./node_modules/ReactDOM)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.tsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.json doesn't exist
as directory
/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM doesn't exist
[/Users/ikaplan/Code/typeTestFramer/node_modules/framer/build/node_modules]
[/Users/ikaplan/Code/typeTestFramer/node_modules/framer/node_modules]
[/Users/ikaplan/Code/typeTestFramer/node_modules/node_modules]
[/Users/ikaplan/Code/node_modules]
[/Users/ikaplan/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.ts]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.tsx]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.js]
[/Users/ikaplan/Code/typeTestFramer/node_modules/ReactDOM.json]
@ ./node_modules/framer/build/framer.js 1:99-118
@ ./src/components/Heart.tsx
@ ./src/index.tsx
What am I missing?
By the way, this is my package.json file:
{
"name": "typetest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"awesome-typescript-loader": "^5.2.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"typescript": "^2.7.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.4",
"framer": "^0.7.5"
},
"dependencies": {
"@types/react": "^16.3.12",
"@types/react-dom": "^16.0.5",
"@types/draft-js": "^0.10.24",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"source-map-loader": "^0.2.4",
"ReactDOM": "./ReactDOM"
},
"peerDependencies": {
"framer": "^0.7.5",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
It looks like node_modules/framer/build/framer.js is requiring the wrong module name: it should be react-dom, not ReactDOM. I wasn't able to find any documentation indicating how this library is supposed to be used that might suggest why requiring ReactDOM would work. Where was the documentation that pointed you to this library?
Anyway, you should be able to work around the problem by creating a ReactDOM module that just re-exports react-dom. Create a ReactDOM directory with files:
// ReactDOM/index.js
export * from "react-dom";
// ReactDOM/package.json
{"name": "ReactDOM"}
and add "ReactDOM": "./ReactDOM" to your dependencies in package.json.