Failed to compile

[pbreah]

Failed to compile

[wojtekmaj]

Oh! @taylorj91 You're not using this package :D This is @wojtekmaj/react-datetimerange-picker, and you're talking about react-datetime-range-picker :)

[sigrundis]

Same issue here except I'm using the react-daterange-picker version 3.0.0.

Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: ../../node_modules/@wojtekmaj/react-daterange-picker/dist/entry.js

Using the react-calendar (version 3.1.0) works by importing the styles manually. Using that with selectRange prop and custom input in the meanwhile 😊

Developing next js project with versions:
"next": "^9.2.2",
"react": "^16.8.6",

[shula6h-101]

ERROR in ./node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.js Module not found: Error: Can't resolve 'react-date-picker/dist/DateInput' in '/opt/atlassian/pipelines/agent/build/node_modules/@wojtekmaj/react-daterange-picker/dist' @ ./node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.js 24:40-83 @ ./node_modules/@wojtekmaj/react-daterange-picker/dist/entry.js

package.json -> "@wojtekmaj/react-daterange-picker": "4.0.0",

I started facing this issue recently, my react application building fine in local but error occurs in bitbucket pipeline

[wojtekmaj]

Module not found: Can't resolve '@wojtekmaj/react-datetimerange-picker' in ... sounds like the module is not installed properly.

You definitely shouldn't use .../src/entry. Entry file from src will not work; it requires a CSS file which is compiled after JS files are copied and compiled with Babel. You should be able to just import @wojtekmaj/react-datetimerange-picker.

../src/entry.nostyle will also not work if you have excluded node_modules from compiling with Babel (which you totally should have done, so don't worry).

Please check if @wojtekmaj/react-datetimerange-picker module even has dist folder in it! If not, try reinstalling the package.

[madhu131313]

I had this problem then I have installed it with version number and it worked.

npm install @wojtekmaj/[email protected]

I was not having dist folder without version number

[wojtekmaj]

Thanks for pointing that out - the one with @ is correct. Fixed README.

[tn3rb]

your welcome

thank you for all of the amazing components you've built,

your time, talent, and effort is greatly appreciated!

[danilolazurenko]

I had same problem. My node version is v8.10.0, npm version is 6.5.0, "react": "^16.6.0". I had a dist folder and src folder in react-datetimerange-picker folder.
Using string like import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker';
and adding in code and trying to compile results in

ERROR in ./node_modules/react-calendar/dist/Calendar.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .react-calendar {
|   width: 350px;
|   max-width: 100%;
 @ ./node_modules/@wojtekmaj/react-datetimerange-picker/dist/entry.js 7:0-43
...
ERROR in ./node_modules/react-clock/dist/Clock.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .react-clock {
|   display: block;
|   position: relative;
 @ ./node_modules/@wojtekmaj/react-datetimerange-picker/dist/entry.js
...
ERROR in ./node_modules/@wojtekmaj/react-datetimerange-picker/dist/DateTimeRangePicker.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .react-datetimerange-picker {
|   display: inline-flex;
|   position: relative;
 @ ./node_modules/@wojtekmaj/react-datetimerange-picker/dist/entry.js 15:0-36

Update: adding css-loader webpack plugin allows to compile, but css styles and part of js seems not working at all

[taylorj91]

Following the suggestion of @danilolazurenko I also got past the webpack compile error, but haven't been able to get the rest working. Any updates on why this was caused or suggestions @wojtekmaj ?

[wojtekmaj]

@taylorj91 The rest being...? Could you please specify what you're facing now?

[taylorj91]

I was having the css styles and js not working, but apparently I had to include the js and css explicitly in my React component:

import DatetimeRangePicker from 'react-datetime-range-picker';  
require('react-datetime-range-picker/dist/style.css');  
require('react-datetime-range-picker/dist/index.js');

as well as load the styles in my webpack config:

  module: {  
    rules: [  
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },  
      {
        test: /\.css$/,
        use: [
          {loader: "style-loader"}, {loader: "css-loader"}
        ]
      }
    ]
  }

Sorry if this is a noob mistake, still learning here. ;)

[taylorj91]

Whoops, you are right. I started using your package, got the same error as above, and switched to the second package with hopes that I would not have issues.
After having the same issue with the react-datetime-range-picker, I figured something was wrong with my setup, so I made the above changes.
I'm assuming the changes will still work to fix the error, so long as you use the correct imports:

import DatetimeRangePicker from 'react-datetimerange-picker';  
require('react-datetimerange-picker/src/DateTimeRangePicker.less');  
require('react-datetimerange-picker/src/DateTimeRangePicker.jsx');

Guess I thought I was being helpful by posting my fix here, but it may have ended up cluttering the issue conversation. Feel free to delete my comments if you feel they are not useful.

[tn3rb]

I also experienced the same issue as everyone else here (except that I was using the correct library).

for what it's worth your install instructions here:
https://github.com/wojtekmaj/react-datetimerange-picker#tldr

and here:
https://github.com/wojtekmaj/react-datetimerange-picker#installation

are slightly different!

npm install @wojtekmaj/react-datetimerange-picker or yarn add @wojtekmaj/react-datetimerange-picker.

vs:

npm install wojtekmaj/react-datetimerange-picker or yarn add wojtekmaj/react-datetimerange-picker.

although I tried BOTH versions and neither worked as they both resulted in the same error:

Module not found: Error: Can't resolve '@wojtekmaj/react-datetimerange-picker'

What did work, was what @madhu131313 suggested (thnx dude), except i used the latest version as of my writing this:

yarn add @wojtekmaj/[email protected]

[tn3rb]

oh.. forgot to mention that with the install attempts that didn't work, this is how the entry in my package.json file looked:

"@wojtekmaj/react-datetimerange-picker": "wojtekmaj/react-datetimerange-picker",

which is pretty odd looking

[wojtekmaj]

Yeah that entry means that the package actually got downloaded from GitHub :)

[oyeanuj]

Hey @wojtekmaj I'm running into similar issues while using the latest version. The default instructions don't work and give the following errors:

/Users/anuj/Code/shuffle-web-next/node_modules/react-calendar/dist/Calendar.css:1
.react-calendar {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1067:16)
    at Module._compile (internal/modules/cjs/loader.js:1115:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/anuj/Code/shuffle-web-next/node_modules/@wojtekmaj/react-datetimerange-picker/dist/entry.js:8:1)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at eval (webpack-internal:///@wojtekmaj/react-datetimerange-picker:1:18)
    at Object.@wojtekmaj/react-datetimerange-picker (/Users/anuj/Code/shuffle-web-next/.next/server/static/development/pages/spaces/[slug]/edit.js:1044:1)

This below works but it seems to be without all the styles:

import DateTimeRangePicker from '@wojtekmaj/react-datetimerange-picker/dist/entry.nostyle'
import "@wojtekmaj/react-datetimerange-picker/dist/DateTimeRangePicker.css" 

Any thoughts on what might be happening?

[compwright]

I'm getting this too.

ERROR in ./node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.js Module not found: Error: Can't resolve 'react-date-picker/dist/DateInput' in '/opt/atlassian/pipelines/agent/build/node_modules/@wojtekmaj/react-daterange-picker/dist' @ ./node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.js 24:40-83 @ ./node_modules/@wojtekmaj/react-daterange-picker/dist/entry.js

[wojtekmaj]

Update to the latest version and you'll be good to go. Some internals in packages @wojtekmaj/react-daterange-picker relied on got changed between non-breaking versions and because of that, if you pull 4.x now, it's not going to work out of the box.

You can, however, try and force "react-datetime-picker" to be "4.2.0" using yarn resolutions or npm overrides. You're on your own though - this version is no longer supported.