search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.38k stars 2.57k forks source link

Error when compiling application #1046

Closed namibian15 closed 5 years ago

namibian15 commented 5 years ago

Bug or feature request?

Bug

Expected behavior

Compile application successfully

Actual behavior

Get the following error: ERROR in ./node_modules/@babel/runtime-corejs2/core-js/date/now.js Module not found: Error: Can't resolve 'core-js/library/fn/date/now' in '\node_modules\@babel\runtime-corejs2\core-js\date' @ ./node_modules/@babel/runtime-corejs2/core-js/date/now.js 1:17-55 @ ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js

Steps to reproduce

What version of React are you using?

16.5.0

What version of react-beautiful-dnd are you running?

10.0.3

What browser are you using?

Chrome

Demo

lilymatcha commented 5 years ago

I'm experiencing a similar issue; I can't tell if it's the same underlying cause.

Steps to reproduce

./src/index.js → dist/react-beautiful-dnd.esm.js... [!] (size-snapshot plugin) Error: ModuleNotFoundError: Module not found: Error: Can't resolve './view/drag-drop-context/index.js' in '/' ModuleNotFoundError: Module not found: Error: Can't resolve './view/draggable/in dex.js' in '/' ModuleNotFoundError: Module not found: Error: Can't resolve './view/droppable/in dex.js' in '/'

Has anyone else run into this issue?

EDIT: For the purposes of getting the library to build, disabling size-snapshot has worked for me as a temporary workaround. I did this by going into rollup.config.js and commenting out line 115. Weird that it wasn't necessary for the .js, .min.js, or .cjs.js files.

lilymatcha commented 5 years ago

@TrySound I noticed that when I get this error, it's on the size-snapshot plugin. Do you think it this could be caused by something like a versioning compatibility issue? I'm trying to figure out if this is a problem with react-beautiful-dnd, or with rollup-plugin-size-snapshot. What are your thoughts? I'm happy to provide any additional information you may need!

alexreardon commented 5 years ago

Any thoughts @TrySound ?

alexreardon commented 5 years ago

Is this still occurring?

dogzy123 commented 5 years ago

@alexreardon yes, It is. Just installed react-beautiful-dnd, on compiling got this:

ERROR in ./node_modules/@babel/runtime-corejs2/core-js/date/now.js Module not found: Error: Can't resolve 'core-js/library/fn/date/now' in '/public_html/ota/gds-pcc/node_modules/@babel/runtime-corejs2/core-js/date' @ ./node_modules/@babel/runtime-corejs2/core-js/date/now.js 1:17-55 @ ./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js

React 16.8.4 Babel 7.3.4 react-beautiful-dnd 10.1.0 Material UI 3.9.2

nosus commented 5 years ago

I am seeing this

Module not found: Error: Can't resolve 'core-js/library/fn/date/now'

when I build the bundle after introducing 'react-beautiful-dnd' into my application.

nosus commented 5 years ago

my webpack config is a little bit different, I am using this plugin "nodeExternals" to basically external all the node module and using whitelist to only include the ones I want. 

externals: [nodeExternals({
      whitelist: [
        "core-js",
        "axios",
        "react-beautiful-dnd",
        /@babel\/runtime-corejs2/,
        "css-box-model",
        "memoize-one",
        "prop-types",
        "raf-schd",
        "react-redux",
        "redux",
        "tiny-invariant",
        "regenerator-runtime",
      ]
    })],

after I introduce react-beautifuly-dnd, I put it and all its dependencies into the white list as well, even the 'core-js`. when I build the bundle file, it's okay. But when I include this bundle into another application, it breaks the build of the other application with the above error.

nosus commented 5 years ago

@TrySound @alexreardon any thoughts on this issue? it's blocking our project right now as we cannot commit any code using the react-beautiful-dnd as it will break the whole build of the product.

ozandogrultan commented 5 years ago

Have you tried deleting node_modules folder and compiling application after npm install?

Catchwa commented 5 years ago

Try using 10.1.1. On 10.1.0 and earlier, we found an issue as we had manual dependencies on core-js v3 which conflicted with the core-js v2 dependencies in @babel/runtime-corejs2 and had to override the version of that dependency to 7.4.3.

alexreardon commented 5 years ago

Overriding internal dependencies is probably asking for trouble

How would you recommend others get around this issue @Catchwa ?

Catchwa commented 5 years ago

@alexreardon Just try 10.1.1 I guess? This'd explain the comment by @dogrultan that a npm install fixes it (as if you have ^10.1.0 in your package.json you'd get 10.1.1 the next time you do a npm build with an empty node_modules directory). Any runtime-corejs2 >= 7.4.0 should fix this issue per https://github.com/babel/babel/pull/7646

(I can't speak to people/projects that still need core-js v2 though)

alexreardon commented 5 years ago

I am not sure if there is anything for us to do here. I'll close for now and please reply if you think there is any further action required

trusktr commented 5 years ago

I just installed react-beautiful-dnd into my application today, and got this same error.

All I did was npm i react-beautiful-dnd, then my build had an error like above after importing and trying to use the components.

I deleted node_modules and npm installed from scratch, but no luck.

Any ideas? I've no clue.

I'm using React 16.8.6.

full error: ``` ERROR in ../node_modules/@babel/runtime-corejs2/core-js/date/now.js Module not found: Error: Can't resolve 'core-js/library/fn/date/now' in '/Users/trusktr/src/MY_PROJECT/node_modules/@babel/runtime-corejs2/core-js/date' resolve 'core-js/library/fn/date/now' in '/Users/trusktr/src/MY_PROJECT/node_modules/@babel/runtime-corejs2/core-js/date' Parsed request is a module using description file: /Users/trusktr/src/MY_PROJECT/node_modules/@babel/runtime-corejs2/package.json (relative path: ./core-js/date) Field 'browser' doesn't contain a valid alias configuration resolve as module looking for modules in /Users/trusktr/src/MY_PROJECT/src using description file: /Users/trusktr/src/MY_PROJECT/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration using description file: /Users/trusktr/src/MY_PROJECT/package.json (relative path: ./src/core-js/library/fn/date/now) no extension Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.tsx doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.jsx doesn't exist as directory /Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now doesn't exist looking for modules in /Users/trusktr/src/MY_PROJECT/node_modules using description file: /Users/trusktr/src/MY_PROJECT/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: /Users/trusktr/src/MY_PROJECT/node_modules/core-js/package.json (relative path: ./library/fn/date/now) no extension Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.tsx doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration /Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.jsx doesn't exist as directory /Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now doesn't exist [/Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now] [/Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.ts] [/Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.tsx] [/Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.js] [/Users/trusktr/src/MY_PROJECT/src/core-js/library/fn/date/now.jsx] [/Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now] [/Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.ts] [/Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.tsx] [/Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.js] [/Users/trusktr/src/MY_PROJECT/node_modules/core-js/library/fn/date/now.jsx] @ ../node_modules/@babel/runtime-corejs2/core-js/date/now.js 1:17-55 @ ../node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js @ ./annotator/App.tsx @ ./annotator/mainEntry.js @ multi ./annotator/mainEntry ```
package.json ```json { "name": "@MY_PROJECTai/MY_PROJECT-spectator", "appName": "Annotator", "appID": "Annotator", "version": "1.6.12", "description": "AWESOME SAUCE", "appIcon": "https://s3.amazonaws.com/MY_PROJECT-website-assets/builder/icons/Annotator_Icon.svg", "main": "index.js", "license": "UNLICENSED", "repository": { "type": "git", "url": "https://github.com/Signafy/MY_PROJECT-spectator" }, "scripts": { "test": "npm run lint-all && npm run prettier-check && npm run build && echo 'implement tests'", "dev": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --max_old_space_size=4096 --config etc/webpack/webpack.config.builder.js --mode development --env development --watch", "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --max_old_space_size=4096 --config etc/webpack/webpack.config.builder.js --mode development --env development", "package": "npm run build && ./build-scripts/build.js", "COMMENT about typecheck:": " the '&& :' makes it so specific files are not passed to typecheck in the below lint-staged invocation, otherwise it will have an error.", "typecheck": "tsc -p ./tsconfig.json --noEmit && :", "typecheck-watch": "npm run typecheck -- -w", "electron-rebuild": "electron-rebuild", "prettier": "npm run prettier-js -- --write && npm run prettier-ts -- --write && npm run prettier-md -- --write", "prettier-list": "npm run --silent prettier-js-list && npm run --silent prettier-ts-list && npm run --silent prettier-md-list", "prettier-js": "prettier './**/*.{js,json}'", "prettier-ts": "prettier './**/*.{ts,tsx}'", "prettier-md": "prettier './**/*.md'", "prettier-js-list": "prettier './**/*.{js,json}' --list-different || true", "prettier-ts-list": "prettier './**/*.{ts,tsx}' --list-different || true", "prettier-md-list": "prettier './**/*.md' --list-different || true", "prettier-check": "npm run --silent prettier-js-check && npm run --silent prettier-ts-check && npm run --silent prettier-md-check", "prettier-js-check": "prettier './**/*.{js,json}' --check", "prettier-ts-check": "prettier './**/*.{ts,tsx}' --check", "prettier-md-check": "prettier './**/*.md' --check", "lint": "esw --format codeframe --config ./.eslintrc.js", "lint-fix": "npm run lint -- --fix", "lint-all": "npm run lint-js && npm run lint-ts", "lint-fix-all": "npm run lint-js -- --fix && npm run lint-ts -- --fix", "lint-watch": "npm run lint-js -- --watch & $p5=$!; npm run lint-ts -- --watch & p6=$!; wait $p5 $p6", "lint-js": "npm run lint -- './**/{.,}*.{js,json,html}'", "lint-ts": "npm run lint -- './**/*.{ts,tsx}'", "COMMENT about dev-or-master": "exits non-zero if we're not on develop or master branches", "dev-or-master": "git branch | grep \\* | cut -d ' ' -f2 | grep -E 'develop|master' > /dev/null", "version-patch": "node scripts/version.js patch", "version-minor": "node scripts/version.js minor", "version-major": "node scripts/version.js major" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{ts,tsx}": [ "npm run typecheck" ], "*.{js,ts,tsx,json}": [ "npm run lint-fix -- $@", "prettier --write $@", "git add" ], "*.{html}": [ "npm run lint-fix -- $@", "git add" ] }, "devDependencies": { "@types/dat.gui": "0.7.1", "@types/electron-window-state": "2.0.33", "@types/jquery": "2.0.33", "@types/lodash": "4.14.106", "@types/mkdirp": "0.5.2", "@types/node": "8.0.54", "@types/react": "16.4.18", "@types/react-dom": "16.0.9", "@types/react-modal": "3.1.2", "@types/react-redux": "^5.0.7", "@types/sprintf-js": "1.1.1", "@types/three": "0.84.34", "@types/uuid": "3.4.3", "@types/webpack-env": "^1.13.6", "babel-eslint": "8.2.6", "cross-env": "^5.2.0", "css-loader": "^1.0.0", "eslint": "5.2.0", "eslint-config-prettier": "^3.1.0", "eslint-friendly-formatter": "4.0.1", "eslint-loader": "2.1.0", "eslint-plugin-html": "4.0.5", "eslint-plugin-json": "1.2.0", "eslint-plugin-promise": "4.0.1", "eslint-plugin-typescript": "0.12.0", "eslint-watch": "4.0.2", "file-loader": "^1.1.11", "fork-ts-checker-webpack-plugin": "^0.4.3", "husky": "^1.0.0-rc.13", "json-loader": "^0.5.7", "lint-staged": "^8.0.0-beta.2", "node-sass": "^4.9.3", "prettier": "^1.14.3", "pug-loader": "^2.4.0", "react-hot-loader": "^4.3.4", "sass-loader": "^7.1.0", "script-loader": "^0.7.2", "shelljs": "^0.8.3", "simple-git": "^1.107.0", "source-map-loader": "^0.2.4", "style-loader": "^0.22.1", "ts-loader": "^4.4.2", "tslint": "^5.11.0", "typescript-eslint-parser": "20.1.1", "url-loader": "^1.0.1", "webpack": "4.16.4", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.5", "webpack-node-externals": "^1.7.2", "webpack-sources": "1.1.0" }, "dependencies": { "@MY_PROJECTai/MY_PROJECT-spectated-scene": "2.1.1", "@MY_PROJECTai/MY_PROJECT-models": "1.9.8", "@MY_PROJECTai/MY_PROJECT-builder-sdk": "2.1.9", "@MY_PROJECTai/MY_PROJECT-themes": "^1.0.13", "@material-ui/core": "3.8.3", "@types/react-beautiful-dnd": "^11.0.2", "animation-loop": "1.4.0", "async-file": "2.0.2", "css-modules-require-hook": "4.2.3", "dat.gui": "0.7.1", "electron": "3.0.8", "electron-unhandled": "1.1.0", "electron-window-state": "5.0.2", "events": "^3.0.0", "executable": "4.1.1", "immutable": "3.8.2", "jquery": "3.2.1", "jquery-ui-dist": "1.12.1", "js-yaml": "^3.12.0", "lodash": "4.17.4", "mkdirp": "0.5.1", "module-alias": "^2.1.0", "postcss": "6.0.23", "react": "^16.6.3", "react-beautiful-dnd": "^11.0.3", "react-dom": "^16.6.3", "react-modal": "3.4.4", "react-redux": "5.0.7", "react-select": "^2.2.0", "react-tiny-virtual-list": "2.1.4", "redux": "3.7.2", "source-map-support": "^0.5.9", "sprintf-js": "1.0.3", "three": "0.84.0", "tinycolor2": "^1.4.1", "ts-node": "7.0.0", "typeguard": "0.0.13", "typelogger": "1.0.29", "typescript": "3.1.6", "uuid": "3.1.0", "watch": "1.0.2", "xmldom": "^0.1.27", "yaml-loader": "^0.5.0" } } ```
webpack.config.builder.js ```js // GET SHELL JS const Webpack = require('webpack') const {DefinePlugin, HotModuleReplacementPlugin} = Webpack const Path = require('path') const Fs = require('fs') const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin') const _ = require('lodash') const baseDir = Path.resolve(__dirname, '..', '..') const srcRootDir = Path.resolve(baseDir, 'src') const pkgJson = JSON.parse(Fs.readFileSync(Path.resolve(baseDir, 'package.json'), 'utf-8')) const isDev = process.env.NODE_ENV !== 'production' const WebpackStatsConfig = { colors: true, errors: true, warnings: true, timings: true, cached: false, errorDetails: true, assets: false, //true - shows all output assets chunks: false, chunkModules: false, hash: false, reasons: false, modules: false, chunkOrigins: false, } /** * Resolves directories and maps to ram disk * if available * * @param dirs */ function resolveDirs(...dirs) { return dirs.map(dir => { return ['c', 'C', '/', '.'].includes(dir.charAt(0)) ? Path.resolve(dir) : Path.join(baseDir, dir) }) } const moduleDirs = resolveDirs('src', 'node_modules') const distDir = `${baseDir}/dist/` function tsAlias(tsFilename) { return Path.resolve(srcRootDir, tsFilename) } /** * Make aliases * * @returns {{styles: *, assets: *}} */ function makeAliases() { return { //"@src/config": tsAlias(srcRootDir,"config/index.ts") } } /** * Create externals array */ function makeExternals() { return [ 'fs', 'events', 'child_process', 'path', 'electron', 'react', 'react-dom', '@MY_PROJECTai/MY_PROJECT-spectated-scene', '@MY_PROJECTai/MY_PROJECT-builder-sdk', 'material-ui', 'material-ui-icons', 'typelogger', 'reselect', 'lodash', 'react-redux', 'mapbox-gl', 'react-mapbox-gl', 'config', 'source-map-support', ] } /** * Create module config */ function makeModuleConfig() { return { rules: [ // SOURCE MAPS { test: /\.js$/, exclude: /(typelogger|async-file|node_modules)/, use: ['source-map-loader'], enforce: 'pre', }, // CSS / SCSS { test: /\.(scss|css)$/, use: [ 'style-loader', 'css-loader', { loader: 'sass-loader', options: {}, }, ], }, // YAML { test: /\.(yaml|yml)$/, use: ['json-loader', 'yaml-loader'], }, // TYPESCRIPT { test: /\.tsx?$/, exclude: [/node_modules/], loader: 'ts-loader', options: { transpileOnly: true, //experimentalWatchApi: true, }, }, // JADE { test: /\.(jade|pug)$/, use: ['pug-loader'], }, // ASSETS / FONTS { test: /\.(eot|svg|ttf|woff|woff2)\w*/, use: [ { loader: 'url-loader', options: { // include assets smaller than this inside the bundle as data URLs limit: Infinity, }, }, ], }, // ASSETS / IMAGES & ICONS { test: /\.(png|jpg|gif|ico)$/, use: [ { loader: 'url-loader', options: { // include assets smaller than this inside the bundle as data URLs limit: Infinity, }, }, ], }, ], } } /** * Create react hot entry * * @param entry * @param devEntries * @returns {*} */ function makeHotEntry(entry, devEntries) { // HMR ENTRY ADDITION //if (isDev) entry.unshift('react-hot-loader/patch') if (devEntries) entry.unshift(...devEntries) return entry } /** * Create the output configuration * * @returns {{path: string}} */ function makeOutputConfig() { const outputConfig = { path: `${distDir}/package`, filename: 'bundle.js', libraryTarget: 'commonjs2', // THIS IS THE MOST IMPORTANT LINE!, //filename: '[name].[hash].js' } return outputConfig } /** * Create resolver config * * @returns {{alias: {styles: *, assets: *}, modules: *, extensions: string[]}} */ function makeResolveConfig() { return { alias: makeAliases(), modules: moduleDirs, extensions: ['.ts', '.tsx', '.js', '.jsx'], } } /** * Patch the configuration both * for dev/prod and with the passed * configuration * * @param config * @returns {*} */ function patchConfig(config) { // Development specific updates if (isDev) { _.merge(config, { // In development specify absolute path - better debugger support output: { //devtoolModuleFilenameTemplate: 'file://[absolute-resource-path]', // devtoolFallbackModuleFilenameTemplate: "file://[absolute-resource-path]" }, }) // IF ENTRY & DEV THEN HMR //config.plugins.splice(1, 0, new HotModuleReplacementPlugin()) } else { config.plugins.push( new Webpack.LoaderOptionsPlugin({ minimize: true, debug: false, }) ) } return config } /** * Get the correct dev tool * * @returns {*} */ function getDevTool() { const DevTools = { development: 'source-map', production: 'source-map', } return DevTools[process.env.NODE_ENV] || DevTools.development } // Webpack Config function makeConfig(name, dependencies, entry, configFn) { const config = { name, dependencies, /** * All entries including common */ entry, /** * Source root, './packages' */ context: srcRootDir, /** * Stats config */ stats: WebpackStatsConfig, /** * Output configuration */ output: makeOutputConfig(), // LOADERS module: makeModuleConfig(), cache: true, recordsPath: `${distDir}/records__${name}`, /** * DevTool config */ devtool: getDevTool(), // Currently we need to add '.ts' to the resolve.extensions array. resolve: makeResolveConfig(), /** * Plugins */ plugins: [ new DefinePlugin({ 'process.env.WEBPACK': true, }), new ForkTsCheckerWebpackPlugin({ tsconfig: Path.resolve(baseDir, 'tsconfig.json'), }), ], /** * Node Shims */ node: { __dirname: false, __filename: true, global: true, process: true, console: true, }, /** * Externals */ externals: makeExternals(), devServer: { contentBase: Path.join(baseDir, 'dist'), host: '0.0.0.0', port: 5000, hot: true, }, } if (configFn) configFn(config) return patchConfig(config) } module.exports = makeConfig( 'MY_PROJECT-spectator', [], { bundle: _.uniq(makeHotEntry(['./spectator/builderEntry'])), }, config => { _.merge(config, { devServer: {}, }) } ) ```
trusktr commented 5 years ago

Alright, running npm i --save "core-js@^2" seems to have made the error go away. No idea what it is doing though.

trusktr commented 5 years ago

I found that suggestion over at https://github.com/babel/babel/issues/9734.