Parcel: Unable to import CSS file

Created on 5 Dec 2017  路  4Comments  路  Source: parcel-bundler/parcel

Steps to reproduce:

nvm use 8
yarn add global parcel-bundler
parcel index.html

index.html

<html>
<body>
  <main></main>
  <script src="./index.js"></script>
</body>
</html>

index.js

import Cx from './main.css';
console.log(Cx);

main.css

.someClass {
  color: red;
}

Output:

位 parcel index.html
Server running at http://localhost:1234
馃毃  /Users/alexey/.config/yarn/global/node_modules/parcel-bundler/src/builtins/css-loader.js: Couldn't find preset "env" relative to directory "/Users/alexey/.config/yarn/global/node_modules/parcel-bundler/src"
    at /Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/alexey/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.parse (/Users/alexey/.config/yarn/global/node_modules/parcel-bundler/src/assets/JSAsset.js:52:20)
    at <anonymous>
Bug
Source
picture alexeyraspopov
👍9 😄1

Most helpful comment

(Note: Substitute with yarn equivalents)
On the command line in npm initialized project:

npm install --save-dev babel-preset-env
touch .babelrc

In .babelrc:

{
  "presets": [
    "env"
  ]
}

In package.json:

{
  ...
  "scripts": {
    "start": "parcel ./index.html"
  },
  ...
}

On the command line:

npm start

Then npm takes the .babelrc file into account.

picture rwieruch on 6 Dec 2017
👍4 🎉1

All 4 comments

I solved the problem by adding babel-preset-env.
I put it available with this setting and hot-reload at https://github.com/davidsonsns/parcel-react-app.

davidsonsns picture davidsonsns on 6 Dec 2017
👍2

Ah I see. It's because the .babelrc in parcel is being published to npm, so parcel is trying to compile its own code for the small JS runtime that is included alongside CSS to do hot reloading. Then babel tries to find preset-env which is specified in there, even though we don't really need it.

Added .babelrc to .npmignore in 30616e94ee852560ba4ba52fc2faa605136d4154.

devongovett picture devongovett on 6 Dec 2017
👍2

(Note: Substitute with yarn equivalents)
On the command line in npm initialized project:

npm install --save-dev babel-preset-env
touch .babelrc

In .babelrc:

{
  "presets": [
    "env"
  ]
}

In package.json:

{
  ...
  "scripts": {
    "start": "parcel ./index.html"
  },
  ...
}

On the command line:

npm start

Then npm takes the .babelrc file into account.

rwieruch picture rwieruch on 6 Dec 2017
👍4 🎉1

Should be fixed in v1.0.2.

devongovett picture devongovett on 6 Dec 2017
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

philipodev picture philipodev  路  3Comments
jsftw86 picture jsftw86  路  3Comments
mnn picture mnn  路  3Comments
466023746 picture 466023746  路  3Comments
donaldallen picture donaldallen  路  3Comments