Webpacker: Webpacker is not able to resolve jsx extension?

Created on 28 Oct 2018 · 11Comments · Source: rails/webpacker

So I have just installed webpacker for a react_on_rails project, and out of the box, it automatically errored pointing at a normal div tag, saying unexpected token. I found out right away that this is due to the fact that the hello-world-bundle.js is importing a jsx file but it's expecting a .jsx extension on the import statement and by default it's not using the extension.

I tried editing the webpacker.yml file to include the jsx extension, and it no longer complains about the div tag, and it runs properly, except when I go to the domain it's supposed to be running on (localhost:3000/hello_world), it says something went wrong and told me to check the logs. Upon checking the logs, I found this:

_wilderness_patrol/server/current/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
F, [2018-10-27T15:50:25.261907 #8639] FATAL -- : [c2ec5f36-5aaf-4101-865c-3835d756c1d3]     3:   <head>
[c2ec5f36-5aaf-4101-865c-3835d756c1d3]     4:     <title>ReactOnRailsWithWebpacker</title>
[c2ec5f36-5aaf-4101-865c-3835d756c1d3]     5:     <%= csrf_meta_tags %>
[c2ec5f36-5aaf-4101-865c-3835d756c1d3]     6:     <%= javascript_pack_tag 'hello-world-bundle' %>
[c2ec5f36-5aaf-4101-865c-3835d756c1d3]     7:   </head>
[c2ec5f36-5aaf-4101-865c-3835d756c1d3]     8:
[c2ec5f36-5aaf-4101-865c-3835d756c1d3]     9:   <body>
F, [2018-10-27T15:50:25.261963 #8639] FATAL -- : [c2ec5f36-5aaf-4101-865c-3835d756c1d3]
F, [2018-10-27T15:50:25.262006 #8639] FATAL -- : [c2ec5f36-5aaf-4101-865c-3835d756c1d3] app/views/layouts/hello_world.html.erb:6:in `_app_views_layouts_hello_world_html_erb___3593580469429906702_70226383931960'

Am I missing something here? Is there something else I need to do for it to resolve jsx extensions? I would have thought it should work with .jsx by default, since the default pack it creates upon installation uses jsx files.

I'm assuming there's something missing here, but theres nothing about it in the docs, so I would assume one of your devs forgot something somewhere related to resolving jsx extensions?

Do you know of a workaround? Thanks!

Source

Etregoning

Most helpful comment

@taystack Make sure .jsx is in your extensions like:

https://github.com/rails/webpacker/blob/16761e0f627591cbcb0c180912d52d669ca5c7ae/lib/install/config/webpacker.yml#L35-L39

jakeNiemiec on 31 Jul 2019

👍2 😕1

All 11 comments

Sorry, it seems the problem lied with foreman in some way. When running the dev server and rails server as separate processes it worked just fine. Closing this.

Etregoning on 28 Oct 2018

This is not working for webpack@4. I am having to modify all of my import statements to include the .jsx extension. This was working properly before the update.

I am running the rails server and dev server as separate processes.

taystack on 31 Jul 2019

@taystack Make sure .jsx is in your extensions like:

https://github.com/rails/webpacker/blob/16761e0f627591cbcb0c180912d52d669ca5c7ae/lib/install/config/webpacker.yml#L35-L39

jakeNiemiec on 31 Jul 2019

👍2 😕1

@jakeNiemiec Adding .jsx to webpacker.yml yields a serious error:

```
<--- Last few GCs --->

[73074:0x10264e000] 28919 ms: Scavenge 1374.3 (1411.9) -> 1373.7 (1412.4) MB, 2.0 / 0.0 ms (average mu = 0.283, current mu = 0.182) allocation failure
[73074:0x10264e000] 28922 ms: Scavenge 1374.5 (1412.4) -> 1373.9 (1413.4) MB, 1.7 / 0.0 ms (average mu = 0.283, current mu = 0.182) allocation failure
[73074:0x10264e000] 28925 ms: Scavenge 1374.7 (1413.4) -> 1374.1 (1413.9) MB, 1.9 / 0.0 ms (average mu = 0.283, current mu = 0.182) allocation failure

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 0x32fa6a65be3d]
1: StubFrame [pc: 0x32fa6a611034]

Security context: 0x3716fca1e6e9
2: mapGeneratedCode [0x37160af0aef9] [/Users/taylor.stackpole/Workspace/{PROJECT_NAME}/node_modules/source-list-map/lib/SourceListMap.js:~64] pc=0x32fa6b14f4a2
3: /* anonymous */ [0x371650e51a29] [/Users/tayl...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x10003c597 node::Abort() [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
2: 0x10003c7a1 node::OnFatalError(char const, char const) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
3: 0x1001ad575 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate, char const, bool) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
4: 0x100579242 v8::internal::Heap::FatalProcessOutOfMemory(char const) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
5: 0x10057bd15 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
6: 0x100577bbf v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
7: 0x100575d94 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
8: 0x10058262c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
9: 0x1005826af v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
10: 0x100551ff4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
11: 0x1007da044 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object, v8::internal::Isolate) [/Users/taylor.stackpole/.nvm/versions/node/v10.15.3/bin/node]
12: 0x32fa6a65be3d
error Command failed with signal "SIGABRT".```

taystack on 31 Jul 2019

@jakeNiemiec I simply added .jsx here:

  extensions:
    - .mjs
    - .js
    - .jsx <---
    - .sass
    - .scss

taystack on 31 Jul 2019

Looks like you are using a VM container and it ran out of space. I have seen related issues around the repo, but I don't have a lot of experience with VM-related issues.

jakeNiemiec on 31 Jul 2019

😕1

@jakeNiemiec No VM. This is running on a macbook terminal. The install is a straight-forward rails/webpacker install. I upgraded to v4 and now I'm no longer able to import .jsx files without explicitly adding the extension to the import statements. This is a fairly large project and changing all the file imports isn't a reasonable solution.

taystack on 31 Jul 2019

@jakeNiemiec I'm not sure how you got to the VM conclusion. If you're referring to the .nvm in the path: using a node version manager is fairly standard practice in node development to avoid namespace pollution across projects using different node versions.

taystack on 31 Jul 2019

👍1

I'm not sure how you got to the VM conclusion.

Security context & heap limit Allocation failed normally pops up when your VM is not running node properly.

This is a fairly large project

That might be an easier fix then. Please make sure you are following this: https://github.com/rails/webpacker/issues/1189#issuecomment-404082851

If that does not help, try this as last resort: https://github.com/rails/webpacker/issues/1189#issuecomment-359360326

If you have further problems, can we continue on that thread instead of this one?

jakeNiemiec on 31 Jul 2019

@jakeNiemiec This is going further than .jsx files. Webpack is complaining about .js extensions as well.

taystack on 31 Jul 2019

Can you provide the error?

jakeNiemiec on 31 Jul 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Missed "yarn install" when deploy

suhomozgy-andrey · 3Comments

Bigger default pack, bigger Rails tent. Are the non-react libraries welcome?

ytbryan · 3Comments

Webpack compiling all assets - 404 returned when loading them

ilrock · 3Comments

webpack-dev-server --lazy

iChip · 3Comments

Removing cache from output filenames

eriknygren · 3Comments