Support pnpm

[rizrmd]

https://pnpm.js.org/

[evanw]

Please describe what is wrong and provide a way for me to reproduce the problem. Otherwise I will close this issue as it's not actionable.

[rizrmd]

1. create plain react-app using create-react-app:

npx create-react-app test
esbuild src/index.js --bundle '--define:process.env.NODE_ENV="development"' --loader:.js=jsx --outfile=out.js

done, no error.

2. try using pnpm

rm -rf node_modules
pnpm i
pnpm start

react running as usual on localhost:3000

3. try to built using esbuild:

esbuild src/index.js --bundle '--define:process.env.NODE_ENV="development"' --loader:.js=jsx --outfile=out.js

-- output:

node_modules/react/cjs/react.production.min.js:10:27: error: Could not resolve "object-assign"
'use strict';var l=require("object-assign"),n="function"===typeof Symbol&&Symbol.for,p=n?Symbol.for("react.element"):60103,q=n?Symbol.for("react.portal"):60106,r=n?Symbol.for("react.fragment"):60107,t=n?Symbol.for("react.strict_mode"):60108,u=n?Symbol.for("react.profiler"):60114,v=n?Symbol.for("react.provider"):60109,w=n?Symbol.for("react.context"):60110,x=n?Symbol.for("react.forward_ref"):60112,y=n?Symbol.for("react.suspense"):60113,z=n?Symbol.for("react.memo"):60115,A=n?Symbol.for("react.lazy"):
                           ~~~~~~~~~~~~~~~
node_modules/react/cjs/react.development.js:18:22: error: Could not resolve "object-assign"
var _assign = require('object-assign');
                      ~~~~~~~~~~~~~~~
node_modules/react/cjs/react.development.js:19:29: error: Could not resolve "prop-types/checkPropTypes"
var checkPropTypes = require('prop-types/checkPropTypes');
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/react-dom/cjs/react-dom.production.min.js:13:47: error: Could not resolve "object-assign"
'use strict';var aa=require("react"),n=require("object-assign"),r=require("scheduler");function u(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return"Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!aa)throw Error(u(227));
                                               ~~~~~~~~~~~~~~~
node_modules/react-dom/cjs/react-dom.production.min.js:13:74: error: Could not resolve "scheduler"
'use strict';var aa=require("react"),n=require("object-assign"),r=require("scheduler");function u(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return"Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!aa)throw Error(u(227));
                                                                          ~~~~~~~~~~~
node_modules/react-dom/cjs/react-dom.development.js:19:22: error: Could not resolve "object-assign"
var _assign = require('object-assign');
                      ~~~~~~~~~~~~~~~
node_modules/react-dom/cjs/react-dom.development.js:20:24: error: Could not resolve "scheduler"
var Scheduler = require('scheduler');
                        ~~~~~~~~~~~
node_modules/react-dom/cjs/react-dom.development.js:21:29: error: Could not resolve "prop-types/checkPropTypes"     
var checkPropTypes = require('prop-types/checkPropTypes');

[evanw]

I'm unable to reproduce the issue:

$ echo '{}' > package.json
$ npm i pnpm esbuild create-react-app
$ npx create-react-app example
$ cd example
$ ../node_modules/.bin/esbuild src/index.js --bundle '--define:process.env.NODE_ENV="development"' --loader:.js=jsx --outfile=out.js
src/index.js:3:7: error: File extension not supported: src/index.css
import './index.css';
       ~~~~~~~~~~~~~
src/App.js:3:7: error: File extension not supported: src/App.css
import './App.css';
       ~~~~~~~~~~~
src/App.js:2:17: error: File extension not supported: src/logo.svg
import logo from './logo.svg';
                 ~~~~~~~~~~~~
3 errors
$ ../node_modules/.bin/esbuild src/index.js --bundle '--define:process.env.NODE_ENV="development"' --loader:.js=jsx --outfile=out.js --loader:.css=text --loader:.svg=dataurl
$ rm -fr node_modules/
$ ../node_modules/.bin/pnpm i
$ ../node_modules/.bin/esbuild src/index.js --bundle '--define:process.env.NODE_ENV="development"' --loader:.js=jsx --outfile=out.js --loader:.css=text --loader:.svg=dataurl
$ ../node_modules/.bin/pnpm --version
5.4.11
$ ../node_modules/.bin/esbuild --version
0.6.14

Are there any additional steps needed to reproduce this? Also, what version of pnpm and esbuild are you using, and on what operating system? Support for pnpm was added a while ago so it's supposed to work already (see issue #67).

Note that esbuild doesn't support code generated by create-react-app because it does not yet parse CSS files (see issue #20). I had to add --loader:.css=text --loader:.svg=dataurl to get it to build, although this just bundles the CSS as a string which isn't what you want since it doesn't create a style tag in the DOM.

[rizrmd]

Are there any additional steps needed to reproduce this? Also, what version of pnpm and esbuild are you using, and on what operating system? Support for pnpm was added a while ago so it's supposed to work already (see issue #67).

Yes, sorry... I am removing "import *.css" and "import *.svg" from 'src/index.js' and 'src/App.js'.

I am using pnpm 5.4.11, esbuild 0.6.14 on windows 10

[evanw]

Thanks. It looks like pnpm uses symlinks with absolute paths on Windows but uses relative paths on other platforms, and I'm not supporting absolute paths correctly. I should be able to fix this.

[evanw]

This should be fixed in version 0.6.15 which was just released. Please let me know if it doesn't work for you.